CSSPseudoElement.element — Eigenschaft · JavaScript-Referenz

Signatur

CSSPseudoElement.element

Beschreibung

Die schreibgeschützte Eigenschaft element des Interfaces CSSPseudoElement gibt eine Referenz auf das letztendliche Ursprungselement (englisch ultimate originating element) eines Pseudo-Elements zurück. Das ist immer ein echtes DOM-Element, also z. B. das <p>, zu dem ein ::before gehört.

Wichtig wird der Unterschied bei verschachtelten Pseudo-Elementen wie ::before::marker. Hier ist das direkte Ursprungsobjekt des ::marker selbst ein Pseudo-Element (::before). Dieses direkte Elternobjekt liefert die Eigenschaft parent. element dagegen geht die ganze Kette hinauf und gibt immer das echte Element zurück.

Ein CSSPseudoElement-Objekt bekommt man über Element.prototype.pseudo(type). Brauchbar ist die Eigenschaft vor allem in generischem Code, der Pseudo-Elemente als Ziel von Ereignissen oder Animationen bekommt und daraus auf das zugehörige DOM-Element schließen muss, z. B. um Attribute zu lesen, Klassen zu setzen oder getComputedStyle() aufzurufen.

Rückgabewert

Typ

Element

Beschreibung

Das echte DOM-Element, von dem das Pseudo-Element letztlich stammt. Der Wert ist nie null und nie ein CSSPseudoElement.

Beispiele

Ursprungselement eines ::before ermitteln (mit Funktionserkennung)

const absatz = document.querySelector('p');

if (typeof absatz.pseudo === 'function') {
  const before = absatz.pseudo('::before');
  console.log(before.type);               // '::before'
  console.log(before.element === absatz); // true
} else {
  console.log('CSSPseudoElement wird von diesem Browser nicht unterstützt.');
}

::before true (oder in den meisten Browsern: CSSPseudoElement wird von diesem Browser nicht unterstützt.)

element und parent bei verschachtelten Pseudo-Elementen

// CSS: li::before { content: '•'; display: list-item; }
const eintrag = document.querySelector('li');

const before = eintrag.pseudo?.('::before');
const marker = before?.pseudo?.('::marker');

if (marker) {
  console.log(marker.parent === before);   // true  – direktes Ursprungsobjekt
  console.log(marker.element === eintrag); // true  – letztendliches Element
}

true true

Hilfsfunktion: Aus beliebigem Ziel das echte Element machen

// Liefert für Element oder CSSPseudoElement immer ein DOM-Element
const toElement = (target) =>
  typeof CSSPseudoElement !== 'undefined' && target instanceof CSSPseudoElement
    ? target.element
    : target;

const button = document.querySelector('button');
const ziel = button.pseudo?.('::after') ?? button;

const el = toElement(ziel);
el.classList.add('hervorgehoben');
console.log(el.tagName);

BUTTON

// Wichtig · Fallstricke

Experimentell: CSSPseudoElement und Element.pseudo() sind in keinem großen Browser standardmäßig aktiviert. Firefox hatte zeitweise eine Implementierung hinter einem Flag. Für Produktionscode ist eine Funktionserkennung (typeof el.pseudo === 'function') Pflicht.
element und parent nicht verwechseln: Bei verschachtelten Pseudo-Elementen kann parent ein CSSPseudoElement sein. element ist dagegen immer ein Element.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus.
Für Animationen von Pseudo-Elementen gibt es bereits heute eine breit unterstützte Alternative: die Option pseudoElement bei Element.animate() bzw. KeyframeEffect. Um berechnete Stile zu lesen, eignet sich getComputedStyle(el, '::before').

Siehe auch

Element.prototype.pseudo() CSSPseudoElement.parent CSSPseudoElement.type HTMLFormElement.elements HTMLFieldSetElement.elements