Javascript 删除元素后观察者行为的变化

我有一个

MutationObserver

绑定到

#foo

html元素

var target = document.querySelector("#foo");
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // ...
    });
});

当用户单击

#按钮

元素时，

#foo

将被删除，并在一秒钟后再次显示

<div id="button">Click me to remove the Foo!</div>
<div id="foo">Hello, I'm Foo!</div>

单击我删除Foo！
你好，我是福！

正如我所注意到的，在删除并重新创建了

#foo

之后，观察者停止了工作

• 这是正常的行为吗
• 那么，我需要再次启动观察者

第三个问题：

• 第一个观察者是否被完全移除？或者，与此相反，它仍然在运行，只是“什么也不做”？-我在问这个问题，因为我不想让多个观察者运行，如果他们中只有一个做真正的工作的话

一秒钟后再次出现

行为完全取决于你的意思

如果您的意思是创建了一个具有相同id的新元素，那么是的，这是预期的行为：当您调用观测者时。观察一个元素，您是在该特定元素上调用它，而不是在任何与其id匹配的元素上调用它。如果您从DOM中删除该元素并用另一个元素替换它，看起来相同的不同元素，观察者不会神奇地连接到新的不同元素：

var target=document.querySelector（“#foo”）；
var观察者=新的突变观察者（功能（突变）{
log（“#foo被修改”）；
});
observer.observe（目标，{subTree:true，childList:true}）；
var计数器=0；
勾选（）；
setTimeout（函数（）{
log（“用新的替换foo”）；
target.parentNode.removeChild（目标）；
target=document.createElement（“div”）；
target.id=“foo”；
target.innerHTML=“这是新的foo”；
document.body.insertBefore（目标、document.body.firstChild）；
}, 1000);
函数tick（）{
target.appendChild（document.createTextNode（“.”）；
如果（++计数器<20）{
设置超时（勾选200）；
}
}

---

这是原始的foo

什么意思“…一秒钟后再次出现…”？具有相同ID的新元素？或者你把同样的元素放回去了？更多的读者请看T.J.Crowder帖子的评论。你能把第二点和第三点的答案扩展一下吗？：-）@约翰1212：也许你可以回答我问你的问题。哦，对不起，我明白了，但是忘了写信。目前，我不知道实际发生了什么，因为我正在为一个相当复杂的页面编写一个用户脚本，这是web应用程序的一部分。然而，我认为，

#foo

是一个新元素。所以，根据你的说法，现有的行为是正常的。只是偶然发现了这个问题。根据规范，在中，节点在其观察者上具有强引用，而观察者在其观察的节点上仅具有弱引用。因此，如果没有对观察者的引用，移除节点最终应该移除观察者。