MutationRecord：nextSibling 属性

MutationRecord 只读属性 nextSibling 是 MutationObserver 的 target 的已添加或移除子节点的下一个同级节点。

值

如果节点已添加到或从 MutationObserver 的 target 中移除，则该值为 Node，它是已添加或移除节点的下一个同级节点：即，在父节点的 childNodes 列表中紧跟在该节点后面的节点。

如果没有任何添加或移除的节点，或者该节点是其父节点的最后一个子节点，则该值为 null。

示例

记录突变的下一个同级节点

每次单击按钮时，这都会添加一个节点，但它会将节点添加到 目标的开头，而不是结尾。然后观察者会记录添加节点的 nextSibling 的 textContent。

HTML

html

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

<pre id="log" class="log">Next sibling of added node:</pre>
<div id="target"><p>Node #0</p></div>

.log {
  border: 1px dotted black;
  padding: 0.5rem;
}

JavaScript

const addNodes = document.querySelector("#add-nodes");
const reset = document.querySelector("#reset");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.insertBefore(newPara, target.firstChild);
});

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

function logNextSibling(records) {
  for (const record of records) {
    if (record.type === "childList") {
      for (const newNode of record.addedNodes) {
        log.textContent = `Next sibling of added node: ${record.nextSibling?.textContent}`;
      }
    }
  }
}

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

结果

规范

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

浏览器兼容性

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