Node.previousSibling — Eigenschaft · JavaScript-Referenz

Signatur

get Node.prototype.previousSibling

Beschreibung

Die schreibgeschützte Eigenschaft previousSibling liefert den direkt vorangehenden Geschwisterknoten, also den Knoten mit demselben Elternknoten, der in parentNode.childNodes genau eine Position weiter vorne steht. Ist der Knoten das erste Kind oder hat er keinen Elternknoten, ist der Wert null.

Wichtig: previousSibling berücksichtigt alle Knotentypen, nicht nur Elemente. Dazu gehören auch Textknoten (etwa Leerzeichen und Zeilenumbrüche zwischen Tags im HTML-Quelltext) und Kommentarknoten. Deshalb bekommt man oft einen #text-Knoten statt des erwarteten Elements zurück.

Wenn du nur Elemente brauchst, nimm Element.previousElementSibling. previousSibling ist dann sinnvoll, wenn du bewusst mit Text- oder Kommentarknoten arbeitest, z. B. beim Parsen und Umbauen von Inhalten, beim Durchlaufen des DOM-Baums auf niedriger Ebene oder beim Suchen von Kommentar-Markierungen.

Zusammen mit nextSibling, firstChild, lastChild und parentNode bildet die Eigenschaft die grundlegende Navigation durch den DOM-Baum.

Rückgabewert

Typ

Node | null

Beschreibung

Der unmittelbar vorangehende Geschwisterknoten (Element, Text, Comment …) oder null, wenn keiner existiert.

Beispiele

Textknoten durch Leerraum im HTML

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

console.log(b.previousSibling.nodeName);        // Zeilenumbruch + Einrückung
console.log(b.previousElementSibling.id);       // das eigentliche Element

#text a

Vorheriges Element überspringend finden

// Geht rückwärts, bis ein Element gefunden ist (Alternative zu previousElementSibling)
const previousElement = (node) => {
  let current = node.previousSibling;
  while (current && current.nodeType !== Node.ELEMENT_NODE) {
    current = current.previousSibling;
  }
  return current;
};

const item = document.querySelector('#b');
console.log(previousElement(item)?.textContent ?? 'kein Vorgänger');

Eins

Alle vorangehenden Geschwister rückwärts durchlaufen

const list = document.createElement('div');
list.innerHTML = 'Text<!-- Markierung --><span>A</span><span>B</span>';

let node = list.lastChild;
while (node) {
  console.log(node.nodeType, node.nodeName);
  node = node.previousSibling;
}

1 SPAN 1 SPAN 8 #comment 3 #text

Erstes Kind hat keinen Vorgänger

const p = document.createElement('p');
p.append('Hallo', document.createElement('br'));

console.log(p.firstChild.previousSibling);
console.log(p.lastChild.previousSibling.textContent);
console.log(document.createElement('span').previousSibling);

null Hallo null

// Wichtig · Fallstricke

Häufigster Fallstrick: Leerraum zwischen Tags erzeugt Textknoten. previousSibling liefert deshalb oft einen #text-Knoten. Für reine Element-Navigation nimm previousElementSibling.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert (im Strict Mode ohne Fehler, weil es nur einen Getter gibt). Zum Umsortieren nimm insertBefore(), before() oder after().
Für Knoten ohne Elternknoten, z. B. frisch erzeugte, noch nicht eingefügte Elemente oder document, ist der Wert null.
Bei Attr-Knoten ist der Wert immer null.
Der Wert ist live: Er spiegelt immer den aktuellen Zustand des DOM wider. Wenn du beim Durchlaufen Knoten entfernst, speichere den Vorgänger vorher.
Wird in allen Browsern unterstützt, auch in sehr alten.

Siehe auch

Node.nextSibling Element.previousElementSibling Node.childNodes Node.parentNode Node.firstChild Node.insertBefore() TextEncoderStream.encoding