DOM 遍历 - 深度优先与广度优先

2023-12-19 18:03:22

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="container">
    <p>段落 1</p>
    <p>段落 2</p>
    <div id="child">
      <p>段落 3</p>
      <p>段落 4</p>
    </div>
    <p>段落 5</p>
  </div>

  <script>
    // 深度优先遍历
    function depthFirstTraversal(node) {
      console.log(node.nodeName);
      for (var i = 0; i < node.childNodes.length; i++) {
        depthFirstTraversal(node.childNodes[i]);
      }
    }

    // 广度优先遍历
    function breadthFirstTraversal(node) {
      var queue = [node];
      while (queue.length > 0) {
        var currentNode = queue.shift();
        console.log(currentNode.nodeName);
        for (var i = 0; i < currentNode.childNodes.length; i++) {
          queue.push(currentNode.childNodes[i]);
        }
      }
    }

    // 执行遍历
    var container = document.getElementById("container");
    depthFirstTraversal(container);
    breadthFirstTraversal(container);
  </script>
</body>
</html>

前言

DOM（Document Object Model）是 HTML 和 XML 文档的编程接口。它允许脚本访问、修改和创建 HTML 和 XML 文档。DOM 树是 DOM 的可视化表示，它可以帮助我们更好地理解 DOM 的结构和层次。

深度优先遍历

深度优先遍历是一种从根节点开始，依次遍历每个节点的子节点，直到所有子节点都遍历完毕后才返回父节点的遍历方式。

function depthFirstTraversal(node) {
  console.log(node.nodeName);
  for (var i = 0; i < node.childNodes.length; i++) {
    depthFirstTraversal(node.childNodes[i]);
  }
}

广度优先遍历

广度优先遍历是一种从根节点开始，先遍历所有第一层子节点，然后再遍历所有第二层子节点，以此类推的遍历方式。

function breadthFirstTraversal(node) {
  var queue = [node];
  while (queue.length > 0) {
    var currentNode = queue.shift();
    console.log(currentNode.nodeName);
    for (var i = 0; i < currentNode.childNodes.length; i++) {
      queue.push(currentNode.childNodes[i]);
    }
  }
}