登录  /  注册
首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 17:58:24
原创
995人浏览过

小提示:
关于数组的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格式的,可是要么有重复,要么得嵌套,所以改用对象嵌套数组。
获取了结构之后,节点树基本也就确定了,直接构造成树形菜单就可以了。
当然,还是构成简单的树形菜单,见 http://www.jb51.net/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('
  • ');
    array.push(key.toLowerCase());
    array.push('

    ');
    if(tree[key].length != 0){
    array.push('
      ');
      for(var i = 0; i array = array.concat(createTree(tree[key][i]));
      }
      array.push('
    ');
    }
    array.push('
  • ');
    }
    return array;
    }

    下面是一个demo:
    复制代码 代码如下:

    BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









    第一部分


















    结果如下(未美化):

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号