MutationRecord：previousSibling 属性

MutationRecord 的只读属性 previousSibling 是 MutationObserver 的 target 的已添加或已移除子节点的之前兄弟节点。

值

如果一个节点被添加到或从 MutationObserver 的 target 中移除，则该值是已添加或已移除节点的之前兄弟节点：即，在父节点的 childNodes 列表中该节点之前的节点。

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

示例

记录突变的之前兄弟节点

这会每次单击按钮时添加一个节点。然后，观察者会记录已添加节点的 previousSibling 的 textContent。

HTML

html

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

<pre id="log" class="log">Previous 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.appendChild(newPara);
});

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

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

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

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载