使用 MutationObserver 检测元素删除

Question

我想观察有时被删除然后重新创建的元素。我的问题是观察者被元素破坏，并且不会被元素重新创建，并且我无法检测何时发生这种情况以便重新创建观察者。

MDN表示“注意：根据规范，如果目标元素被删除，垃圾收集器将删除 MutationObserver。”

有没有办法检测到该删除？我正在观察一个元素，我想知道该元素何时被删除。我可以检测它的子节点是否已被删除，但我无法检测它本身是否已被删除。

我注册了所有突变，但删除元素时不会调用回调。

我尝试使用 setInterval 每秒检查元素是否消失，但是当元素被删除然后快速重新创建时，这种方法效果不佳。

Answer 1

当设置 MutationObserver 的元素被删除时，MutationObserver 不会触发。该规范只允许监听属性、字符数据和子节点的变化。

所以解决这个问题的办法就是在未被删除的父（或祖先）元素上设置MutationObserver。在回调中，您必须循环遍历MutationRecords以检查它们的removedNodes属性是否包含您正在查找的元素。

其代码如下所示：

let mutationObserver = new MutationObserver((mutationList, observer) => {
  for (let mutationRecord of mutationList) {
    if (mutationRecord.removedNodes) {
      for (let removedNode of mutationRecord.removedNodes) {
        if (removedNode.id === 'myElement') {
          ...
          return;
        }
      }
    }
  }
});

一旦处理了搜索元素的删除，该return语句就停止循环遍历其余元素。