JS构建页面的数字正射影像图节点结构的实现代码

小提示：关于数组的concat和推方法。两者的区别主要有：concat是连接数组，不会修改原数组，返回值为连接后的数组，与推的重要区别是concat会展开数组的第一层子数组推是添加数组元素。就地修改原数组，返回值为添加的新项，推不会展开传入的数组。复制代码代码如下： 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展开首先遍历数字正射影像图树，然后构建，结果保存形为复制代码代码如下： { key _ 1:[{key_1_1:value_1}，{ key _ 1 _ 1: value _ 1 }，{key_2_1:value_2}]，key_2:[]，key_3:[]，key_4:[，}的结构本来想用json格式的，可是要么有重复，要么得嵌套，所以改用对象嵌套数组。获取了结构之后，节点树基本也就确定了，直接构造成树形菜单就可以了。当然，还是构成简单的树形菜单，见//www .JB 51。net/article/29100。html文件的后缀遍历和构建的函数如下：复制代码代码如下： //遍历节点函数走DOM(El){ var c=El。第一个孩子；var ReTobj={ }；定义变量数组=[];而(c！==null){//这里只是返回了元素节点，没有节点就是个空数组if(c . nodetype==1){ array。推送(行走DOM(c))；} c=c.nextSibling} ReTobj[El。TagMa]=数组；返回retObj} //构建树形函数创建树(tree){ var array=[]；用于(树中的定义变量键){ array。push(' lih 3 ')；数组。按(键。tolowercase())；数组。push('/H3 ')；如果(树[键]。长度！=0){ array。push(' ul ')；for(var I=0；我种树[钥匙]。长度；I){ array=array。concat(创建树(树[键][I])；}数组。push('/ul ')；}数组。push('/Li ')；}返回数组；} 下面是一个演示：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；}车身{行高： 24pxfont-size : 12px} ul { list-style :无；} ul Li { padding-left : 30px；} /style /head body div id='header '头部/div div id='container' h2第一部分/h2表单操作id=' form _ 1 ' plabel姓名：/labelinput type=' text '/p plabel年龄：/labelinput类型=' text '/p pinput类型='submit '值='提交//p/form form action=' plabel '手机：/labelinput type=' text '/p plabel邮编：/labelinput类型=' text '/p pinput类型='submit '值='保存//p /form /div div id='footer '脚部/div脚本类型='text/javascript' //遍历节点函数走DOM(El){ var c=El。第一个孩子；var ReTobj={ }；定义变量数组=[];而(c！==null){//这里只是返回了元素节点，没有节点就是个空数组if(c . nodetype==1){ array。推送(行走DOM(c))；} c=c.nextSibling} ReTobj[El。TagMa]=数组；返回retObj}函数createTree(树){//构建树形定义变量数组=[];用于(树中的定义变量键){ array。push(' lih 3 ')；数组。按(键。tolowercase())；数组。push('/H3 ')；如果(树[键]。长度！=0){ array。push(' ul ')；for(var I=0；我种树[钥匙]。长度；I){ array=array。concat(创建树(树[键][I])；}数组。push('/ul ')；}数组。推('/Li ')；}返回数组；} var tree=WalkDom(文档。身体)；var ul=文档。创建元素(' ul ')；ul.innerHTML=createTree(树)。join(' ')；文件。尸体。阑尾切除术；/脚本/正文/html结果如下（未美化):