Question

我需要收到删除特定HTML DOM元素的通知。

我使用MutationObserver实现了这一目标。为了让任何事情变得尽可能简单，我认为观察目标元素会更好。

MutationObserver似乎没有抓住任何东西，如果它观察到一个自己被删除的元素。似乎我必须observe(element.parentElement, {childList: true})来捕获element自己的删除，observe(element, {childList: true})不允许删除它。

我注意到不允许observe(element, {})，因为WhatWG规范声明“如果没有选项'childList，attributes和characterData为true，则抛出TypeError ”。但是同样的规范对我来说并不清楚observe(element, {childList: true})是否应该抓住element自己的删除，尽管前一句话含蓄地表明对此的回答是“不”。

我错过了MutationObserver.observe的内容吗？（我猜不是，但最好问）。我使用MutationObserver来实现我的需求是错误的吗？

Answer 1

您需要添加代码。

将subtree: true添加到选项中，以便查看所有后代。

小心将观察者添加到document.body，它可以使您的页面挂起。至少在使用堆栈代码时会发生这种情况。

// select the target node
var target = document.getElementById('some-id');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.removedNodes[0]);
  });    
});
 
// configuration of the observer:
var config = { childList: true, subtree: true };
 
// pass in the target node, as well as the observer options
var test = target.parentElement;
observer.observe(test , config);

document.querySelector("button").addEventListener("click", function(){
   target.parentElement.removeChild(target);
});

<div id="parent">
  <div id="some-id">
      test
  </div>
</div>

<button>change</button>

捕获单个元素自己的删除事件

1 个答案: