Home > Developer > JavaScript
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.
Copy codeThe Code is as follows:
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 newly added item
D [, [,],] // push not expanded, concat expanded
First, traverse the DOM tree, and then build and save the result
Copy codeThe Code is as follows:
{
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.jb51.net/article/29100.htm
The traversal and construction functions are as follows:
Copy codeThe Code is 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;
} // Construct the 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:
Copy codeThe Code is as follows:
<! 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 <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 ):
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
