NodeList.length — Eigenschaft · JavaScript-Referenz

Signatur

get NodeList.prototype.length

Beschreibung

Die schreibgeschützte Eigenschaft length liefert, wie viele Knoten eine NodeList enthält. Eine NodeList bekommst du z. B. von document.querySelectorAll(), Node.childNodes oder document.getElementsByName(). Ist die Liste leer, ist length gleich 0.

Typische Einsatzfälle sind klassische for-Schleifen über die Liste, die Prüfung, ob ein Selektor überhaupt etwas gefunden hat (if (list.length)), und der Zugriff auf das letzte Element über list[list.length - 1].

Wichtig ist der Unterschied zwischen statischen und lebenden NodeLists: querySelectorAll() gibt eine statische Liste zurück, deren length sich nach späteren DOM-Änderungen nicht mehr ändert. childNodes und getElementsByName() liefern dagegen eine lebende Liste, deren length sich sofort anpasst, wenn Knoten hinzugefügt oder entfernt werden.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl mit der aktuellen Anzahl der Knoten in der NodeList.

Beispiele

Prüfen, ob ein Selektor Treffer hat

const buttons = document.querySelectorAll('button.primary');

if (buttons.length === 0) {
  console.log('Keine primären Buttons gefunden');
} else {
  console.log(`${buttons.length} primäre Buttons gefunden`);
}

3 primäre Buttons gefunden

Klassische for-Schleife und letztes Element

const items = document.querySelectorAll('ul#todo > li');

for (let i = 0; i < items.length; i++) {
  items[i].dataset.index = String(i);
}

const last = items[items.length - 1];
console.log(last?.textContent ?? 'Liste ist leer');

Einkaufen gehen

Lebende vs. statische NodeList

const list = document.createElement('ul');
list.append(document.createElement('li'));

const live = list.childNodes;               // lebend
const stat = list.querySelectorAll('li');   // statisch

list.append(document.createElement('li'));

console.log(live.length); // passt sich an
console.log(stat.length); // bleibt beim alten Stand

2 1

Lebende Liste sicher leeren

const container = document.querySelector('#container');
const children = container.childNodes;

// length schrumpft bei jedem Entfernen – daher while statt for mit Index
while (children.length > 0) {
  container.removeChild(children[0]);
}

console.log(children.length);

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie list.length = 0 wird ignoriert (im Strict Mode gibt es einen TypeError), die Liste wird dadurch nicht geleert.
Lebende Listen: Wenn du bei childNodes in einer for-Schleife mit i < list.length Knoten entfernst, ändert sich length während der Schleife. Dadurch werden Elemente übersprungen. Lege vorher mit Array.from(list) eine Kopie an oder nutze eine while-Schleife.
Textknoten zählen mit: childNodes.length zählt auch Leerraum-Textknoten und Kommentare. Wenn du nur Elemente zählen willst, nimm element.children.length oder element.childElementCount.
Die Eigenschaft wird in allen Browsern unterstützt, ohne Einschränkungen.

Siehe auch

NodeList NodeList.prototype.item() NodeList.prototype.forEach() Document.querySelectorAll() Node.childNodes HTMLCollection.length CSSValueList.length