Mutation Observer 无法检测到元素的 dom 移除

Posted 2023-02-19

【中文标题】Mutation Observer 无法检测到元素的 dom 移除

【英文标题】：Mutation Observer fails to detect element's dom removal

【发布时间】：2015-04-20 07:45:42

【问题描述】：

所以，我认为这会很简单，曾经有一个 DOMNodeRemoved 事件，但它已被弃用，而是应该使用 MutationObserver，问题是，它不会触发，甚至适当的配置。

根据this article关于从变异事件迁移到变异观察者的配置，检测节点的dom删除的配置是 childList: true, subtree: true ，这符合childList是强制性的，subtree意味着它将捕获根据the mdn article，不仅要观察目标的突变，还要观察目标的后代。

无论如何，我已经提出了问题的jsfiddle，它非常简单，<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);
);

谢谢！

【问题讨论】：

我喜欢 DOMNodeRemoved ) 看来我们应该更喜欢每次都使用 IE )))

【参考方案1】：

顾名思义，childList 仅捕获对观察节点的直接子节点列表的更改，subtree 将任何指定条件扩展到所有后代（它自己不做任何事情）。

但你什么都没做。您正在删除观察到的节点本身，同时保持其后代不变。

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

【讨论】：

嗨，是的，我想可能是这样，没有别的办法吗？如果父级有 1000 个子元素来检查所有子元素，这似乎是一种过于昂贵的方法。

如果您只观察 childList ，您将不得不对该 1000 个节点长列表本身进行大量突变，因为它的成本很高。如果你真的这样做（这看起来很奇怪），你仍然可以将它包装在另一个节点中，只是为了观察

是的，这是一个夸张的例子，在另一个节点中包装似乎是一个很酷的解决方案，谢谢！我会将其标记为已回答。

感谢您的想法！但是我没有父母，因为我动态创建元素并返回到框架的未知事物。我正在为 VirtualDom 实现 render 函数（ MutationObserver 对我来说仍然是不好的 API （（（

如果父级本身将被删除将不起作用。您应该使用childList 和subtree 选项观察document.body。但是，我不知道它会对性能产生多大的影响。