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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jquery 模板的应用示例
Nov 12 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
JavaScript 闭包的使用场景
Sep 17 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
python实现统计代码行数的方法
2015/05/22 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
浅析python实现动态规划背包问题
2020/12/31 Python
python 自动识别并连接串口的实现
2021/01/19 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
专项资金申请报告
2015/05/15 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL