使用MutationObserver时如何获取被监听的目标DOM元素引用？

我懂你这个痛点！当你开启subtree: true监听DOM变化时，mutationRecord.target返回的总是实际发生变动的子节点，而不是你最初绑定MutationObserver的那个父元素，对吧？这确实会让处理逻辑卡壳，我给你几个实用的解决办法：

1. 闭包绑定：每个父元素对应独立Observer实例 #

这是最直接靠谱的方案——给每个要监听的父元素单独创建Observer，利用闭包把父元素的引用“锁”在回调里：

// 假设你有多个需要监听的父元素
const targetParents = document.querySelectorAll('.your-parent-selector');

targetParents.forEach(parent => {
  // 每个父元素对应一个Observer实例
  const observer = new MutationObserver(mutationRecords => {
    mutationRecords.forEach(record => {
      // 这里直接用parent就是你绑定的父元素！
      console.log('绑定的父元素:', parent);
      console.log('新增节点数量:', record.addedNodes.length);
      
      // 处理你的业务逻辑...
      for (let i = 0; i < record.addedNodes.length; i++) {
        const node = record.addedNodes[i];
        // 可以结合parent做后续操作
      }
    });
  });

  observer.observe(parent, {
    subtree: true,
    childList: true,
    // 其他你需要的配置（比如attributes等）
  });
});

这种方式逻辑清晰，回调里直接拿到父元素引用，完全不用担心找不到的问题，而且每个Observer只负责对应父元素的变化，也更容易维护。

2. 反向查找：用closest()从变动节点定位父元素 #

如果你的父元素有明确的标识（比如特定类名、ID），可以通过变动节点反向查找对应的父元素：

const mutationObserver = new MutationObserver(mutationRecords => {
  mutationRecords.forEach(record => {
    // 用你监听的父元素的选择器反向查找
    const boundParent = record.target.closest('.your-parent-selector');
    if (boundParent) {
      console.log('找到绑定的父元素:', boundParent);
      // 处理新增/移除节点逻辑
    }
  });
});

// 给多个父元素绑定同一个Observer
document.querySelectorAll('.your-parent-selector').forEach(parent => {
  mutationObserver.observe(parent, {
    subtree: true,
    childList: true
  });
});

⚠️ 注意：如果DOM结构可能发生变化，或者父元素没有唯一标识的选择器，这个方法可能会失效，优先考虑第一种闭包方案。

3. WeakMap关联：用映射存储Observer与父元素的关系 #

如果必须用同一个Observer监听多个父元素，可以用WeakMap来存储父元素和Observer的对应关系（WeakMap不会阻止DOM元素被垃圾回收，比较安全）：

const observerToParent = new WeakMap();
const mutationObserver = new MutationObserver(mutationRecords => {
  mutationRecords.forEach(record => {
    // 遍历WeakMap找到包含当前变动节点的父元素
    const boundParent = Array.from(observerToParent.keys()).find(parent => {
      return parent.contains(record.target);
    });
    if (boundParent) {
      console.log('绑定的父元素:', boundParent);
      // 处理业务逻辑
    }
  });
});

// 绑定多个父元素
const targetParents = document.querySelectorAll('.your-parent-selector');
targetParents.forEach(parent => {
  mutationObserver.observe(parent, {
    subtree: true,
    childList: true
  });
  observerToParent.set(parent, mutationObserver);
});

这种方式适合特殊场景，但性能不如闭包方案，因为每次变化都需要遍历查找，所以非必要不推荐。

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