documentElement使用innerHTML时，如何通过MutationObserver捕获DOM新增的div？

你遇到的问题本质是：当对document.documentElement使用innerHTML +=时，浏览器会先移除原有的<head>和<body>节点，再重新创建包含新内容的<head>和<body>节点。新的<div>是作为新<body>的子节点，和<body>一起被插入到<html>中的——这时候MutationObserver只会触发<html>节点添加了<body>这个子节点的事件，不会单独触发<body>内部添加<div>的事件，因为<div>在<body>被插入前就已经是它的子节点了。

要捕获这种场景下的<div>，你需要在MutationObserver的回调里，递归检查所有新增节点及其后代，而不只是直接的新增节点。

修改后的代码 #

function test() {
  const config = {
    subtree: true,
    childList: true
  };

  // 递归查找目标节点
  function findTargetNodes(node) {
    const targets = [];
    if (node.tagName && node.tagName.toLowerCase() === "div") {
      targets.push(node);
    }
    // 遍历子节点继续查找
    for (const child of node.children) {
      targets.push(...findTargetNodes(child));
    }
    return targets;
  }

  const callback = (mutationList) => {
    for (const mutation of mutationList) {
      if (mutation.type === "childList") {
        for (const node of mutation.addedNodes) {
          // 递归查找当前新增节点下的所有div
          const foundDivs = findTargetNodes(node);
          foundDivs.forEach(div => console.log(div));
        }
      }
    }
  };
  const observer = new MutationObserver(callback);
  observer.observe(document.documentElement, config);
};

test();

document.documentElement.innerHTML += '<div>TEST</div>';

改动说明 #

• 新增findTargetNodes函数，用于递归遍历节点及其子节点，找出所有符合条件的<div>。
• 在回调中，不再只检查直接的addedNodes，而是对每个新增节点调用递归查找，这样就能捕获到和<body>一起被插入的<div>了。

如果你的场景只需要关注<body>内部的变化，也可以在初始时监听<body>，同时在<html>的childList变化时重新监听新的<body>节点，但递归查找的方式更通用，能覆盖所有新增节点的情况。

内容的提问来源于stack exchange，提问作者Gérard Hazebrouck