突变观察者未能检测到元素's删除dom

Mutation Observer fails to detect element's dom removal

本文关键字：删除 dom 元素 观察者 检测 突变      更新时间：2024-01-08

所以，我认为这将是非常直接的，过去有一个DOMNodeRemoved事件，但这是不推荐的，相反，应该使用MutationObserver，问题是，即使有适当的配置，它也不会触发。

根据这篇关于从突变事件迁移到突变观察者的文章，检测节点的dom移除的配置是{ childList: true, subtree: true }，这符合childList是强制性的，subtree意味着它将捕获突变，不仅是目标，而且目标的后代也将被观察。

无论如何，我已经对这个问题进行了jsfidd，它非常直接，<button>删除了<div>，观察者应该记录突变记录，但它没有，看看你是否能弄清楚：）

HTML

<div>Oh my god karen, you can't just ask someone why they're white.</div>
<button>^Remove</button>

JavaScript

div = document.querySelector("div");
callback = function(records){
    console.log(records);
}
config = {
    childList:true,
    subtree:true
}
observer = new MutationObserver(callback);
observer.observe(div,config);
button = document.querySelector("button");
button.addEventListener("click",function(){
    div.parentNode.removeChild(div);
});

谢谢！

正如名称所示，childList只捕获对观察节点的直属子节点列表的更改，而subtree将任何指定的条件扩展到所有子节点（它自己不做任何事情）。

但你两者都不做。您正在移除观察到的节点本身，同时保持其子节点不变。

只需观察div.parentNode就可以解决您的问题。

相关文章：