page_javascriptスキルを構築するJSのDOMノード構造の実装コード-jsチュートリアル-php.cn

page_javascriptスキルを構築するJSのDOMノード構造の実装コード

WBOY

リリース： 2016-05-16 17:58:24

オリジナル

1191 人が閲覧しました

ヒント:
配列の concat メソッドと Push メソッドについて。
この 2 つの主な違いは次のとおりです。
concat は連結された配列であり、戻り値は接続された配列です。push との重要な違いは、concat が sub の最初の層を展開することです。 -arrays の配列
push は配列要素を追加します。元の配列をその場で変更すると、追加された新しい項目が戻り値として返されます。プッシュでは、受信した配列は展開されません。

コードをコピーコードは次のとおりです。

 
var a = [1,2,3 ,4] ; 
var b = [4,5,6,7]; 
var d = a.concat(b); 🎜>console.log('a',a); 
console.log('b',b); 
console.log('d) ',d ); 

//出力: 
a [1,2,3,4,[4,5,6,7]]//展開なし
b [4,5 ,6, 7] 
c 5//push は新しく追加された項目 
d [1,2,3,4,[4,5,6,7],4,5,6,7]/ を返します/push は展開しません。concat 展開 

 
 は最初に DOM ツリーを走査してから構築します。結果は 

として保存されます。コードをコピー

コードは次のとおりです: { key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}],

key_2:[],

 key_3:[], 
key_4:[], 
} 

 
 構造 

 元々は json 形式を使用したかったただし、重複またはネストがあるため、代わりにオブジェクトのネストされた配列を使用してください。 

構造を取得した後、基本的にノードツリーが決定され、それを直接ツリーメニューに構築できます。
もちろん、これでも単純なツリーメニューが形成されます。
http://www.jb51.net/article/29100.htm

を参照してください。トラバース関数と構築関数は次のとおりです。

コードをコピー

コードは次のとおりです: //ノードをトラバースfunction walkDom(el ){

var c = el.firstChild;

var retObj = {}; 
var array = []; これは要素ノードのみを返します、ノードがない場合は空です Array
if(c.nodeType == 1){ 
array.push(walkDom(c)); 
} 
c = c.nextSibling; 
} 
retObj[el .tagName] = array; 
return retObj; 
} // ツリー関数 createTree(tree){ 
var array = [];ツリー内の var キー){ 
 array.push(''); 
array.push(key.toLowerCase()); 
array.push(''); 
if (tree[key].length != 0){ 
array.push(''); 
for(var i = 0; i array = array.concat(createTree(tree[key][i])); 
} 
array.push(''); 
} 
array.push('
'); 
} 
return array; 


これはデモです: >



コードをコピー