mutations observer可以用来观察单个节点的增删改查吗？

Question

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

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

Answer 1

不，这是不可能的。 Mutation observers 仅观察目标节点的添加子节点，而不观察目标节点的添加或删除。

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);

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

mutations observer可以用来观察单个节点的增删改查吗？

Can mutations observer be used to observe the addition and removal of a single node?

mutation-observers