CSSPseudoElement.parent — Eigenschaft · JavaScript-Referenz

Signatur

CSSPseudoElement.parent

Beschreibung

Die Eigenschaft parent der Schnittstelle CSSPseudoElement liefert den Ursprung eines Pseudo-Elements, also das Objekt, an dem das Pseudo-Element im Rendering-Baum hängt. Bei einfachen Pseudo-Elementen wie ::before oder ::after ist das das zugehörige DOM-Element. Bei verschachtelten Pseudo-Elementen wie ::before::marker ist es dagegen das übergeordnete CSSPseudoElement (hier das Objekt für ::before).

An ein CSSPseudoElement kommt man über Element.prototype.pseudo(), z. B. element.pseudo("::before"). Mit parent gelangt man von dort wieder zurück zum Ursprung. Nützlich ist das vor allem in allgemeinen Hilfsfunktionen oder Event-Handlern, die ein Pseudo-Element bekommen und dessen Kontext brauchen, etwa um das Element zu ermitteln, an dem Stile oder Klassen geändert werden sollen.

Die Eigenschaft kann nur gelesen werden. Weil parent je nach Verschachtelung unterschiedliche Typen liefert, sollte man den Rückgabewert mit instanceof Element bzw. instanceof CSSPseudoElement prüfen, bevor man typspezifische Methoden aufruft.

Rückgabewert

Typ

Element | CSSPseudoElement

Beschreibung

Das Ursprungsobjekt des Pseudo-Elements: ein Element bei einfachen Pseudo-Elementen, ein CSSPseudoElement bei verschachtelten (z. B. ::before::marker).

Beispiele

Vom ::before-Pseudo-Element zurück zum Element

const button = document.querySelector('button.icon');

if (typeof button.pseudo === 'function') {
  const before = button.pseudo('::before');
  console.log(before.type);               // Name des Pseudo-Elements
  console.log(before.parent === button);  // Ursprung ist der Button
} else {
  console.log('Element.pseudo() wird nicht unterstützt');
}

::before true

Verschachteltes Pseudo-Element auswerten

const item = document.querySelector('li');

if (typeof item.pseudo === 'function') {
  const before = item.pseudo('::before');
  const marker = before?.pseudo?.('::marker'); // ::before::marker, falls unterstützt

  if (marker) {
    console.log(marker.parent instanceof CSSPseudoElement); // true
    console.log(marker.parent.parent === item);             // true
  }
}

true true

Hilfsfunktion: das eigentliche DOM-Element ermitteln

// Geht die parent-Kette hoch, bis ein echtes Element erreicht ist
const getOriginatingElement = (target) => {
  let current = target;
  while (typeof CSSPseudoElement !== 'undefined' && current instanceof CSSPseudoElement) {
    current = current.parent;
  }
  return current;
};

const card = document.querySelector('.card');
const pseudo = card.pseudo?.('::after');
if (pseudo) {
  getOriginatingElement(pseudo).classList.add('highlight');
  console.log(card.classList.contains('highlight'));
}

true

// Wichtig · Fallstricke

Experimentell: CSSPseudoElement, Element.prototype.pseudo() und damit parent werden bisher kaum oder nur hinter Flags unterstützt (in Firefox z. B. zeitweise über dom.css_pseudo_element.enabled). Vor der Nutzung immer eine Feature-Erkennung einbauen (typeof el.pseudo === 'function').
Der Rückgabetyp hängt von der Verschachtelung ab. Wer blind parent.classList aufruft, bekommt bei verschachtelten Pseudo-Elementen einen Fehler, weil CSSPseudoElement kein classList hat.
Ältere Entwürfe der Spezifikation kannten nur die Eigenschaft element, die immer das ultimative Ursprungs-Element liefert. parent gibt dagegen nur den direkten Ursprung zurück.
Die Eigenschaft ist nur lesbar. Zuweisungen werden ignoriert und lösen im Strict Mode einen TypeError aus.

Siehe auch

Element.prototype.pseudo() CSSMatrixComponent.matrix CSSPseudoElement.element CSSPseudoElement.type Element.part