Small tip:
About the concat and push methods of arrays.
The main differences between the two are:
Concat is an array of connections that does not modify the original array, the return value is the concatenated array, and the important difference to push is that concat expands the first-level array of arrays
Push is the addition of an array element. Modify the original array in place, return the new item with the value added, and the push does not expand the passed-in array.
Copy Code code as follows:
var a = [1,2,3,4];
var b = [4,5,6,7];
var C = A.push (b);
var d = a.concat (b);
Console.log (' A ', a);
Console.log (' B ', b);
Console.log (' C ', c);
Console.log (' d ', d);
Output:
A [1,2,3,4,[4,5,6,7]]//did not unfold
b [4,5,6,7]
C 5//push returns the newly added item
d [1,2,3,4,[4,5,6,7],4,5,6,7]//push not unfolded, concat unfolded
The DOM tree is first traversed and then constructed, and the result is saved in the form
Copy Code code 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:[],
}
The structure
It was intended to be in JSON format, but it was either duplicated or nested, so the object nested arrays were used instead.
After acquiring the structure, the node tree is basically determined, which can be constructed directly into a tree menu.
Of course, or make a simple tree menu, see http://www.jb51.net/article/29100.htm
The following functions are traversed and built:
Copy Code code as follows:
Traversing nodes
function Walkdom (EL) {
var c = el.firstchild;
var retobj = {};
var array = [];
while (c!== null) {//Here only returns the element node, no node is an empty array
if (C.nodetype = = 1) {
Array.push (Walkdom (c));
}
c = c.nextsibling;
}
Retobj[el.tagname] = array;
return retobj;
}//Build tree function Createtree {
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;
}
Here is a demo:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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>
<body>
<div id= "Header" > Head </div>
<div id= "Container" >
<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= "submitted"/></p>
</form>
<form action= "" >
<p><label> Mobile: </label><input type= "Text"/></p>
<p><label> Zip: </label><input type= "Text"/></p>
<p><input type= "Submit" value= "Save"/></p>
</form>
</div>
<div id= "Footer" > Foot </div>
<script type= "Text/javascript" >
Traversing nodes
function Walkdom (EL) {
var c = el.firstchild;
var retobj = {};
var array = [];
while (c!== null) {//Here only returns the element node, no node is an empty array
if (C.nodetype = = 1) {
Array.push (Walkdom (c));
}
c = c.nextsibling;
}
Retobj[el.tagname] = array;
return retobj;
}
function Createtree (tree) {//Build Trees
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 = walkdom (document.body);
var ul = document.createelement (' ul ');
ul.innerhtml = Createtree (tree). Join (");
Document.body.appendChild (UL);
</script>
</body>
The results are as follows (not beautified):
