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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 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 mkdir()定义和用法
2009/01/14 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
深入理解Python中的*重复运算符
2017/10/28 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
大学军训感言400字
2014/03/11 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
整改通知书格式
2015/04/22 职场文书
处罚决定书范文
2015/06/24 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript