MutationRecord: nextSibling-Eigenschaft
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 Standard # ref-for-dom-mutationrecord-nextsibling② |
Browser-Kompatibilität
BCD tables only load in the browser