TreeWalker.lastChild() — Methode · JavaScript-Referenz

Signatur

TreeWalker.prototype.lastChild()

Beschreibung

lastChild() sucht unter den Kindknoten des aktuellen Knotens (treeWalker.currentNode) von hinten nach vorn den letzten Knoten, der für den TreeWalker sichtbar ist. Sichtbar ist ein Knoten, wenn er zum whatToShow-Bitfeld passt und der optionale filter für ihn NodeFilter.FILTER_ACCEPT liefert.

Wird ein passender Knoten gefunden, wird er zum neuen currentNode und die Methode gibt ihn zurück. Gibt es keinen, liefert sie null und currentNode bleibt unverändert. Deshalb eignet sich die Methode gut, um in einer Schleife gezielt zum hintersten Knoten eines Teilbaums abzusteigen.

Wichtig ist der Unterschied zwischen FILTER_REJECT und FILTER_SKIP: Bei FILTER_SKIP wird nur der Knoten selbst übersprungen, seine Nachfahren werden aber weiter durchsucht. Das letzte „sichtbare Kind“ kann dann also ein Enkel sein. Bei FILTER_REJECT wird der ganze Teilbaum ausgelassen.

Rückgabewert

Typ

Node | null

Beschreibung

Das letzte sichtbare Kind (dieser Knoten ist danach auch der neue currentNode) oder null, wenn es kein sichtbares Kind gibt.

Beispiele

Letztes Element-Kind einer Liste finden

document.body.innerHTML = `
  <ul id="liste">
    <li>Äpfel</li>
    <li>Birnen</li>
    <li>Kirschen</li>
  </ul>`;

const liste = document.getElementById('liste');
// Nur Elemente anzeigen, Textknoten (Leerzeichen) ignorieren
const walker = document.createTreeWalker(liste, NodeFilter.SHOW_ELEMENT);

const letztes = walker.lastChild();
console.log(letztes.textContent);
console.log(walker.currentNode === letztes);

Kirschen true

Zum tiefsten letzten Knoten absteigen

document.body.innerHTML = `
  <article id="post">
    <p>Einleitung</p>
    <section><p>Teil 1</p><p>Fazit <em>am Ende</em></p></section>
  </article>`;

const walker = document.createTreeWalker(
  document.getElementById('post'),
  NodeFilter.SHOW_ELEMENT
);

// Solange es ein letztes Kind gibt, weiter nach unten gehen
while (walker.lastChild()) {}

console.log(walker.currentNode.tagName);
console.log(walker.currentNode.textContent);

EM am Ende

Filter mit FILTER_SKIP und Rückgabe null

document.body.innerHTML = `
  <div id="box">
    <span>A</span>
    <div class="wrapper"><span>B</span></div>
  </div>`;

const walker = document.createTreeWalker(
  document.getElementById('box'),
  NodeFilter.SHOW_ELEMENT,
  {
    // Wrapper überspringen, seine Kinder aber berücksichtigen
    acceptNode: (node) =>
      node.classList.contains('wrapper')
        ? NodeFilter.FILTER_SKIP
        : NodeFilter.FILTER_ACCEPT,
  }
);

const kind = walker.lastChild();
console.log(kind.textContent); // Enkel aus dem übersprungenen Wrapper

// <span>B</span> hat keine Element-Kinder
console.log(walker.lastChild());
console.log(walker.currentNode.textContent); // unverändert

B null B

// Wichtig · Fallstricke

Kein Wurzelwechsel: Die Methode läuft nur abwärts und nie über walker.root hinaus. Zum letzten Knoten des ganzen Dokuments in Dokumentreihenfolge führt lastChild() nur in einer Schleife (siehe Beispiel 2). Alternativ gibt es previousNode().
Leerraum-Textknoten: Mit NodeFilter.SHOW_ALL ist das letzte Kind oft ein Textknoten mit Zeilenumbruch. Für Elemente deshalb SHOW_ELEMENT verwenden.
Auf null prüfen: Liefert die Methode null, bleibt currentNode wie er war. Fehler entstehen, wenn man trotzdem mit dem Rückgabewert weiterarbeitet.
Filter-Aufwand: Der Filter läuft bei jedem geprüften Knoten. Bei FILTER_SKIP werden auch Nachfahren durchsucht, was in großen Bäumen teuer sein kann.
Ist currentNode manuell auf einen Knoten außerhalb von root gesetzt, sucht die Methode trotzdem in dessen Kindern.
Die Methode wird von allen modernen Browsern unterstützt, auch von alten wie IE9+.

Siehe auch

TreeWalker TreeWalker.firstChild() TreeWalker.previousSibling() TreeWalker.parentNode() TreeWalker.currentNode Document.createTreeWalker() Node.lastChild