javascript - 使用 MutationObserver 检测元素删除

Question

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

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

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

我注册了所有的突变，但是当元素被删除时回调没有被调用。

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

Answer 1

当设置它的元素被移除时，MutationObserver 不会触发。 specification只允许监听属性、 Angular 色数据和子节点的变化。

所以解决这个问题的方法是在未删除的父(或祖先)元素上设置 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 语句用于在您处理删除搜索元素后停止循环遍历其余元素。