MutationRecord: nextSibling プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
MutationRecord の読み取り専用プロパティ nextSibling は、MutationObserver の target の追加または削除されたノードの次の兄弟です。
値
MutationObserver の target でノードが追加または削除された場合は、この値は追加または削除されたノードの次の兄弟である Node です。すなわち、親の childNodes リストの中で追加または削除されたノードの直後にあるノードです。
ノードが追加も削除もされていない場合や、追加または削除されたノードが親の最後の子である場合は、値は null です。
例
変更における次の兄弟を記録する
この例では、ボタンをクリックするとノードを追加します。ただし、ノードを末尾ではなく 対象の先頭 に追加します。そして、オブザーバーが追加されたノードの nextSibling の textContent を記録します。
HTML
html
<button id="add-nodes">ノードを追加</button>
<button id="reset">リセット</button>
<pre id="log" class="log">追加されたノードの次の兄弟:</pre>
<div id="target"><p>ノード #0</p></div>
JavaScript
js
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 = `ノード #${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 = `追加されたノードの次の兄弟: ${record.nextSibling?.textContent}`;
}
}
}
}
const observer = new MutationObserver(logNextSibling);
observer.observe(target, { childList: true });
結果
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-mutationrecord-nextsibling② |