DOMTokenList.entries() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.entries()

Beschreibung

Die Methode entries() von DOMTokenList gibt einen Iterator zurück, mit dem Sie alle Schlüssel/Wert-Paare der Liste durchlaufen können. Der Schlüssel ist dabei der numerische Index (0, 1, …), der Wert das jeweilige Token als String, z. B. ein einzelner Klassenname aus element.classList.

Am meisten bringt entries(), wenn Sie beim Durchlaufen sowohl die Position als auch den Wert eines Tokens brauchen, etwa um Klassen nummeriert zu protokollieren oder das erste bzw. letzte Token gesondert zu behandeln. Brauchen Sie nur die Werte, reicht eine direkte for...of-Schleife über die Liste (entspricht values()) oder forEach().

DOMTokenList kommt unter anderem bei Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList und HTMLIFrameElement.sandbox vor. Überall dort funktioniert entries() auf die gleiche Weise.

Rückgabewert

Typ

Iterator<[number, string]>

Beschreibung

Ein neues Iterator-Objekt. Jeder Aufruf von next() liefert ein Array [index, token], bis done den Wert true hat.

Beispiele

Klassen eines Elements mit Index ausgeben

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

for (const [index, cls] of el.classList.entries()) {
  console.log(`${index}: ${cls}`);
}

0: card 1: active 2: highlighted

Iterator manuell mit next() weiterschalten

const el = document.createElement('span');
el.classList.add('btn', 'btn-primary');

const it = el.classList.entries();
console.log(it.next()); // erstes Paar
console.log(it.next()); // zweites Paar
console.log(it.next()); // Ende

{ value: [0, 'btn'], done: false } { value: [1, 'btn-primary'], done: false } { value: undefined, done: true }

Token-Paare in Map bzw. Array umwandeln

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

// Momentaufnahme als Array
const pairs = [...link.relList.entries()];
console.log(pairs);

// Nachschlagen: Index -> Token
const byIndex = new Map(link.relList.entries());
console.log(byIndex.get(1));

[[0, 'noopener'], [1, 'noreferrer'], [2, 'nofollow']] noreferrer

// Wichtig · Fallstricke

Live-Liste: DOMTokenList ist live. Fügen Sie während der Iteration Klassen hinzu oder entfernen Sie welche (z. B. mit classList.remove() in der Schleife), kann der Iterator Einträge überspringen oder unerwartete Werte liefern. Legen Sie vorher eine Kopie an: [...el.classList.entries()].
Der Iterator lässt sich nur einmal durchlaufen. Für einen zweiten Durchlauf rufen Sie entries() erneut auf.
Die Schlüssel sind Zahlen, keine Strings, anders als bei Object.entries().
Doppelte Tokens im Attribut (z. B. class="a a b") entfernt die DOMTokenList automatisch. Der Iterator liefert jedes Token also nur einmal.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Der Internet Explorer kennt die Methode nicht. Dort brauchen Sie eine klassische for-Schleife mit item(i).

Siehe auch

DOMTokenList DOMTokenList.keys() DOMTokenList.values() DOMTokenList.forEach() Element.classList for...of FeaturePolicy.features()