Node.nextSibling — Eigenschaft · JavaScript-Referenz

Signatur

get Node.prototype.nextSibling

Beschreibung

Die schreibgeschützte Eigenschaft nextSibling gibt den unmittelbar folgenden Geschwisterknoten zurück. Gemeint sind alle Knotentypen: Elemente, aber auch Textknoten (etwa Leerzeichen und Zeilenumbrüche aus dem HTML-Quelltext), Kommentare und Verarbeitungsanweisungen.

Ist der Knoten das letzte Kind seines Elternknotens oder hat er gar keinen Elternknoten (z. B. ein frisch erzeugtes, noch nicht eingefügtes Element), ist der Wert null.

Brauchbar ist nextSibling vor allem dann, wenn man den DOM-Baum Knoten für Knoten durchlaufen oder gezielt Text- und Kommentarknoten verarbeiten will. Ein typisches Muster ist parent.insertBefore(neu, ref.nextSibling), um einen Knoten hinter einem Referenzknoten einzufügen. Das klappt auch dann, wenn nextSibling null ist, weil insertBefore den Knoten in diesem Fall ans Ende anhängt.

Wenn nur Elemente interessieren, ist Element.nextElementSibling meist die bessere Wahl, weil diese Eigenschaft Text- und Kommentarknoten überspringt.

Rückgabewert

Typ

Node | null

Beschreibung

Den nächsten Geschwisterknoten (Element, Text, Comment …) oder null, wenn kein weiterer Knoten folgt.

Beispiele

Leerraum-Textknoten als Stolperfalle

// HTML:
// <ul id="liste">
//   <li id="a">Eins</li>
//   <li id="b">Zwei</li>
// </ul>
const a = document.getElementById('a');

console.log(a.nextSibling.nodeName);        // Textknoten (Zeilenumbruch)
console.log(a.nextElementSibling.id);        // direkt das nächste <li>
console.log(a.nextSibling.nextSibling.id);   // Umweg über nextSibling

#text b b

Alle Geschwister durchlaufen und nach Typ filtern

const liste = document.getElementById('liste');

for (let node = liste.firstChild; node !== null; node = node.nextSibling) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    console.log('Element:', node.textContent);
  } else if (node.nodeType === Node.COMMENT_NODE) {
    console.log('Kommentar:', node.data);
  }
}

Element: Eins Element: Zwei

Knoten hinter einem Referenzknoten einfügen

const insertAfter = (newNode, refNode) => {
  // Ist nextSibling null, hängt insertBefore ans Ende an
  refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
};

const hinweis = document.createElement('p');
hinweis.textContent = 'Neu eingefügt';
insertAfter(hinweis, document.querySelector('h1'));

// Moderne Alternative:
// document.querySelector('h1').after(hinweis);

Knoten ohne Elternknoten

const div = document.createElement('div');
console.log(div.nextSibling);

const letztes = document.body.lastChild;
console.log(letztes.nextSibling);

null null

// Wichtig · Fallstricke

Leerraum-Textknoten: Einrückungen und Zeilenumbrüche im HTML-Quelltext erzeugen Textknoten. nextSibling liefert deshalb oft einen #text-Knoten statt des erwarteten Elements. Für reine Element-Navigation nextElementSibling verwenden.
Schreibgeschützt: Eine Zuweisung wie node.nextSibling = x wird ignoriert und wirft im Strict Mode einen TypeError. Um die Reihenfolge zu ändern, nimmt man insertBefore(), after() oder before().
Live-Wert: Die Eigenschaft spiegelt immer den aktuellen Zustand des DOM wider. Wenn du beim Durchlaufen Knoten entfernst, speichere nextSibling vorher in einer Variablen, sonst bricht die Schleife ab.
Attr-Knoten haben keine Geschwister; bei ihnen ist nextSibling immer null.
Kompatibilität: Wird seit DOM Level 1 von allen Browsern unterstützt, außerdem von DOM-Implementierungen wie jsdom. In Node.js gibt es die Eigenschaft ohne solche Bibliotheken nicht.

Siehe auch

Node.previousSibling Element.nextElementSibling Node.firstChild Node.childNodes Node.parentNode Node.insertBefore() Element.after()