NodeList.keys() — Methode · JavaScript-Referenz

Signatur

NodeList.prototype.keys()

Beschreibung

NodeList.keys() gibt ein Iterator-Objekt zurück, das die Schlüssel der Liste liefert. Bei einer NodeList sind das die numerischen Indizes der enthaltenen Knoten, aufsteigend von 0 bis length - 1. Der Iterator folgt dem Iterationsprotokoll und lässt sich daher mit for...of, dem Spread-Operator oder Array.from() verwenden.

Die Methode ist praktisch, wenn du nur die Positionen der Knoten brauchst, zum Beispiel um Indizes in data--Attribute zu schreiben oder um gezielt über item(i) bzw. list[i] zuzugreifen. Brauchst du Index und Knoten gleichzeitig, ist entries() meist die bessere Wahl. Brauchst du nur die Knoten, nimm values() oder iteriere direkt über die NodeList.

Wichtig: Ob sich die Liste nachträglich ändert, hängt vom Typ der NodeList ab. querySelectorAll() liefert eine statische Liste, Node.childNodes dagegen eine live-Liste, die DOM-Änderungen während der Iteration widerspiegelt.

Rückgabewert

Typ

Iterator<number>

Beschreibung

Ein Iterator, der nacheinander die Indizes (0, 1, 2, …) der Knoten in der NodeList liefert.

Beispiele

Indizes mit for...of durchlaufen

const list = document.createElement('ul');
list.innerHTML = '<li>Äpfel</li><li>Birnen</li><li>Kirschen</li>';

const items = list.querySelectorAll('li');

for (const index of items.keys()) {
  console.log(index, items[index].textContent);
}

0 Äpfel 1 Birnen 2 Kirschen

Indizes als Array sammeln

const div = document.createElement('div');
div.append(document.createElement('p'), document.createTextNode('Text'), document.createElement('span'));

const indices = [...div.childNodes.keys()];
console.log(indices);

[0, 1, 2]

Positionsnummern in data-Attribute schreiben

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

for (const i of rows.keys()) {
  rows[i].dataset.position = String(i + 1);
  if (i % 2 === 1) rows[i].classList.add('zebra');
}

console.log(`${rows.length} Zeilen nummeriert`);

z. B. "5 Zeilen nummeriert"

Iterator manuell mit next() abfragen

const nodes = document.createElement('div');
nodes.innerHTML = '<b>a</b><i>b</i>';

const it = nodes.childNodes.keys();
console.log(it.next()); // erster Index
console.log(it.next()); // zweiter Index
console.log(it.next()); // fertig

{ value: 0, done: false } { value: 1, done: false } { value: undefined, done: true }

// Wichtig · Fallstricke

Live- oder statische Liste: Bei live-Listen wie childNodes können Knoten während der Iteration hinzukommen oder wegfallen. Das verschiebt die Indizes. Willst du beim Durchlaufen Knoten entfernen, erstelle vorher eine Kopie mit Array.from(list).
Nicht bei HTMLCollection: Ergebnisse von getElementsByClassName() oder children haben kein keys(). Wandle sie mit Array.from(collection).keys() um.
Der Iterator lässt sich nur einmal durchlaufen. Für eine zweite Iteration rufst du keys() erneut auf.
Die Schlüssel sind Zahlen, keine Strings (anders als bei Object.keys()).
Kompatibilität: Wird von allen modernen Browsern unterstützt, aber nicht vom Internet Explorer. Dort hilft eine klassische for-Schleife über length.

Siehe auch

NodeList NodeList.entries() NodeList.values() NodeList.forEach() NodeList.item() Document.querySelectorAll() for...of