JS构建页面的DOM节点结构的实现代码


Posted in Javascript onDecember 09, 2011

小提示:
关于数组的concat和push方法。
两者的区别主要有:
concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组
push是添加数组元素。就地修改原数组,返回值为添加的新项,push不会展开传入的数组。

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树,然后构建,结果保存形为
{ 
key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}], 
key_2:[], 
key_3:[], 
key_4:[], 
}

的结构

本来想用json格式的,可是要么有重复,要么得嵌套,所以改用对象嵌套数组。
获取了结构之后,节点树基本也就确定了,直接构造成树形菜单就可以了。
当然,还是构成简单的树形菜单,见 https://3water.com/article/29100.htm
遍历和构建的函数如下:

//遍历节点 
function walkDom(el){ 
var c = el.firstChild; 
var retObj = {}; 
var array = []; 
while(c !== null){//这里只是返回了元素节点,没有节点就是个空数组 
if(c.nodeType == 1){ 
array.push(walkDom(c)); 
} 
c = c.nextSibling; 
} 
retObj[el.tagName] = array; 
return retObj; 
} //构建树形 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:
<!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"> 
//遍历节点 
function walkDom(el){ 
var c = el.firstChild; 
var retObj = {}; 
var array = []; 
while(c !== null){//这里只是返回了元素节点,没有节点就是个空数组 
if(c.nodeType == 1){ 
array.push(walkDom(c)); 
} 
c = c.nextSibling; 
} 
retObj[el.tagName] = array; 
return retObj; 
} 
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; 
} var tree = walkDom(document.body); 
var ul = document.createElement('ul'); 
ul.innerHTML = createTree(tree).join(''); 
document.body.appendChild(ul); 
</script> 
</body> 
</html>

结果如下(未美化):

JS构建页面的DOM节点结构的实现代码

Javascript 相关文章推荐
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
js跳转页面方法总结
Jan 29 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
js实现跨域的多种方法
Dec 25 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
电子商务网站上的常用的js放大镜效果
Dec 08 #Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 #Javascript
JQuery循环滚动图片代码
Dec 08 #Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 #Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 #Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
You might like
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php去除重复字的实现代码
2011/09/16 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python 调用HBase的简单实例
2016/12/18 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python input函数使用实例解析
2019/11/22 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python -v 报错问题的解决方法
2020/09/15 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
小学语文课后反思精选
2014/04/25 职场文书
信仰心得体会
2014/09/05 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
廉政承诺书
2015/01/19 职场文书
2014年底个人工作总结
2015/03/10 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
婚宴父母致辞
2015/07/27 职场文书
关爱空巢老人感想
2015/08/11 职场文书