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发布错误的详细介绍
Aug 02 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
电子商务网站上的常用的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中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
VUE+node(express)实现前后端分离
2019/10/13 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python验证码图片处理(二值化)
2019/11/01 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
django教程如何自学
2020/07/31 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
EJB实例的生命周期
2016/10/28 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
个性发展自我评价
2014/02/11 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
大国崛起观后感
2015/06/02 职场文书
高二化学教学反思
2016/02/22 职场文书