MutationRecord：addedNodes 属性

MutationRecord 只读属性addedNodes 是一个 NodeList，其中包含由使用 MutationObserver 观察到的变异添加到目标节点的节点。

值

包含添加到由 MutationObserver 观察到的变异的目标的节点的 NodeList。

示例

添加节点时的更新

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

logNewNodes() 函数检查 MutationRecord 的 type 是否为 childList，这意味着目标节点的子节点已更改。如果类型为 childlist，则该函数会更新已添加的新节点总数。但是，请注意，单击“删除节点”按钮不会增加新节点的总数，因为在这种情况下，record.addedNodes 的长度将为 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 added nodes: 0</pre>
<div id="target"></div>

JavaScript

js
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 totalAddedNodes = 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 logNewNodes(records) {
  for (const record of records) {
    // Check if the childlist of the target node has been mutated
    if (record.type === "childList") {
      totalAddedNodes = totalAddedNodes + record.addedNodes.length;
      // Log the number of nodes added
      counter.textContent = `Total added nodes: ${totalAddedNodes}`;
    }
  }
}

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

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载