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

问题描述

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

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

解决方法

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

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

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