突变观察者可以用来观察单个节点的添加和删除吗？

【问题标题】：Can mutations observer be used to observe the addition and removal of a single node?突变观察者可以用来观察单个节点的添加和删除吗？
【发布时间】：2021-01-05 22:47:35
【问题描述】：

我想观察添加到页面的单个节点。我不想收到有关任何其他突变的任何通知。我无法知道节点将被附加到页面的哪个位置。

这可能吗？据我所知，只能观察到父元素的子列表：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit

【问题讨论】：

这能回答你的问题吗？ Detect that given element has been removed from the DOM without sacrificing performance

标签： mutation-observers

【解决方案1】：

不，这是不可能的。变异观察者只观察目标的添加子节点，而不是目标节点的添加或删除。

const div = document.createElement("div");
div.textContent = "I've been added";

const selfObserver = new MutationObserver((mutList) => {
  mutList.forEach((mut) => console.log("self", mut));
})

selfObserver.observe(div, {childList: true});

setTimeout(() => { document.body.append(div); }, 150);

如果您只想观察添加或删除的单个节点，这是不可能的。您必须观察添加到页面的每个节点，然后遍历它们的整个子树，搜索您想要查找的特定节点。它的效率极低，但却是最好的。

【讨论】：