DocumentFragment.lastElementChild — Eigenschaft · JavaScript-Referenz

Signatur

DocumentFragment.lastElementChild

Beschreibung

Die schreibgeschützte Eigenschaft lastElementChild liefert das letzte direkte Kind eines DocumentFragment, das ein Element ist. Text-, Kommentar- und andere Nicht-Element-Knoten werden übersprungen. Das ist der Unterschied zu lastChild, das jeden Knotentyp zurückgibt, also auch Leerraum-Textknoten.

Gebraucht wird die Eigenschaft vor allem, wenn DOM-Strukturen abseits des sichtbaren Dokuments aufgebaut oder geprüft werden. Typische Fälle sind der Inhalt eines <template>-Elements (template.content), ein mit Range.createContextualFragment() geparstes HTML-Stück oder ein Fragment, das man für das gebündelte Einfügen vieler Knoten vorbereitet.

Die Eigenschaft stammt aus dem Mixin ParentNode. Sie steht deshalb genauso auf Element und Document zur Verfügung. Nur direkte Kinder werden betrachtet, tiefer verschachtelte Nachfahren nicht.

Rückgabewert

Typ

Element | null

Beschreibung

Das letzte direkte Kindelement des Fragments oder null, wenn das Fragment keine Element-Kinder enthält.

Beispiele

Letztes Element eines Fragments ermitteln

const fragment = new DocumentFragment();

['Äpfel', 'Birnen', 'Kirschen'].forEach((obst) => {
  const li = document.createElement('li');
  li.textContent = obst;
  fragment.append(li);
});

// Ein abschließender Textknoten wird ignoriert
fragment.append('\n');

console.log(fragment.lastElementChild.textContent);
console.log(fragment.lastChild.nodeType); // 3 = Textknoten

Kirschen 3

Template-Inhalt prüfen und anpassen

// <template id="card">
//   <h2>Titel</h2>
//   <p>Text</p>
//   <footer>Fußzeile</footer>
// </template>
const template = document.querySelector('#card');
const clone = template.content.cloneNode(true);

const last = clone.lastElementChild;
if (last?.tagName === 'FOOTER') {
  last.textContent = `Stand: ${new Date().getFullYear()}`;
}

document.body.append(clone);
console.log(last.tagName);

FOOTER

Leeres Fragment und Fragment nur mit Text

const leer = new DocumentFragment();
console.log(leer.lastElementChild);

const nurText = document.createRange().createContextualFragment('Nur Text <!-- Kommentar -->');
console.log(nurText.lastElementChild);
console.log(nurText.childNodes.length);

null null 2

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie fragment.lastElementChild = el hat keine Wirkung und wirft im Strict Mode einen TypeError. Neue Elemente fügt man mit append() oder appendChild() hinzu.
Das Fragment leert sich beim Einfügen: Wird ein Fragment mit append() oder appendChild() ins Dokument eingefügt, wandern seine Kinder mit. Danach gibt lastElementChild null zurück. Eine Referenz auf das Element sollte man sich daher vor dem Einfügen merken.
Nicht mit lastChild verwechseln: Wegen der Leerzeichen und Zeilenumbrüche in HTML-Templates ist lastChild oft ein Textknoten. lastElementChild liefert dagegen verlässlich ein Element.
Nur direkte Kinder: Verschachtelte Nachfahren werden nicht betrachtet. Für eine tiefere Suche eignet sich querySelectorAll() in Verbindung mit .at(-1) auf dem umgewandelten Array.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der alte Internet Explorer bot die Eigenschaft auf DocumentFragment nicht an.

Siehe auch

DocumentFragment.firstElementChild DocumentFragment.childElementCount DocumentFragment.children Document.lastElementChild Document.firstElementChild