Node.lastChild — Eigenschaft · JavaScript-Referenz

Signatur

get Node.lastChild

Beschreibung

Node.lastChild gibt den letzten direkten Kindknoten eines Knotens zurück. Hat der Knoten keine Kinder, ist der Wert null. Die Eigenschaft kann nur gelesen werden. Wer Kinder ändern will, nutzt Methoden wie appendChild(), removeChild() oder replaceChild().

Wichtig: lastChild berücksichtigt alle Knotentypen, also auch Textknoten (etwa Leerzeichen und Zeilenumbrüche aus dem HTML-Quelltext) und Kommentarknoten. Suchst du gezielt das letzte Element, ist Element.lastElementChild meist die bessere Wahl.

Typische Einsatzfälle sind das Durchlaufen des DOM-Baums von hinten nach vorne (zusammen mit previousSibling), das Leeren eines Containers in einer Schleife oder das Prüfen, ob ein Knoten überhaupt Kinder hat. Der Wert ist live: Er gibt immer den aktuellen Zustand des DOM wieder.

Rückgabewert

Typ

Node | null

Beschreibung

Der letzte Kindknoten (Element, Text, Comment usw.) oder null, wenn keine Kinder vorhanden sind.

Beispiele

Textknoten durch Leerraum im HTML

// HTML: <ul id="liste">
//   <li>Eins</li>
//   <li>Zwei</li>
// </ul>
const liste = document.getElementById('liste');

console.log(liste.lastChild.nodeName);        // Zeilenumbruch nach </li>
console.log(liste.lastElementChild.textContent); // letztes <li>

#text Zwei

Container von hinten leeren

const container = document.querySelector('#ergebnisse');

// Entfernt alle Kinder, auch Text- und Kommentarknoten
while (container.lastChild) {
  container.removeChild(container.lastChild);
}

console.log(container.lastChild);

null

Kinder rückwärts durchlaufen

const absatz = document.createElement('p');
absatz.append('Hallo ', Object.assign(document.createElement('strong'), { textContent: 'Welt' }), '!');

for (let node = absatz.lastChild; node; node = node.previousSibling) {
  console.log(node.nodeType, node.textContent);
}

3 ! 1 Welt 3 Hallo

Letztes Element sicher auslesen

const getLetztesElement = (parent) => {
  let node = parent.lastChild;
  // Text- und Kommentarknoten überspringen
  while (node && node.nodeType !== Node.ELEMENT_NODE) {
    node = node.previousSibling;
  }
  return node;
};

console.log(getLetztesElement(document.body)?.tagName);

SCRIPT

// Wichtig · Fallstricke

Häufiger Fallstrick: Leerraum zwischen Tags erzeugt Textknoten. lastChild ist deshalb oft ein #text-Knoten und nicht das erwartete Element. Verwende lastElementChild, wenn du nur Elemente brauchst.
Schreibgeschützt: Eine Zuweisung wie node.lastChild = x wird ohne Fehlermeldung ignoriert (im Strict Mode gibt es einen TypeError). Zum Anhängen nutzt du appendChild() oder append().
Bei Knoten ohne Kinder (z. B. Text-Knoten oder leere Elemente) ist das Ergebnis null. Prüfe darauf oder nutze optionale Verkettung (?.).
Bei <template>-Elementen liegen die Kinder in template.content. Also template.content.lastChild verwenden, nicht template.lastChild.
Zum Leeren eines Elements ist element.replaceChildren() kürzer und oft schneller als eine lastChild-Schleife.
Kompatibilität: Wird von allen Browsern seit DOM Level 1 unterstützt, auch vom alten Internet Explorer.

Siehe auch

Node.firstChild Element.lastElementChild Node.previousSibling Node.childNodes Node.hasChildNodes() Node.appendChild() Node.removeChild()