JavaScript如何实现自底向上遍历DOM元素树并按规则处理节点

你需要的遍历规则本质是DOM树后序遍历，原生JS有两种成熟的标准实现方案，无需引入第三方依赖：

1. 递归版后序遍历（最常用，易维护） #

递归实现逻辑天然满足「所有子节点处理完成后再处理当前节点」的要求，代码非常简洁：

// node: 遍历的起始根节点，handle: 节点处理回调函数
function postOrderTraverse(node, handle) {
  // 优先遍历处理所有子元素
  for (let i = 0; i < node.children.length; i++) {
    postOrderTraverse(node.children[i], handle);
  }
  // 子元素全部处理完成后，处理当前节点
  handle(node);
}

// 使用示例
const rootDiv = document.querySelector('div'); // 替换为你的目标根div
postOrderTraverse(rootDiv, (currentNode) => {
  // 此处编写你的节点处理逻辑
  console.log('当前处理节点：', currentNode);
});

该方案适合绝大多数常规DOM场景，无需你手动统计节点处理状态、枚举叶子节点，遍历顺序本身就保证了父节点处理时所有子节点已完成处理。

2. 迭代版后序遍历（适合超深DOM树场景） #

如果你的DOM树层级极深，担心递归调用栈溢出，可以使用迭代实现：

function iterativePostOrder(root, handle) {
  const stack = [];
  let current = root;
  let lastProcessed = null;

  while (stack.length || current) {
    if (current) {
      stack.push(current);
      current = current.firstElementChild;
    } else {
      const peekNode = stack.at(-1);
      if (peekNode.lastElementChild && peekNode.lastElementChild !== lastProcessed) {
        current = peekNode.lastElementChild;
      } else {
        handle(peekNode);
        lastProcessed = stack.pop();
      }
    }
  }
}

// 使用方式和递归版完全一致
const rootDiv = document.querySelector('div');
iterativePostOrder(rootDiv, (node) => {
  // 节点处理逻辑
})

补充说明 #

如果需要遍历包含文本节点、注释节点在内的所有节点，只需要把代码中读取children、firstElementChild、lastElementChild的部分替换为childNodes、firstChild、lastChild即可，同时可以增加节点类型判断逻辑过滤不需要处理的节点类型。

内容的提问来源于stack exchange，提问作者Bernd Wechner