如何让MutationObserver上报变更节点的全部子节点（含非直接子节点）？

我来帮你解决这个问题——要让MutationObserver捕获到变更节点的所有子树节点，而不只是直接子节点，我们可以通过主动遍历子树的方式实现，下面详细说明：

为什么默认行为是这样？ #

正如你观察到的，MutationObserver的设计核心是性能优化：如果每次DOM变更都递归报告所有层级的子节点，会产生大量冗余回调，尤其在操作大型DOM树时会严重拖慢页面。因此它只报告直接触发变更的节点，把遍历子树的控制权交给开发者。

解决方案：主动递归遍历子树 #

我们可以在MutationObserver的回调中，手动递归每个新增/移除节点的完整子树，收集所有元素节点，这样就能获取到所有你需要的最终变更节点（包括嵌套的子元素）。

步骤1：编写辅助函数，递归获取所有子元素

这个函数会遍历传入节点的所有层级子元素，返回包含自身在内的所有元素节点：

function getAllElementNodes(node) {
  const elements = [];
  // 只处理元素节点，若需包含文本/注释节点可调整判断逻辑
  if (node instanceof Element) {
    elements.push(node);
    // 递归遍历所有子元素（children仅返回元素节点，用childNodes可包含其他节点类型）
    for (const child of node.children) {
      elements.push(...getAllElementNodes(child));
    }
  }
  return elements;
}

步骤2：修改MutationObserver回调，处理所有子树节点

在回调中，对每个addedNodes和removedNodes里的节点调用辅助函数，同时用Set去重避免同一节点被多次报告（比如wrap()操作中的<a>会被移除再添加，还会作为<span>的子节点被遍历到）：

($ => { 
  $(() => { 
    var $body = $(document.body).html(''); 
    (new MutationObserver(function (records) {
      const processedNodes = new Set();
      for (const record of records) {
        console.log('----------');
        // 处理新增节点
        for (const node of record.addedNodes) {
          const allElements = getAllElementNodes(node);
          allElements.forEach(el => {
            if (!processedNodes.has(el)) {
              console.log('addition', el.tagName, el.childNodes.length);
              processedNodes.add(el);
            }
          });
        }
        // 处理移除节点
        for (const node of record.removedNodes) {
          const allElements = getAllElementNodes(node);
          allElements.forEach(el => {
            if (!processedNodes.has(el)) {
              console.log('removal', el.tagName, el.childNodes.length);
              processedNodes.add(el);
            }
          });
        }
      }
    })).observe(document.body, { childList: true, subtree: true }); 

    $body.append('<a/>'); 
    $body.find('a').wrap('<span/>'); 
    $body.append('<div><b/></div>'); 
  }); 
})(jQuery);

效果验证

修改后的代码运行后，控制台会输出所有新增/移除的元素，包括嵌套的<b>：

----------
addition A 0
----------
addition SPAN 1
addition A 0
----------
removal A 0
----------
addition DIV 1
addition B 0

关键细节说明 #

• 去重逻辑：使用Set存储已处理节点，避免同一节点因多次DOM操作被重复报告。
• 节点范围：如果需要包含文本节点、注释节点等非元素节点，可将node.children替换为node.childNodes，并调整节点类型判断条件。
• 性能控制：主动遍历子树的开销可控，仅在DOM变更时触发，你还可以根据需求添加过滤规则（比如只处理特定标签的节点）进一步优化性能。

内容的提问来源于stack exchange，提问作者Tony Bogdanov