DOMTokenList.keys() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.keys()

Beschreibung

Die Methode keys() des Interfaces DOMTokenList gibt einen Iterator zurück, mit dem man alle Schlüssel der Liste durchlaufen kann. Die Schlüssel sind die numerischen Indizes der Tokens, also 0 bis length - 1, und zwar als Zahlen (Typ number).

Eine DOMTokenList begegnet einem vor allem als element.classList, aber auch bei relList von <a>, <link> und <form>, bei sandbox von <iframe> und bei part. Mit keys() kommt man an die Positionen der Einträge, zum Beispiel um sie zusammen mit item(index) auszuwerten oder zu nummerieren.

In der Praxis braucht man keys() selten allein. Meist ist entries() praktischer, weil es Index und Wert zusammen liefert, oder values() bzw. eine direkte for...of-Schleife über die Liste, wenn nur die Tokens selbst gebraucht werden. Der Iterator hält sich an das Iterator-Protokoll: Man kann ihn in for...of, mit dem Spread-Operator oder mit Array.from() verwenden.

Rückgabewert

Typ

Iterator<number>

Beschreibung

Ein Iterator, der nacheinander die Indizes (number) aller Tokens der Liste liefert.

Beispiele

Indizes der CSS-Klassen durchlaufen

const div = document.createElement('div');
div.className = 'card active highlighted';

for (const key of div.classList.keys()) {
  console.log(key, div.classList.item(key));
}

0 card 1 active 2 highlighted

Iterator in ein Array umwandeln

const link = document.createElement('a');
link.rel = 'noopener noreferrer nofollow';

const indizes = [...link.relList.keys()];
console.log(indizes);

[0, 1, 2]

Iterator manuell mit next() abfragen

const el = document.createElement('span');
el.classList.add('a', 'b');

const it = el.classList.keys();
console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }

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

Klassen nummeriert protokollieren (Vergleich mit entries())

const btn = document.createElement('button');
btn.classList.add('btn', 'btn-primary', 'is-loading');

// Mit keys() + item()
const liste = Array.from(btn.classList.keys(), (i) => `${i + 1}. ${btn.classList.item(i)}`);
console.log(liste.join('\n'));

// Kürzer mit entries()
for (const [i, name] of btn.classList.entries()) {
  console.log(i, name);
}

1. btn 2. btn-primary 3. is-loading 0 btn 1 btn-primary 2 is-loading

// Wichtig · Fallstricke

Live-Liste: Die DOMTokenList ist live. Werden während der Iteration Klassen hinzugefügt oder entfernt (z. B. mit classList.remove()), verschieben sich die Indizes, und der Iterator kann Einträge überspringen. Wer die Liste verändern will, sollte vorher eine Kopie anlegen, z. B. mit [...el.classList.keys()].
Die Schlüssel sind Zahlen, keine Klassennamen. Für die Tokens selbst gibt es values() oder direkt for...of.
Doppelte Tokens im Attribut werden entfernt: class="a a b" ergibt nur die Indizes 0 und 1.
Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Methode nicht; dort bleibt nur eine klassische for-Schleife über length.

Siehe auch

DOMTokenList DOMTokenList.values() DOMTokenList.entries() DOMTokenList.forEach() DOMTokenList.item() Element.classList for...of