我希望突变观察者能够监听其目标节点本身是否在javascript中被删除

Question

我正在目标节点上使用突变观察器。如果任何子节点或属性发生更改，它就会触发。但我有一个情况，我必须处理目标节点本身被删除的情况。这是行不通的。有办法处理吗？

Answer 1

MutationObservers 可以观察 3 件事：

• 属性变更
• 文字内容变更
• 子列表更改

然后，这些更改事件可以选择冒泡，因此如果您想对目标及其所有子级进行更改，您可以这样做。

这意味着你想要的事情不能通过倾听你的目标来完成。您需要将观察者附加到目标的父节点，并侦听父节点上删除要跟踪的节点的 childList 更改。

例如而不是你所希望的这个假例子

var observer = new MutationObserver(callback);
observer(target, {
  // Fake non-existent option
  parent: true
});

你愿意

var observer = new MutationObserver(function(mutations){
   var targetRemoved = mutations.some(function(mutation){
     return mutation.removedNodes.indexOf(target) !== -1;
   });

   if (targetRemoved) callback();
});
observer(target.parentNode, {
  childList: true
});

Answer 2

can-dom-mutate 可以做到这一点：

import domMutate from "can-dom-mutate";
domMutate.onNodeRemoval(yourEleement, function(){

})

它通过侦听整个文档中的元素删除来实现此目的。

Answer 3

@loganfsmyth 答案，但通过转换为数组并重写为实际的 js 语法修复了 NodeList 上缺少的 indexOf 方法：

    const observer = new MutationObserver((mutations) => {
      const targetRemoved = mutations.some((mutation) => Array.from(mutation.removedNodes).includes(target));
      if (targetRemoved) callback();
    });
    observer(target.parentNode, {
      childList: true
    });

谢谢你@loganfsmyth

快乐编码:)