如何用MutationObserver正确检测特定ID的DOM元素？

第一段代码无效的原因 #

当#sections是作为父节点的子元素被批量插入DOM时，mutation.addedNodes中只会包含这个父节点，而非#sections本身。你之前的代码只检查了新增节点的id，所以会漏掉这种嵌套添加的场景。

修正后的代码 #

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      // 检查当前节点是否是目标元素
      if (node.id === "sections") {
        processSections(node);
        return;
      }
      // 如果是元素节点，检查其子树中是否存在目标元素
      if (node.nodeType === Node.ELEMENT_NODE) {
        const target = node.querySelector("#sections");
        if (target) {
          processSections(target);
        }
      }
    });
  });
});

// 处理目标元素的逻辑
function processSections(sections) {
  console.log("检测到sections元素:", sections);
  // 完成检测后可以断开观察者，避免重复触发
  observer.disconnect();
}

observer.observe(document.body, {
  childList: true,
  subtree: true,
});

代码说明 #

1. 覆盖两种添加场景：既处理#sections被直接添加的情况，也处理它被嵌套在其他节点中批量添加的情况
2. 精准检测：只在新增节点及其子树中查找目标元素，不会像你的第二段代码那样全局响应所有DOM变动
3. 避免重复触发：找到目标元素后调用disconnect()终止观察，也可以根据需求保留观察者（比如元素可能被多次添加）

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