快捷導(dǎo)航

JS構(gòu)建頁面的DOM節(jié)點結(jié)構(gòu)的實現(xiàn)代碼

更新時間：2011年12月09日 00:47:51 作者：

本來想用json格式的，可是要么有重復(fù)，要么得嵌套，所以改用對象嵌套數(shù)組

小提示：
關(guān)于數(shù)組的concat和push方法。
兩者的區(qū)別主要有：
concat是連接數(shù)組，不會修改原數(shù)組，返回值為連接后的數(shù)組，與push的重要區(qū)別是concat會展開數(shù)組的第一層子數(shù)組
push是添加數(shù)組元素。就地修改原數(shù)組，返回值為添加的新項，push不會展開傳入的數(shù)組。

復(fù)制代碼代碼如下:

 
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); 

//輸出： 
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樹，然后構(gòu)建，結(jié)果保存形為

復(fù)制代碼代碼如下:

 
{ 
key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}], 
key_2:[], 
key_3:[], 
key_4:[], 
} 

的結(jié)構(gòu)

本來想用json格式的，可是要么有重復(fù)，要么得嵌套，所以改用對象嵌套數(shù)組。
獲取了結(jié)構(gòu)之后，節(jié)點樹基本也就確定了，直接構(gòu)造成樹形菜單就可以了。
當(dāng)然，還是構(gòu)成簡單的樹形菜單，見 http://www.dbjr.com.cn/article/29100.htm
遍歷和構(gòu)建的函數(shù)如下：

復(fù)制代碼代碼如下:

 
//遍歷節(jié)點 
function walkDom(el){ 
var c = el.firstChild; 
var retObj = {}; 
var array = []; 
while(c !== null){//這里只是返回了元素節(jié)點，沒有節(jié)點就是個空數(shù)組 
if(c.nodeType == 1){ 
array.push(walkDom(c)); 
} 
c = c.nextSibling; 
} 
retObj[el.tagName] = array; 
return retObj; 
} //構(gòu)建樹形 function createTree(tree){ 
var array = []; 
for(var key in tree){ 
array.push('<li><h3>'); 
array.push(key.toLowerCase()); 
array.push('</h3>'); 
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; 
} 

下面是一個demo：

復(fù)制代碼代碼如下:

 
<!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">頭部</div> 
<div id="container"> 
<h2>第一部分</h2> 
<form action="" id="form_1"> 
<p><label>姓名：</label><input type="text" /></p> 
<p><label>年齡：</label><input type="text" /></p> 
<p><input type="submit" value="提交"/></p> 
</form> 
<form action=""> 
<p><label>手機：</label><input type="text" /></p> 
<p><label>郵編：</label><input type="text" /></p> 
<p><input type="submit" value="保存"/></p> 
</form> 
</div> 
<div id="footer">腳部</div> 
<script type="text/javascript"> 
//遍歷節(jié)點 
function walkDom(el){ 
var c = el.firstChild; 
var retObj = {}; 
var array = []; 
while(c !== null){//這里只是返回了元素節(jié)點，沒有節(jié)點就是個空數(shù)組 
if(c.nodeType == 1){ 
array.push(walkDom(c)); 
} 
c = c.nextSibling; 
} 
retObj[el.tagName] = array; 
return retObj; 
} 
function createTree(tree){//構(gòu)建樹形 
var array = []; 
for(var key in tree){ 
array.push('<li><h3>'); 
array.push(key.toLowerCase()); 
array.push('</h3>'); 
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> 
</html> 