递归遍历

Posted 2020-12-27 sske531549304

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了递归遍历相关的知识，希望对你有一定的参考价值。

递归遍历: 查找指定父节点下所有子代节点
如何: 2步:
1. 先遍历所有直接子节点
2. 在遍历直接子节点时，对每个子节点调用和父节点完全相同的方法。
算法: 深度优先遍历: 每次都优先遍历子节点
所有子节点遍历完，才返回遍历兄弟节点
递归的效率: 极低。
解决: 绝大多数递归都可用循环代替

遍历API: 每次仅遍历下一个节点，可用循环反复执行(了解)
1. 节点迭代器:
如何: 2步:
1. 创建迭代器对象:
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
2. var 原先的节点对象=iterator.nextNode(); 跳到下一个节点如果返回null，说明到头了
内置的就是深度优先遍历算法。

html

<!DOCTYPE HTML>
<html>
   <head>
      <title>遍历节点树</title>
      <meta charset="utf-8"/>
      <script src="js/3_2.js"></script>
   </head>
   <body>
      <span>Hello World !</span>
      <ul id="nav">
         <li>电影</li>
         <li>综艺
            <ul>
               <li>跑男</li>
               <li>爸爸</li>
               <li>极限</li>
            </ul>
         </li>
         <li>剧集</li>
      </ul>
      <script src="js/3_2.js"></script>
   </body>
</html>

js

//定义函数：遍历给定父元素下的直接子节点
function getChildren1(parent){
    //如果parent不是文本节点，就输出节点名，否则输出节点值
    console.log(parent.nodeType!=3?parent.nodeName:parent.nodeValue);
    //遍历parent下所有直接子节点
    var children=parent.childNodes;
    for(var i=0;i<children.length;i++){
        //对父元素的每个子节点调用和父元素完全相同的函数
        getChildren1(children[i]);
    }
}
function getChildren2(parent){
    //创建迭代器对象
    var iterator=document.createNodeIterator(
        parent,NodeFilter.SHOW_ALL,null,false
    );
    //用循环反复调用迭代器的nextnode()跳向下一个节点
    var node;
    while ((node=iterator.nextNode())!=null){
        console.log(node.nodeType!=3?node.nodeName:node.nodeValue);
    }
}
getChildren2(document.body);

以上是关于递归遍历的主要内容，如果未能解决你的问题，请参考以下文章