Element.lastElementChild — Eigenschaft · JavaScript-Referenz

Signatur

get Element.lastElementChild

Beschreibung

Element.lastElementChild gibt das letzte direkte Kind eines Knotens zurück, das ein Element ist. Text-, Kommentar- und Verarbeitungsknoten werden dabei übersprungen. Damit unterscheidet sich die Eigenschaft von lastChild: Diese liefert oft einen Textknoten, der nur aus dem Zeilenumbruch und den Leerzeichen im HTML-Quelltext besteht.

Die Eigenschaft ist nützlich, wenn man z. B. den letzten Eintrag einer Liste hervorheben, die jüngste Chat-Nachricht in den sichtbaren Bereich scrollen oder vor dem Anhängen prüfen will, ob ein Container schon Inhalte hat. Hat das Element keine Kind-Elemente, ist der Wert null.

Die Eigenschaft gehört zum Mixin ParentNode. Sie steht deshalb nicht nur auf Element zur Verfügung, sondern auch auf Document und DocumentFragment. Der Wert ist live, er spiegelt bei jedem Zugriff also den aktuellen Stand des DOM wider. Die Eigenschaft ist schreibgeschützt: Wenn du ihr etwas zuweist, bleibt das ohne Wirkung und im Strict Mode wird ein Fehler geworfen.

Rückgabewert

Typ

Element | null

Beschreibung

Das letzte direkte Kind-Element oder null, wenn das Element keine Kind-Elemente hat.

Beispiele

Unterschied zu lastChild

// <ul id="liste">
//   <li>Äpfel</li>
//   <li>Birnen</li>
// </ul>
const liste = document.querySelector('#liste');

console.log(liste.lastChild.nodeName);        // Textknoten (Zeilenumbruch)
console.log(liste.lastElementChild.nodeName); // echtes Element
console.log(liste.lastElementChild.textContent);

#text LI Birnen

Neueste Chat-Nachricht in den sichtbaren Bereich scrollen

const chat = document.querySelector('#chat');

const nachrichtHinzufuegen = (text) => {
  const p = document.createElement('p');
  p.textContent = text;
  chat.append(p);
  // Optional Chaining schützt vor null bei leerem Container
  chat.lastElementChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
};

nachrichtHinzufuegen('Hallo zusammen!');

Leeren Container erkennen und letztes Element entfernen

const container = document.createElement('div');
console.log(container.lastElementChild); // noch keine Kinder

container.innerHTML = '<span>A</span><span>B</span>';
container.append('Nur Text'); // Textknoten wird ignoriert

console.log(container.lastElementChild.textContent);

// Letztes Element entfernen – der Wert ist live
container.lastElementChild.remove();
console.log(container.lastElementChild.textContent);

null B A

Alle Kind-Elemente rückwärts durchlaufen

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

for (let el = menue.lastElementChild; el; el = el.previousElementSibling) {
  console.log(el.textContent.trim());
}

// Wichtig · Fallstricke

Häufige Verwechslung: lastChild berücksichtigt alle Knotentypen und liefert wegen der Leerzeichen im HTML-Quelltext oft einen Textknoten. Wenn du ein Element brauchst, nimm lastElementChild.
null prüfen: Bei leeren Elementen ist der Wert null. Ein Zugriff wie el.lastElementChild.textContent wirft dann einen TypeError. Nutze Optional Chaining (?.) oder eine vorherige Prüfung.
Nur direkte Kinder: Tiefer verschachtelte Nachfahren werden nicht berücksichtigt. Für eine Suche in der Tiefe verwende z. B. querySelector(':scope > li:last-child') oder durchlaufe die Nachfahren selbst.
Shadow DOM und <template>: Der Inhalt eines <template> liegt in template.content (einem DocumentFragment). template.lastElementChild ist deshalb in der Regel null.
Kompatibilität: Wird von allen modernen Browsern unterstützt, im Internet Explorer ab Version 9. Auf Document und DocumentFragment ist die Eigenschaft erst in neueren Engines verfügbar. Der Internet Explorer unterstützt sie dort nicht.

Siehe auch

Element.children Element.append() Element.customElementRegistry Element.firstElementChild Element.childElementCount