Element.firstElementChild — Eigenschaft · JavaScript-Referenz

Signatur

get Element.firstElementChild

Beschreibung

Die schreibgeschützte Eigenschaft firstElementChild liefert das erste Kind eines Knotens, das ein Element ist (nodeType === 1). Anders als firstChild überspringt sie Textknoten (auch Leerzeichen und Zeilenumbrüche aus dem HTML-Quelltext) und Kommentare. Deshalb ist sie bei der DOM-Navigation meist die bessere Wahl.

Die Eigenschaft stammt aus dem ParentNode-Mixin. Sie gibt es also nicht nur auf Element, sondern auch auf Document (dort liefert sie document.documentElement) und auf DocumentFragment, zum Beispiel beim Inhalt eines <template>-Elements.

Typische Einsätze: das erste Listenelement hervorheben, den Inhalt eines Templates klonen, Elementbäume ohne querySelector durchlaufen (zusammen mit nextElementSibling) oder prüfen, ob ein Container überhaupt Elemente enthält. Der Wert wird bei jedem Zugriff aktuell ermittelt und spiegelt immer den momentanen DOM-Zustand wider.

Rückgabewert

Typ

Element | null

Beschreibung

Das erste Kindelement oder null, wenn der Knoten keine Kindelemente hat (auch dann, wenn er Text- oder Kommentarknoten enthält).

Beispiele

Unterschied zu firstChild

// HTML: <ul id="liste">
//   <li>Äpfel</li>
//   <li>Birnen</li>
// </ul>
const liste = document.getElementById('liste');

console.log(liste.firstChild.nodeName);        // Textknoten (Zeilenumbruch)
console.log(liste.firstElementChild.nodeName); // erstes <li>
console.log(liste.firstElementChild.textContent);

#text LI Äpfel

Alle Kindelemente mit nextElementSibling durchlaufen

const menue = document.querySelector('nav ul');

for (let el = menue.firstElementChild; el !== null; el = el.nextElementSibling) {
  el.classList.add('menue-eintrag');
}

// Erstes Element zusätzlich als aktiv markieren (null-sicher)
menue.firstElementChild?.classList.add('aktiv');

Template-Inhalt klonen

// HTML: <template id="karte"><article class="karte"><h2></h2></article></template>
const tpl = document.getElementById('karte');

const erzeugeKarte = (titel) => {
  // content ist ein DocumentFragment – auch dort gibt es firstElementChild
  const karte = tpl.content.firstElementChild.cloneNode(true);
  karte.querySelector('h2').textContent = titel;
  return karte;
};

document.body.append(erzeugeKarte('Hallo Welt'));
console.log(document.body.lastElementChild.className);

karte

Prüfen, ob ein Container leer ist

const container = document.createElement('div');
container.append('Nur Text');

console.log(container.firstElementChild);      // kein Element vorhanden
console.log(container.hasChildNodes());        // aber ein Textknoten

container.append(document.createElement('span'));
console.log(container.firstElementChild.tagName);

null true SPAN

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie el.firstElementChild = x wird ignoriert und wirft im Strict Mode einen TypeError. Zum Einfügen nimmt man prepend() oder insertBefore().
Auf null prüfen: Bei leeren Containern ist der Wert null. Ein Zugriff wie el.firstElementChild.textContent wirft dann einen Fehler. Deshalb Optional Chaining (?.) verwenden.
Leerzeichen: Wenn man firstChild und firstElementChild verwechselt, entstehen häufig Fehler, weil Zeilenumbrüche im HTML Textknoten erzeugen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer bis Version 8 kannte die Eigenschaft nicht, und IE 9–11 unterstützten sie nicht auf Document und DocumentFragment.
Für die Suche nach Kriterien ist el.querySelector(':scope > .klasse') flexibler. Für den reinen Positionszugriff ist firstElementChild schneller.

Siehe auch

Element.lastElementChild Element.children Element.nextElementSibling Node.firstChild Element.childElementCount Element.prepend() PaymentRequestEvent.total