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 July 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

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>

.log {
  border: 1px dotted black;
  padding: 0.5rem;
}

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