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

ヒント:
配列の 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;


これはデモです: >



コードをコピー

コードは次のとおりです:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">

<頭>

头部

最初の部分

<フォームアクション="" id="form_1">

姓名：

年龄：

<フォームアクション="">

手机：

邮编：

脚部

结果如下（未美化）：

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。