MutationRecord: previousSibling-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 previousSibling des MutationRecord ist das vorhergehende Geschwisterknoten eines hinzugefügten oder entfernten Kindknotens des target eines MutationObserver.
Wert
Wenn ein Knoten zum target eines MutationObserver hinzugefügt oder daraus entfernt wird, ist der Wert der Node, die das vorherige Geschwister des hinzugefügten oder entfernten Knotens ist: das heißt, der Knoten, der sich unmittelbar vor diesem im childNodes-Liste des Elternteils befindet.
Der Wert ist null, wenn es keine hinzugefügten oder entfernten Knoten gibt oder wenn der Knoten das erste Kind seines Elternteils ist.
Beispiele
Das vorherige Geschwister einer Mutation protokollieren
Dies fügt jedes Mal, wenn Sie auf den Button klicken, einen Knoten hinzu. Dann protokolliert der Beobachter den textContent des previousSibling des hinzugefügten Knotens.
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>
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 });
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| DOM # ref-for-dom-mutationrecord-previoussibling② |