NodeList.entries() — Methode · JavaScript-Referenz

Signatur

NodeList.prototype.entries()

Beschreibung

NodeList.entries() gibt einen Iterator zurück, der sich an das Iterationsprotokoll hält. Jeder Schritt liefert ein Array [index, node]: Der Schlüssel ist der numerische Index (0, 1, …), der Wert ist der jeweilige Node.

Die Methode ist praktisch, wenn man in einer for...of-Schleife gleichzeitig den Index und das Element braucht, z. B. zum Nummerieren von Listeneinträgen, für abwechselnde Formatierung (Zebra-Streifen) oder für Fortschrittsanzeigen. Durch Destrukturierung (for (const [i, el] of list.entries())) bleibt der Code kurz und lesbar.

Wichtig ist der Unterschied zwischen statischen und lebenden NodeLists: document.querySelectorAll() liefert eine statische Liste, Node.childNodes dagegen eine lebende, die sich bei DOM-Änderungen sofort mit aktualisiert. Wer während der Iteration über eine lebende Liste Knoten einfügt oder entfernt, kann Elemente überspringen oder doppelt verarbeiten.

Rückgabewert

Typ

Iterator<[number, Node]>

Beschreibung

Ein Iterator, dessen Werte jeweils ein zweielementiges Array [index, node] sind. Der Iterator ist selbst iterierbar und kann in for...of, mit Spread-Syntax oder Array.from() verwendet werden.

Beispiele

Index und Element in for...of

// HTML: <ul><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
const items = document.querySelectorAll('li');

for (const [index, li] of items.entries()) {
  console.log(`${index}: ${li.textContent}`);
}

0: Äpfel 1: Birnen 2: Kirschen

Zebra-Streifen für Tabellenzeilen

const rows = document.querySelectorAll('table tbody tr');

for (const [i, row] of rows.entries()) {
  row.classList.toggle('odd', i % 2 === 1);
  row.dataset.position = String(i + 1);
}

Iterator manuell mit next() abfragen

const div = document.createElement('div');
div.innerHTML = '<span>A</span><span>B</span>';

const it = div.childNodes.entries();
console.log(it.next().value[1].textContent);
console.log(it.next().value[0]);
console.log(it.next().done);

A 1 true

In ein Array umwandeln und filtern

const inputs = document.querySelectorAll('form input');

// Indizes aller leeren Pflichtfelder ermitteln
const leer = [...inputs.entries()]
  .filter(([, input]) => input.required && !input.value.trim())
  .map(([i]) => i);

console.log('Leere Pflichtfelder an Position:', leer);

Leere Pflichtfelder an Position: [0, 2]

// Wichtig · Fallstricke

Lebende NodeLists: childNodes ändert sich während der Iteration mit, wenn das DOM verändert wird. Vor dem Entfernen oder Verschieben von Knoten besser mit Array.from(list) eine Kopie anlegen.
childNodes enthält auch Text- und Kommentarknoten (z. B. Leerzeichen/Umbrüche). Wer nur Elemente will, nimmt element.children (eine HTMLCollection, die keine entries()-Methode hat, also z. B. Array.from(el.children).entries()) oder querySelectorAll.
Der Iterator lässt sich nur einmal durchlaufen. Für einen zweiten Durchlauf entries() erneut aufrufen.
Nicht im Internet Explorer verfügbar; dort war ein Polyfill oder Array.prototype.forEach.call() nötig. In allen aktuellen Browsern ist die Methode verfügbar.
Wer nur Index und Element für einen Callback braucht, kann alternativ NodeList.prototype.forEach((node, index) => …) verwenden.

Siehe auch

NodeList NodeList.keys() NodeList.values() NodeList.forEach() Document.querySelectorAll() for...of Array.prototype.entries()