马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
1. 递归遍历节点树
递归调用：函数内部又调用自己
何时使用递归：遍历不确定层级深度的上下级机构时
原理：在函数内部，调用任何函数，都会为新的函数调用创建新的EC。可实现一个函数，反复执行多项任务。
深度优先遍历：优先遍历下级节点
arguments.callee:引用的是当前调用的函数对象
何时使用：递归内部必须用callee属性调用当前函数，不能直接用函数名。
例如:深度遍历文档中每一个节点
这是html文档：
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>使用DOM方法递归遍历节点树</title>
- <meta charset="utf-8"/>
- <script src="js/3_2.js"></script>
- </head>
- <body>
- <span class="msg">Hello World!</span>
- <ul>
- <li>电影</li>
- <li>综艺
- <ul>
- <li>跑男</li>
- <li>爸爸</li>
- <li>真男</li>
- </ul>
- </li>
- <li>剧集</li>
- </ul>
- </body>
- </html>
这是js文件：
- //实现一个函数: 遍历指定节点下的所有子节点
- var tabs=[]; //
- function getChildren(curr){
- //如果curr不是元素类型或文档类型，就输出curr的节点值
- //否则输出curr的节点名
- console.log(tabs.join("")+"|-"+
- (curr.nodeType!=3?curr.nodeName:curr.nodeValue)
- );
- //如果curr有子节点，就遍历curr下所有子节点
- var children=curr.childNodes;
- if(children){//开始打印子元素之前，压入一个缩进
- tabs.unshift("t"); //开始压入一个缩进
- for(var i=0,len=children.length;i<len;i++){
- //将当前子节点，再作为父节点向下遍历
- arguments.callee/*getChildren*/(children[i]);
- }
- tabs.shift();//弹出一个缩进，
- }
- }
- window.onload=function(){
- getChildren(document);
- }
这是递归遍历的结构图:
下面是控制台的部分效果图:
节点树：由所有节点组成的树结构
元素树：仅由元素节点组成的树结构
节点树 元素树
父节点： parentNode parentElementNode
子节点集合： childNodes children
第一个孩子： firstChild firstElementChild
最后一个孩子： lastChild lastElementChild
前一个兄弟： previousSibling previousElementSibling
后一个兄弟： nextSibling nextElementSibling
children: IE8及以上浏览器支持
其余: IE9及以上浏览器支持 | 
QQ好友和群
微信头条
运营茶馆
开发交流
微商交流
网罗天下
乐在虔州
生活百科
便民黄页
