MutationRecord: removedNodes 属性

只读属性 MutationRecord 的 removedNodes 是一个 NodeList，它包含由 MutationObserver 观察到的突变从目标节点中删除的节点。

值

一个 NodeList，包含被 MutationObserver 观察到的突变从目标节点中删除的节点。

示例

观察被删除的节点

在以下示例中，有两个按钮：一个用于向目标节点添加新节点，另一个用于删除它们。一个 MutationObserver 用于观察目标节点的更改；当检测到更改时，观察者会调用一个函数 logRemovedNodes()。

logRemovedNodes() 函数检查 MutationRecord 的 type 是否为 childList，这意味着目标节点的子节点发生了变化。如果类型为 childlist，则该函数会更新已删除节点的总数。但是请注意，单击“添加节点”按钮不会增加已删除节点的总数，因为在这种情况下 record.removedNodes 的长度将为 0。

HTML

html

<button id="add-nodes">Add a node</button>
<button id="remove-nodes">Remove a node</button>
<button id="reset">Reset</button>

<pre id="counter">Total removed nodes: 0</pre>
<div id="target"></div>

#counter {
  border: 1px dotted black;
  padding: 0.5rem;
}

JavaScript

const addNodes = document.querySelector("#add-nodes");
const removeNodes = document.querySelector("#remove-nodes");
const reset = document.querySelector("#reset");
const counter = document.querySelector("#counter");
const target = document.querySelector("#target");
let totalRemovedNodes = 0;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  target.appendChild(newPara);
});

removeNodes.addEventListener("click", () => {
  const lastChild = target.lastChild;
  if (lastChild) {
    target.removeChild(lastChild);
  }
});

reset.addEventListener("click", () => self.location.reload());

function logRemovedNodes(records) {
  for (const record of records) {
    // Check if the childlist of the target node has been mutated
    if (record.type === "childList") {
      totalRemovedNodes = totalRemovedNodes + record.removedNodes.length;
      // Log the number of nodes added
      counter.textContent = `Total removed nodes: ${totalRemovedNodes}`;
    }
  }
}

const observer = new MutationObserver(logRemovedNodes);
observer.observe(target, { childList: true });

结果

规范

规范
DOM 标准 # ref-for-dom-mutationrecord-removednodes②

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。