MutationRecord: nextSibling-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte Eigenschaft nextSibling von MutationRecord ist das nächste Geschwisterkind eines hinzugefügten oder entfernten Kindknotens des target eines MutationObserver.
Wert
Wenn ein Knoten dem target eines MutationObserver hinzugefügt oder daraus entfernt wird, ist der Wert der Node, die das nächste Geschwister des hinzugefügten oder entfernten Knotens ist: das heißt, der Knoten, der diesem unmittelbar in der Elternliste der childNodes folgt.
Der Wert ist null, wenn keine Knoten hinzugefügt oder entfernt werden oder wenn der Knoten das letzte Kind seines Elternknotens ist.
Beispiele
Das nächste Geschwister einer Mutation protokollieren
Dies fügt bei jedem Klick auf den Button einen Knoten hinzu, jedoch am Anfang des Zieles, nicht am Ende. Der Observer protokolliert dann das textContent des nextSibling des hinzugefügten Knotens.
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>
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 });
Ergebnis
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-mutationrecord-nextsibling② |
Browser-Kompatibilität
Loading…