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中的constructor和prototype
Apr 07 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
原生JavaScript实现随机点名表
Jan 14 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服务器实现多session并发运行
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
checkbox使用示例
2013/08/23 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vuejs实现购物车功能
2017/11/05 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python正则表达式match和search用法实例
2015/03/26 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python中pop()函数的语法与实例
2020/12/01 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
光声世纪笔试题目
2012/08/25 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
数控专业应届生求职信
2013/11/27 职场文书
药店采购员岗位职责
2014/09/30 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年话务员工作总结
2015/04/29 职场文书
防震减灾主题班会
2015/08/14 职场文书
环保建议书作文400字
2015/09/14 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
mysql函数全面总结
2021/11/11 MySQL
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Python实现归一化算法详情
2022/03/18 Python