Element.previousElementSibling — Eigenschaft · JavaScript-Referenz

Signatur

get Element.previousElementSibling

Beschreibung

Die schreibgeschützte Eigenschaft previousElementSibling liefert das vorherige Geschwister-Element, also das Element, das in der children-Liste des Elternknotens direkt vor dem aktuellen Element steht. Ist das Element das erste Kind-Element seines Elternknotens, ist der Wert null.

Anders als Node.previousSibling berücksichtigt die Eigenschaft nur Element-Knoten. Leerraum-Textknoten (Zeilenumbrüche und Einrückungen im HTML), Kommentare und Verarbeitungsanweisungen werden übersprungen. Deshalb ist sie in fast allen Fällen die bessere Wahl, wenn man sich durch Markup bewegt, zum Beispiel bei Tastatursteuerung in Listen, Tabs oder Menüs oder wenn Listeneinträge umsortiert werden sollen.

Die Eigenschaft gehört zum Mixin NonDocumentTypeChildNode und steht deshalb auch auf CharacterData-Knoten wie Text und Comment zur Verfügung. Sie ist eine reine Leseeigenschaft: Das DOM verändert man mit Methoden wie before(), after() oder insertBefore().

Rückgabewert

Typ

Element | null

Beschreibung

Das vorherige Geschwister-Element oder null, wenn es keines gibt (erstes Kind-Element oder kein Elternknoten).

Beispiele

Vorheriges Element statt Leerraum-Textknoten

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

console.log(birne.previousSibling.nodeName);        // Leerraum-Textknoten
console.log(birne.previousElementSibling.id);       // echtes Element
console.log(document.getElementById('a').previousElementSibling);

#text a null

Pfeiltaste-hoch-Navigation in einer Liste

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

list.addEventListener('keydown', (event) => {
  if (event.key !== 'ArrowUp') return;
  const current = document.activeElement;
  // Zum vorherigen Eintrag springen, am Anfang zum letzten Eintrag wechseln
  const target = current.previousElementSibling ?? list.lastElementChild;
  target?.focus();
  event.preventDefault();
});

Listeneintrag eine Position nach oben schieben

const moveUp = (item) => {
  const prev = item.previousElementSibling;
  if (!prev) return false; // steht schon ganz oben
  prev.before(item);
  return true;
};

document.querySelectorAll('.btn-up').forEach((btn) => {
  btn.addEventListener('click', () => moveUp(btn.closest('li')));
});

Alle vorherigen Geschwister-Elemente sammeln

const previousSiblings = (el) => {
  const result = [];
  let node = el.previousElementSibling;
  while (node) {
    result.unshift(node);
    node = node.previousElementSibling;
  }
  return result;
};

const third = document.querySelector('li:nth-child(3)');
console.log(previousSiblings(third).map((li) => li.textContent));

["Eintrag 1", "Eintrag 2"]

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.previousElementSibling = x ist ohne Wirkung und löst im Strict Mode einen TypeError aus. Zum Verschieben before(), after() oder insertBefore() verwenden.
Immer auf null prüfen: Beim ersten Kind-Element und bei Elementen ohne Elternknoten ist der Wert null. Sicherer Zugriff mit optionaler Verkettung: el.previousElementSibling?.classList.
Nicht mit previousSibling verwechseln: previousSibling liefert jeden Knoten, also auch Leerraum-Textknoten. Das ist eine häufige Fehlerquelle.
Die Eigenschaft beachtet keine Sichtbarkeit (hidden, display: none) und keine CSS-Reihenfolge (order, flex-direction: row-reverse). Sie folgt nur der Reihenfolge im DOM.
Shadow DOM: Die Eigenschaft bleibt innerhalb desselben Baums. Elemente in Slots werden über den Light-DOM-Baum aufgelöst, nicht über die dargestellte Anordnung.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer 9–11 kennt die Eigenschaft nur auf Elementen, nicht auf Text- oder Comment-Knoten.

Siehe auch

Element.nextElementSibling Node.previousSibling Element.firstElementChild Element.lastElementChild Element.children Element.before() Element.closest()