TIPS:
The Concat and push methods of arrays.
The main differences between the two are:
Concat is a connected array and does not modify the original array. The returned value is the connected array. An important difference between Concat and push is that Concat expands the first layer sub-array of the array.
Push is to add an array element. Modify the original array in place. The returned value is the new item added. Push does not expand the input array.
VaR A = [1, 2, 4];
VaR B = [4, 5, 6, 7];
VaR c = A. Push (B );
VaR d = A. Concat (B );
Console. Log ('A', );
Console. Log ('B', B );
Console. Log ('C', C );
Console. Log ('D', d );
// Output:
A [1, 2, 3, 4, [4, 5, 6, 7] // not expanded
B [4, 5, 6, 7]
C 5 // push returns the length of the array after the newly added item
D [, [,],] // push not expanded, Concat expanded
First, traverse the DOM tree, and then build and save the result
{
key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}],
key_2:[],
key_3:[],
key_4:[],
}
Structure
Originally, we wanted to use JSON format, but there were already duplicates or nesting, So we switched to object nested arrays.
After obtaining the structure, the node tree is basically determined and can be directly constructed into a tree menu.
Of course, it is still a simple tree menu, see the http://www.cnblogs.com/xesam/archive/2011/12/07/2279093.html
The traversal and construction functions are as follows:
// Traverse nodes
Function compute dom (EL ){
VaR c = El. firstchild;
VaR retobj = {};
VaR array = [];
While (C! = NULL) {// here, only the element node is returned, and no node is an empty array.
If (C. nodetype = 1 ){
Array. Push (writable dom (c ));
}
C = C. nextsibling;
}
Retobj [El. tagname] = array;
Return retobj;
}
// Build a tree
function createTree(tree){
var array = [];
for(var key in tree){
array.push('<li> array.push(key.toLowerCase());
array.push('if(tree[key].length != 0){
array.push('<ul>');
for(var i = 0; i < tree[key].length; i++){
array = array.concat(createTree(tree[key][i]));
}
array.push('</ul>');
}
array.push('</li>');
}
return array;
}
The following is a demo:
View code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/CSS">
* {Margin: 0; padding: 0 ;}
Body {Line-Height: 24px; font-size: 12px ;}
Ul {list-style: none ;}
Ul Li {padding-left: 30px ;}
</Style>
</Head>
<Body>
<Div id = "Header"> header </div>
<Div id = "Container">
<H2> Part 1 </H2>
<Form action = "" id = "form_1">
<P> <label> name: </label> <input type = "text"/> </P>
<P> <label> Age: </label> <input type = "text"/> </P>
<P> <input type = "Submit" value = "Submit"/> </P>
</Form>
<Form action = "">
<P> <label> mobile phone: </label> <input type = "text"/> </P>
<P> <label> zip code: </label> <input type = "text"/> </P>
<P> <input type = "Submit" value = "save"/> </P>
</Form>
</Div>
<Div id = "footer"> foot </div>
<SCRIPT type = "text/JavaScript">
// Traverse nodes
Function compute dom (EL ){
VaR c = El. firstchild;
VaR retobj = {};
VaR array = [];
While (C! = NULL) {// here, only the element node is returned, and no node is an empty array.
If (C. nodetype = 1 ){
Array. Push (writable dom (c ));
}
C = C. nextsibling;
}
Retobj [El. tagname] = array;
Return retobj;
}
Function createtree (tree) {// build a tree
VaR array = [];
For (var key in tree ){
Array. Push ('<li> Array. Push (key. tolowercase ());
Array. Push ('If (tree [Key]. length! = 0 ){
Array. Push ('<ul> ');
For (VAR I = 0; I <tree [Key]. length; I ++ ){
Array = array. Concat (createtree (tree [Key] [I]);
}
Array. Push ('</ul> ');
}
Array. Push ('</LI> ');
}
Return array;
}
VaR tree = plain dom (document. Body );
VaR ul = Document. createelement ('ul ');
Ul. innerhtml = createtree (tree). Join ('');
Document. Body. appendchild (UL );
</SCRIPT>
</Body>
</Html>
The results are as follows (not beautifying ):
For more information, see http://www.cnblogs.com/xesam /]
Address: http://www.cnblogs.com/xesam/archive/2011/12/07/2279505.html