JavaScript 如何实现 DOM 树遍历

JavaScript 实现DOM树遍历的主要方式包括使用节点间的关系属性、使用Document对象的查询方法、以及使用现代的遍历API（如TreeWalker和NodeIterator）。这些方法让开发者能够以不同方式遍历DOM树，可以按照需求选择适合的遍历策略。

在详细描述之前，让我们先聚焦于节点间的关系属性。每一个DOM节点都具有一组属性，如parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling，通过这些属性可以对DOM树进行遍历。例如，通过递归地访问某节点的childNodes属性，可以遍历该节点的所有子节点，这被称为深度优先遍历（Depth-First Search, DFS）。借助这些关系属性，开发者可以构建函数以特定顺序访问DOM树的每一个节点。

一、基于DOM关系的遍历

深度优先遍历（Depth-First Search, DFS）和宽度优先遍历（Breadth-First Search, BFS）是两种最基本的DOM遍历方法。深度优先遍历意味着我们先遍历所有子树，然后再移至兄弟节点，而宽度优先遍历则意味着我们先访问同一层级的所有节点，再访问下一层级的节点。

深度优先遍历

要实现深度优先遍历，通常采用递归方法。以下是一个使用递归的深度优先遍历DOM树的基本示例：

function traverseDFS(node) {
  if (node) {
    console.log(node); // 处理当前节点
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
      traverseDFS(children[i]); // 递归遍历所有子节点
    }
  }
}
traverseDFS(document.body); // 从<body>标签开始遍历

宽度优先遍历

宽度优先遍历则需要使用队列来实现，以下是一个宽度优先遍历DOM树的基本示例：

function traverseBFS(root) {
  let queue = [root]; // 初始化队列
  while (queue.length) {
    const node = queue.shift(); // 取出队列的第一个节点
    console.log(node); // 处理当前节点
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
      queue.push(children[i]); // 将子节点加入队列
    }
  }
}
traverseBFS(document.body); // 从<body>标签开始遍历

二、Document对象的查询方法

除了使用节点间的关系属性，为了便捷地查找元素，DOM中的Document对象提供了多个查询方法。

获取特定元素

getElementById是最基本的方法，用来根据ID获取特定的元素。

var element = document.getElementById("unique-id");

获取符合特定条件的元素集合

getElementsByTagName和getElementsByClassName用于根据标签名和类名获取DOM元素的集合。

var elementsByTagName = document.getElementsByTagName("div");
var elementsByClassName = document.getElementsByClassName("some-class");

使用CSS选择器检索元素

更强大和灵活的方法是querySelector和querySelectorAll，它们允许使用CSS选择器语法来查找匹配的单个元素或元素集合。

var firstMatch = document.querySelector(".some-class");
var allMatches = document.querySelectorAll("ul > li.some-class");

三、现代的遍历API

现代浏览器提供了专门的遍历API，允许更灵活地遍历DOM树。

TreeWalker

TreeWalker 是一个构造函数，它提供了对DOM树的节点进行过滤和遍历的方法。

var treeWalker = document.createTreeWalker(
  document.body, 
  NodeFilter.SHOW_ELEMENT,  // 过滤器，这里指示只返回元素节点
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, 
  false
);
while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode); // 依次访问每个符合条件的节点
}

NodeIterator

类似于TreeWalker，NodeIterator也是用于遍历DOM节点。不同之处在于NodeIterator的遍历不会影响到原始的DOM结构。

var nodeIterator = document.createNodeIterator(
  document.body, 
  NodeFilter.SHOW_ELEMENT
);
var currentNode;
while (currentNode = nodeIterator.nextNode()) {
    console.log(currentNode); // 依次访问每个符合条件的节点
}

以上介绍的是JavaScript中实现DOM树遍历的几种主要方法，开发者可以根据具体情形挑选合适的方式。随着JavaScript语言的不断演化，可能还会有新的方法出现，但核心原理仍然是遍历DOM树这个数据结构。在开发过程中合理利用这些方法将极大提高对DOM操作的效率和性能。