MutationRecord: nextSibling-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft nextSibling eines MutationRecord ist der nächste Geschwisterknoten eines hinzugefügten oder entfernten Kindknotens des target eines MutationObserver.
Wert
Wenn dem target eines MutationObserver ein Knoten hinzugefügt oder daraus entfernt wird, ist der Wert der Node, der auf den hinzugefügten oder entfernten Knoten folgt: also der Knoten, der in der childNodes-Liste des Elternknotens unmittelbar nach ihm steht.
Der Wert ist null, wenn keine Knoten hinzugefügt oder entfernt wurden oder wenn der Knoten das letzte Kind seines Elternknotens ist.
Beispiele
Den nächsten Geschwisterknoten einer Mutation protokollieren
Bei jedem Klick auf die Schaltfläche wird ein Knoten hinzugefügt oder entfernt. Die Änderung erfolgt jedoch am Anfang des Zielelements, nicht am Ende. Anschließend protokolliert der Observer den textContent des nextSibling des betroffenen Knotens.
HTML
<button id="add-nodes">Add a node</button>
<button id="remove-nodes">Remove a node</button>
<button id="reset">Reset</button>
<pre id="log" class="log">Next sibling of updated node:</pre>
<div id="target"><p>Node #0</p></div>
JavaScript
const addNodes = document.querySelector("#add-nodes");
const removeNodes = document.querySelector("#remove-nodes");
const reset = document.querySelector("#reset");
const target = document.querySelector("#target");
addNodes.addEventListener("click", () => {
const newPara = document.createElement("p");
newPara.textContent = `Node #${target.childElementCount}`;
target.insertBefore(newPara, target.firstChild);
});
removeNodes.addEventListener("click", () => {
const oldPara = target.firstChild;
if (oldPara) {
target.removeChild(oldPara);
}
});
reset.addEventListener("click", () => self.location.reload());
function logNextSibling(records) {
for (const record of records) {
if (record.type === "childList") {
log.textContent = `Next sibling of updated node: ${record.nextSibling?.textContent ?? null}`;
}
}
}
const observer = new MutationObserver(logNextSibling);
observer.observe(target, { childList: true });
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| DOM # ref-for-dom-mutationrecord-nextsibling② |