js中如何递归遍历dom树

递归遍历DOM树可访问元素及其所有后代，常用childNodes或children遍历子节点并递归调用自身，根据需求选择处理节点类型。

在 JavaScript 中，递归遍历 DOM 树是一种常见的操作，用于访问某个元素及其所有后代节点。你可以通过检查节点的子节点并递归调用自身来实现。

基本思路

从一个根节点开始，访问该节点，然后遍历它的每个子节点，对每个子节点再次执行相同的操作。这样就能深入到树的每一层。

常用方法如下：

使用 childNodes 遍历所有子节点（包括文本节点、注释等）：

如果你需要处理所有类型的节点，可以使用 childNodes。

示例代码：

function walkDOM(node) {
  // 处理当前节点
  console.log(node.nodeName);

  // 获取所有子节点
  let children = node.childNodes;
  for (let i = 0; i < children.length; i++) {
    walkDOM(children[i]); // 递归调用
  }
}

// 调用：从 document.body 开始遍历
walkDOM(document.body);

只遍历元素节点（忽略文本和注释）

如果只想处理 HTML 元素（如 div、span 等），建议使用 children 或检查 nodeType。

方式一：使用 children（只包含元素节点）

function walkElements(node) {
  console.log(node.tagName); // 输出标签名

  let children = node.children; // 只包含元素节点
  for (let i = 0; i < children.length; i++) {
    walkElements(children[i]);
  }
}

walkElements(document.body);

方式二：使用 childNodes + nodeType 判断

更精确地控制节点类型，例如只处理元素节点（nodeType === 1）。

function walkNodeByType(node) {
  if (node.nodeType === 1) { // 元素节点
    console.log('Element:', node.tagName);
  }

  let child = node.firstChild;
  while (child) {
    walkNodeByType(child);
    child = child.nextSibling;
  }
}

walkNodeByType(document.body);

应用场景举例

• 查找特定类名或属性的所有元素
• 修改页面中所有文本节点的内容
• 序列化 DOM 结构为 JSON 格式
• 实现自定义的事件委托机制

比如：收集页面中所有 input 元素：

function findAllInputs(node, result = []) {
  if (node.nodeType === 1 && node.tagName === 'INPUT') {
    result.push(node);
  }

  node.childNodes.forEach(child => {
    findAllInputs(child, result);
  });

  return result;
}

const inputs = findAllInputs(document.body);
console.log(inputs);

基本上就这些。递归遍历 DOM 的关键是理解树形结构，并正确访问子节点。选择 childNodes 还是 children 取决于你是否需要处理非元素节点。不复杂但容易忽略细节。