CharacterData.nextElementSibling — Eigenschaft · JavaScript-Referenz

Signatur

get CharacterData.prototype.nextElementSibling

Beschreibung

Die schreibgeschützte Eigenschaft nextElementSibling ist auf allen Knoten verfügbar, die von CharacterData erben, also auf Text, Comment, CDATASection und ProcessingInstruction. Sie gibt das erste Element zurück, das dem Knoten in der Kindliste seines Elternknotens folgt. Text- und Kommentarknoten dazwischen werden übersprungen.

Anders als nextSibling, das jeden beliebigen Knotentyp liefert (oft einen Whitespace-Textknoten aus dem HTML-Quelltext), bekommst du hier direkt das nächste HTML- bzw. XML-Element. Das ist vor allem dann nützlich, wenn du von einem Textknoten oder Kommentar aus auf das folgende Element zugreifen willst, z. B. bei Kommentar-Markierungen im Markup, Template-Platzhaltern oder beim Durchlaufen von Textknoten mit einem TreeWalker.

Gibt es kein folgendes Element-Geschwister oder hat der Knoten keinen Elternknoten, ist der Wert null. Die Eigenschaft ist „live“: Sie spiegelt immer den aktuellen Zustand des DOM wider.

Rückgabewert

Typ

Element | null

Beschreibung

Das nächste Geschwister-Element in Dokumentreihenfolge oder null, wenn keines existiert.

Beispiele

Vom Textknoten zum nächsten Element springen

const p = document.createElement('p');
p.innerHTML = 'Hallo <strong>Welt</strong> und <em>mehr</em>';

const text = p.firstChild; // Textknoten "Hallo "
console.log(text.nodeType === Node.TEXT_NODE);
console.log(text.nextSibling.nodeName);        // direkt nachfolgender Knoten
console.log(text.nextElementSibling.tagName);  // nächstes Element

true STRONG STRONG

Whitespace-Textknoten überspringen – Unterschied zu nextSibling

const ul = document.createElement('ul');
ul.innerHTML = `
  <li>Eins</li>
  <li>Zwei</li>
`;

const ersterText = ul.firstChild; // Zeilenumbruch + Leerzeichen
console.log(JSON.stringify(ersterText.data));
console.log(ersterText.nextSibling.textContent);
console.log(ersterText.nextElementSibling.textContent);

"\n " Eins Eins

Kommentar-Marker als Anker für das folgende Element

const container = document.createElement('div');
container.innerHTML = '<!-- slot:header --> <h2>Titel</h2><p>Text</p>';

const findeNachMarker = (root, name) => {
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
  while (walker.nextNode()) {
    const kommentar = walker.currentNode;
    if (kommentar.data.trim() === `slot:${name}`) {
      return kommentar.nextElementSibling;
    }
  }
  return null;
};

console.log(findeNachMarker(container, 'header')?.outerHTML);
console.log(findeNachMarker(container, 'footer'));

<h2>Titel</h2> null

null am Ende der Kindliste oder ohne Elternknoten

const div = document.createElement('div');
div.innerHTML = '<span>A</span>Ende';
console.log(div.lastChild.nextElementSibling);

const losgeloest = document.createTextNode('frei');
console.log(losgeloest.nextElementSibling);

null null

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie text.nextElementSibling = el wird ignoriert (im Strict Mode kein Fehler, da nur Getter auf dem Prototyp – der Wert ändert sich einfach nicht). Zum Einfügen after(), before() oder insertBefore() verwenden.
Nicht auf allen Knoten: Document, DocumentFragment und Attr besitzen die Eigenschaft nicht; DocumentType ebenfalls nicht (nur Element und CharacterData implementieren sie).
Kein Gegenstück „previous…“-Fehler: Für die Gegenrichtung gibt es previousElementSibling.
Kompatibilität: In allen modernen Browsern unterstützt. Sehr alte Browser (Internet Explorer bis Version 11, ältere Safari-Versionen) kannten die Eigenschaft nur auf Element, nicht auf Text- oder Kommentarknoten – dort liefert sie undefined. Falls das relevant ist, per Schleife über nextSibling mit Prüfung auf nodeType === 1 nachbilden.
Die Eigenschaft ist live und kostet praktisch nichts; für viele Aufrufe auf großen Bäumen ist aber ein TreeWalker mit SHOW_ELEMENT oft übersichtlicher.

Siehe auch

CharacterData.previousElementSibling Node.nextSibling Element.nextElementSibling CharacterData.after() CharacterData TreeWalker