使用MutationObserver检测元素删除

Question

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

[MDN说：“注：根据规范，如果删除了目标元素，则垃圾回收器将删除MutationObserver。”

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

我注册了所有变体，但是删除元素时未调用回调。

我尝试过setInterval每秒检查一次元素是否消失，但是当元素被删除然后快速重新创建时，这种方法不能很好地工作。

Answer 1

移除设置了该元素的元素时，不会触发MutationObserver。 specification仅允许侦听属性，字符数据和子节点上的更改。

因此解决方案是在未删除的父（或祖先）元素上设置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语句在那里，一旦您处理了所搜索元素的删除，就停止循环浏览其余元素。