当前位置:首 页 > 技术文章 > 原创 > 详细

javascript实现页面DOM节点树形结构的呈现

字号字号

摘要:由于用到数组的concat和push方法,所以顺便强调一下数组的concat和push方法两者的主要区别有: concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组 push是添加数组元素。就地修改原数组,返回值为添加的新项,push……

由于用到数组的concat和push方法,所以顺便强调一下数组的concat和push方法两者的主要区别有:
concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组
push是添加数组元素。就地修改原数组,返回值为添加的新项,push不会展开传入的数组。示例:

JavaScript Code复制内容到剪贴板
  1. var a = [1,2,3,4];    
  2. var b = [4,5,6,7];    
  3. var c = a.push(b);    
  4. var d = a.concat(b);    
  5.   
  6. console.log('a',a);    
  7. console.log('b',b);    
  8. console.log('c',c);    
  9. console.log('d',d);    
  10.   
  11. //输出:    
  12. a [1,2,3,4,[4,5,6,7]]//没有展开    
  13. b [4,5,6,7]    
  14. c 5//push返回新添加的项    
  15. d [1,2,3,4,[4,5,6,7],4,5,6,7]//push未展开,concat展开   

关于push和concat的区别就不多废话了,首先遍历DOM树,然后构建,结果保存为如下的结构

JavaScript Code复制内容到剪贴板
  1. {    
  2. key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}],    
  3. key_2:[],    
  4. key_3:[],    
  5. key_4:[],    
  6. }   

本来想用json格式的,可是要么有重复,要么得嵌套,所以改用对象嵌套数组。
获取了结构之后,节点树基本也就确定了,直接构造成树形菜单就可以了。
遍历和构建的函数包括在下面的demo中:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  3. <html>    
  4. <head>    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
  6. <title></title>    
  7. <style type="text/css">    
  8. *{ margin: 0; padding: 0;}    
  9. body{ line-height: 24px; font-size: 12px;}    
  10. ul{ list-style: none;}    
  11. ul li{ padding-left: 30px;}    
  12. </style>    
  13. </head>    
  14. <body>    
  15. <div id="header">头部</div>    
  16. <div id="container">    
  17. <h2>第一部分</h2>    
  18. <form action="" id="form_1">    
  19. <p><label>姓名:</label><input type="text" /></p>    
  20. <p><label>年龄:</label><input type="text" /></p>    
  21. <p><input type="submit" value="提交"/></p>    
  22. </form>    
  23. <form action="">    
  24. <p><label>手机:</label><input type="text" /></p>    
  25. <p><label>邮编:</label><input type="text" /></p>    
  26. <p><input type="submit" value="保存"/></p>    
  27. </form>    
  28. </div>    
  29. <div id="footer">脚部</div>    
  30. <script type="text/javascript">    
  31. //遍历节点    
  32. function walkDom(el){    
  33. var c = el.firstChild;    
  34. var retObj = {};    
  35. var array = [];    
  36. while(c !== null){//这里只是返回了元素节点,没有节点就是个空数组    
  37. if(c.nodeType == 1){    
  38. array.push(walkDom(c));    
  39. }    
  40. c = c.nextSibling;    
  41. }    
  42. retObj[el.tagName] = array;    
  43. return retObj;    
  44. }    
  45. function createTree(tree){//构建树形    
  46. var array = [];    
  47. for(var key in tree){    
  48. array.push('<li><h3>');    
  49. array.push(key.toLowerCase());    
  50. array.push('</h3>');    
  51. if(tree[key].length != 0){    
  52. array.push('<ul>');    
  53. for(var i = 0; i < tree[key].length; i++){    
  54. array = array.concat(createTree(tree[key][i]));    
  55. }    
  56. array.push('</ul>');    
  57. }    
  58. array.push('</li>');    
  59. }    
  60. return array;    
  61. }    
  62.   
  63. var tree = walkDom(document.body);    
  64. var ul = document.createElement('ul');    
  65. ul.innerHTML = createTree(tree).join('');    
  66. document.body.appendChild(ul);    
  67. </script>    
  68. </body>    
  69. </html>   

结果如下:

大家也看到代码了,没有做样式美化,只是实现树形菜单的一个基本思路

  • 添加[Admin-1]
  • 浏览[1600]
  • ▼评论[0]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]