MutationRecord的addedNodes和removedNodes属性是实时的还是静态的NodeList对象？

Question

我正在使用 JavaScript 中的 MutationObserver API，我对 MutationRecord 对象的 addedNodes 和 returnedNodes 属性有疑问。

当发生突变并触发 MutationObserver 回调时，每个 MutationRecord 对象都会提供有关发生的更改的信息。该对象的addedNodes和removedNodes属性是NodeList对象，表示在突变期间添加或删除的节点。

MDN 文档 [1][2] 没有明确提及这些 NodeList 对象是“活动的”还是“静态的”。我怎样才能找到（通过代码）？如果我错了，请纠正我，但我不相信 NodeList 对象有一个可以访问的属性可以告诉我它是活动的还是静态的。

谢谢！

[1] https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/addedNodes

[2] https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/removedNodes

Answer 1

它们不是现场收藏。首先，对于

deletedNodes

，这是没有意义的，因为根据定义，这些节点不再在文档中，因此它们不再“存在”，但它们在属性中。

addedNodes

在文档中。如果我们稍后将它们从文档中删除，那么如果之前的

addedNodes

是实时列表，我们应该会看到它们从该列表中删除，但这种情况不会发生：

var lastAddedNodes;

function onMutation(records) {
  for (const record of records) {
    if (record.type === "childList") {
      if (record.addedNodes.length) {
        // Save a reference to the node list in a global variable
        lastAddedNodes = record.addedNodes; 
        console.log("detected", lastAddedNodes.length, "nodes were added");
      } 
      if (record.removedNodes.length) {
        console.log("detected", record.removedNodes.length, "nodes were deleted");
      }
    }
  }
  // Log the current size of the list we want to test for "liveness":
  console.log("lastAddedNodes.length ==", lastAddedNodes.length);
}

const container = document.querySelector("#container");
const observer = new MutationObserver(onMutation);
observer.observe(container, { childList: true });

setTimeout(function () {
  const div = document.createElement("div");
  div.textContent = "div created";
  container.appendChild(div); // Add a new element
}, 1000);

setTimeout(function () {
  container.innerHTML = ""; // Deletes the earlier created element
}, 2000);

// Just to be sure, log that size again some time later
setTimeout(function () {
  console.log("lastAddedNodes.length ==", lastAddedNodes.length);
}, 3000);

<div id="container"></div>