移除元素后的 MutationObserver 行为

Question

我有一个MutationObserver 绑定到一个#foo html 元素。

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

当用户点击#button 元素时，#foo 会被移除并在一秒钟后再次出现。

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

我注意到，#foo 被删除并重新创建后，观察者停止工作。

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

还有第三个问题：

• 第一个观察者是否被完全删除？或者，取而代之的是，它仍在运行，只是“无所事事”？ - 我在问这个问题，因为我不希望多个观察者运行，只要其中一个在做真正的工作。

Answer 1

并在一秒钟后再次出现

行为将完全取决于您的意思。

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

var target = document.querySelector("#foo");
var observer = new MutationObserver(function(mutations) {
    console.log("#foo was modified");
});
observer.observe(target, {subTree: true, childList: true});
var counter = 0;
tick();
setTimeout(function() {
    console.log("Replacing foo with a new one");
    target.parentNode.removeChild(target);
    target = document.createElement("div");
    target.id = "foo";
    target.innerHTML = "This is the new foo";
    document.body.insertBefore(target, document.body.firstChild);
}, 1000);
function tick() {
    target.appendChild(document.createTextNode("."));
    if (++counter < 20) {
        setTimeout(tick, 200);
    }
}

<div id="foo">This is the original foo</div>

如果您的意思是要将 相同元素 放回 DOM，那么不，这不是预期的行为，也不是本示例中发生的情况：

var target = document.querySelector("#foo");
var observer = new MutationObserver(function(mutations) {
    console.log("#foo was modified");
});
observer.observe(target, {subTree: true, childList: true});
var counter = 0;
tick();
setTimeout(function() {
    console.log("Removing foo for a moment");
    target.parentNode.removeChild(target);
    setTimeout(function() {
        console.log("Putting the same foo back in");
        document.body.insertBefore(target, document.body.firstChild);
    }, 100);
}, 1000);
function tick() {
    target.appendChild(document.createTextNode("."));
    if (++counter < 20) {
        setTimeout(tick, 200);
    }
}

<div id="foo">This is the original foo</div>

这里的关键信息是观察者正在观察您传递给observe的一个特定元素。

---

这些问题仅适用于您移除旧元素并用全新元素替换它的情况：

那么，我需要再次启动观察者吗？

如果您要删除原始元素并在其位置放置一个新元素，您应该告诉观察者停止观察：

observer.disconnect();

一旦你有了一个新元素，你就可以将观察者连接到它：

observer.observe(theNewElement, /*...options go here...*/);

第一个观察者是否被完全移除？或者，它仍然在运行，只是“什么都不做”？

在理论上，由于the spec 明确表示它是引用其观察者的元素，那么如果你释放对元素的唯一引用，理论上观察者会断开连接，因为元素及其观察者列表被清理。但是，尚不清楚观察者的disconnect 方法如何在观察者没有对元素的引用的情况下实现，因此它们可能具有相互引用。如果您保留对观察者的引用，则可以将相互引用保留在内存中。可以肯定的是，我会故意断开它。

我在问这个问题，因为我不希望多个观察者运行，只要他们中的一个在做真正的工作。

观察者不会“跑”，他们反应。观察者将继续观察原始元素，直到/除非您断开它。如果你没有对原始元素做任何事情，那么观察者除了占用内存之外没有做任何事情。但同样，如果你要移除元素，你应该断开观察者的连接。