深度优先遍历和广度优先遍历

最新推荐文章于 2022-01-13 10:31:20 发布

梦见阳光。。

最新推荐文章于 2022-01-13 10:31:20 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6 JS

本文链接：https://blog.youkuaiyun.com/weixin_44481301/article/details/98937689

ES6 同时被 2 个专栏收录

20 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍了在HTML文档中使用深度优先遍历和广度优先遍历的方法，包括递归和非递归实现，深入探讨了如何遍历DOM树结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>deepTraversal</title>
</head>
<body>
  <div class="parent">
    <div class="child-1">
      <div class="child-1-1">
        <div class="child-1-1-1">
          a
        </div>
      </div>
      <div class="child-1-2">
        <div class="child-1-2-1">
          b
        </div>
      </div>
      <div class="child-1-3">
        c
      </div>
    </div>
    <div class="child-2">
      <div class="child-2-1">
        <div class="child-2-1-1">
          d
        </div>
      </div>
      <div class="child-2-2">
        <div class="child-2-2-1">
         e
        </div>
      </div>
      <div class="child-2-3">
        f
      </div>
    </div>
  </div>
  <script>
    //深度优先遍历
    //第一种递归方法
    function deepTraversal (node, nodeList = []) {
      if (node) {
        nodeList.push(node);
        let children = node.children;
        for (let i = 0; i < children.length; i++) {
          deepTraversal(children[i], nodeList);
        }
      }
      return nodeList;
    }

    //第二种递归方法
    function deepTraversal2(node) {
      let nodeList = [];
      if (node) {
        nodeList.push(node);
        let children = node.children;
        for (let i = 0; i < children.length; i++) {
          nodeList = nodeList.concat(deepTraversal2(children[i]));
        }
      }
      return nodeList;
    }

    //非递归方法（采用栈）
    function deepTraversal3 (node) {
      let nodeList = [];
      let stack = [];
      if (!node) return nodeList;
      stack.push(node);
      while(stack.length) {
        let item = stack.pop();
        nodeList.push(item);
        let children = node.children;
        for (let i = children.length - 1; i > 0; i--) {
          stack.push(children[i]);
        }
      }
      return nodeList;
    }


    //广度优先遍历(采用队列)
    function widthTraversal (node) {
      let nodeList = [];
      if (!node) return nodeList;
      let stack = [];
      stack.push(node);
      while (stack.length) {
        let item = stack.shift();
        nodeList.push(item);
        let children = item.children;
        for (let i = 0; i < children.length; i++) {
          stack.push(children[i]);
        }
      }
      return nodeList;
    }

    let node = document.getElementsByClassName('parent')[0];
    console.log('widthTraversal:', widthTraversal(node));

  </script>
</body>
</html>