Element.nextElementSibling — Eigenschaft · JavaScript-Referenz

Signatur

get Element.nextElementSibling

Beschreibung

Die schreibgeschützte Eigenschaft nextElementSibling gibt das Element zurück, das in der children-Liste des Elternknotens direkt auf das aktuelle Element folgt. Ist das aktuelle Element das letzte Kind-Element, ist der Wert null.

Anders als Node.nextSibling berücksichtigt nextElementSibling ausschließlich Element-Knoten. Leerzeichen, Zeilenumbrüche (Textknoten) und Kommentare zwischen den Tags werden übersprungen. Das macht die Eigenschaft zur bevorzugten Wahl, wenn man durch formatiertes HTML navigiert, etwa in Listen, Tabellenzeilen oder Akkordeon-Komponenten.

Typische Einsatzfälle sind Tastaturnavigation (Pfeil nach unten zum nächsten Eintrag), das Ein- und Ausklappen eines direkt folgenden Inhaltsblocks oder das Durchlaufen aller nachfolgenden Geschwister in einer Schleife. Die Eigenschaft ist auch über das Mixin NonDocumentTypeChildNode auf CharacterData-Knoten (z. B. Textknoten) verfügbar.

Rückgabewert

Typ

Element | null

Beschreibung

Das unmittelbar folgende Geschwister-Element oder null, wenn kein weiteres Element folgt.

Beispiele

Unterschied zu nextSibling

// 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);       // nächstes <li>
console.log(document.getElementById('b').nextElementSibling);

#text b null

Akkordeon: folgenden Inhaltsblock umschalten

// HTML:
// <button class="toggle">Details</button>
// <div class="panel" hidden>Inhalt …</div>
document.querySelectorAll('.toggle').forEach((btn) => {
  btn.addEventListener('click', () => {
    const panel = btn.nextElementSibling;
    if (panel?.classList.contains('panel')) {
      panel.hidden = !panel.hidden;
      btn.setAttribute('aria-expanded', String(!panel.hidden));
    }
  });
});

Alle nachfolgenden Geschwister durchlaufen

const getFollowingSiblings = (el) => {
  const result = [];
  let next = el.nextElementSibling;
  while (next) {
    result.push(next);
    next = next.nextElementSibling;
  }
  return result;
};

const start = document.querySelector('#liste li');
console.log(getFollowingSiblings(start).map((li) => li.textContent));

["Zwei"]

Tastaturnavigation mit Pfeiltaste

const menu = document.querySelector('[role="menu"]');

menu.addEventListener('keydown', (event) => {
  if (event.key !== 'ArrowDown') return;
  event.preventDefault();
  // Zum nächsten Eintrag springen, am Ende wieder zum ersten
  const next = document.activeElement.nextElementSibling ?? menu.firstElementChild;
  next.focus();
});

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung (el.nextElementSibling = x) wird ignoriert bzw. wirft im Strict Mode einen TypeError. Zum Einfügen el.after() oder insertAdjacentElement('afterend', …) verwenden.
Immer auf null prüfen: Beim letzten Element ist der Wert null; direkter Zugriff wie el.nextElementSibling.textContent führt dann zu einem Fehler. Optional Chaining (?.) hilft.
Nur Geschwister auf derselben Ebene werden betrachtet – Kinder oder Elemente anderer Eltern nie. Für Suchen mit Selektor gibt es keine eingebaute Variante; ggf. in einer Schleife mit matches() prüfen.
Die Eigenschaft ist live: Sie spiegelt immer den aktuellen DOM-Zustand wider. Beim Entfernen von Elementen in einer Schleife das nächste Element vorher zwischenspeichern.
Kompatibilität: In allen modernen Browsern verfügbar; ältere Internet-Explorer-Versionen (vor IE 9) kannten sie nicht. Auf Textknoten (CharacterData) funktioniert sie in modernen Browsern ebenfalls.

Siehe auch

Element.previousElementSibling Node.nextSibling Element.children Element.firstElementChild Element.lastElementChild Element.after() Element.elementTiming