Document.lastElementChild — Eigenschaft · JavaScript-Referenz

Signatur

get Document.lastElementChild

Beschreibung

document.lastElementChild gibt das letzte Element zurück, das ein direktes Kind des Document-Knotens ist. Textknoten, Kommentare, Verarbeitungsanweisungen und der Doctype (DocumentType) werden dabei übersprungen. Anders als bei lastChild muss man also nicht selbst nach Knotentypen filtern.

Ein Dokument darf nach der DOM-Spezifikation höchstens ein Element als direktes Kind haben, das sogenannte Dokumentelement. In einem normalen HTML-Dokument ist document.lastElementChild deshalb dasselbe Element wie document.firstElementChild und document.documentElement, nämlich das <html>-Element.

Wirklich nützlich ist die Eigenschaft vor allem bei generischem Code, der mit beliebigen ParentNode-Objekten arbeitet (Document, DocumentFragment, Element), und bei Dokumenten, die per DOMParser oder document.implementation.createDocument() erzeugt wurden. Solche Dokumente können auch leer sein, und dann ist der Wert null.

Die Eigenschaft ist schreibgeschützt. Um das Dokumentelement zu ersetzen, verwendet man zum Beispiel document.replaceChild() oder document.replaceChildren().

Rückgabewert

Typ

Element | null

Beschreibung

Das letzte Kind-Element des Dokuments (in der Praxis das Dokumentelement, z. B. <html>) oder null, wenn das Dokument kein Element als Kind hat.

Beispiele

Dokumentelement einer HTML-Seite ermitteln

// In einer normalen HTML-Seite
const root = document.lastElementChild;
console.log(root.tagName);
console.log(root === document.documentElement);
console.log(root === document.firstElementChild);

HTML true true

Unterschied zu lastChild bei einem geparsten XML-Dokument

const xml = `<?xml version="1.0"?>
<config><debug>true</debug></config>
<!-- Ende der Konfiguration -->`;

const doc = new DOMParser().parseFromString(xml, 'application/xml');

// lastChild liefert den abschließenden Kommentar
console.log(doc.lastChild.nodeType === Node.COMMENT_NODE);
// lastElementChild überspringt ihn und liefert das Wurzelelement
console.log(doc.lastElementChild.nodeName);

true config

Leeres Dokument sicher behandeln

const doc = document.implementation.createDocument(null, null, null);
console.log(doc.lastElementChild); // noch kein Element vorhanden

doc.appendChild(doc.createElement('daten'));
console.log(doc.lastElementChild?.nodeName ?? 'kein Element');

null daten

Generische Hilfsfunktion für alle ParentNode-Typen

// Funktioniert für Document, DocumentFragment und Element
const lastTag = (parent) => parent.lastElementChild?.tagName.toLowerCase() ?? null;

const frag = document.createDocumentFragment();
frag.append('Text', document.createElement('span'), document.createElement('em'));

console.log(lastTag(document));
console.log(lastTag(frag));
console.log(lastTag(document.createElement('div')));

html em null

// Wichtig · Fallstricke

Kaum ein Unterschied zu firstElementChild: Ein Dokument hat höchstens ein Kind-Element. Wer das Wurzelelement braucht, sollte zur besseren Lesbarkeit document.documentElement verwenden.
Nicht verwechseln mit lastChild: lastChild kann einen Kommentar- oder Textknoten liefern, etwa einen Kommentar nach dem Ende von </html>. lastElementChild liefert immer nur Elemente.
Kann null sein: Das gilt vor allem für programmatisch erzeugte oder leere Dokumente. Hier hilft Optional Chaining (?.).
Schreibgeschützt: Eine Zuweisung wird im Sloppy Mode stillschweigend ignoriert und löst im Strict Mode einen TypeError aus.
Kompatibilität: Auf Document und DocumentFragment wird die Eigenschaft von allen modernen Browsern unterstützt. Der Internet Explorer unterstützte sie nur auf Element, nicht auf Document.

Siehe auch

Document.children DOMParser Document.firstElementChild Document.rootElement Document.childElementCount