DOMTokenList.forEach() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.forEach(callback, thisArg)

Beschreibung

Die Methode forEach() der Schnittstelle DOMTokenList geht alle Tokens der Liste der Reihe nach durch und ruft für jedes davon die übergebene Callback-Funktion auf. Am häufigsten begegnet man ihr bei element.classList. Sie wird aber auch bei anderen Token-Listen wie relList von <a>/<link> oder sandbox von <iframe> eingesetzt.

Der Callback erhält drei Argumente: das aktuelle Token als String, dessen Index und die DOMTokenList selbst. Damit verhält sich die Methode wie Array.prototype.forEach(). Du brauchst also kein Array.from(), wenn du die Klassen eines Elements nur durchlaufen willst.

Die Liste ist live. Änderst du die Klassen des Elements während der Schleife, wirkt sich das sofort auf die Liste aus. Das führt leicht dazu, dass Tokens übersprungen werden. Willst du beim Durchlaufen Tokens entfernen, kopiere die Liste vorher, z. B. mit [...el.classList].

Parameter

Name	Typ	Default	Beschreibung
$callback Pflicht	(value: string, index: number, list: DOMTokenList) => void		Funktion, die für jedes Token aufgerufen wird. Sie erhält `value` (das aktuelle Token), `index` (seine Position) und `list` (die durchlaufene `DOMTokenList`).
$thisArg	any	undefined	Wert, der beim Aufruf von `callback` als `this` verwendet wird. Bei Pfeilfunktionen hat er keine Wirkung.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Wenn du ein Ergebnis brauchst, wandle die Liste mit Array.from() in ein Array um und nutze map(), filter() usw.

Beispiele

Alle Klassen eines Elements ausgeben

const btn = document.createElement('button');
btn.className = 'btn btn-primary is-active';

btn.classList.forEach((token, index) => {
  console.log(`${index}: ${token}`);
});

0: btn 1: btn-primary 2: is-active

Zustands-Klassen sicher entfernen (Kopie der Live-Liste)

const card = document.createElement('div');
card.className = 'card is-loading is-error shadow';

// Kopie verwenden, da classList live ist und sich beim Entfernen verändert
[...card.classList].forEach((cls) => {
  if (cls.startsWith('is-')) card.classList.remove(cls);
});

console.log(card.className);

card shadow

rel-Werte eines Links prüfen, mit thisArg

const link = document.createElement('a');
link.href = 'https://example.com';
link.rel = 'noopener noreferrer external';

const report = { found: [] };

link.relList.forEach(function (value) {
  this.found.push(value.toUpperCase());
}, report);

console.log(report.found);

["NOOPENER", "NOREFERRER", "EXTERNAL"]

// Wichtig · Fallstricke

Live-Liste: Wird die Liste im Callback mit remove(), add() oder toggle() geändert, verschieben sich die Indizes, und Tokens können übersprungen werden. Durchlaufe in diesem Fall eine Kopie ([...list] oder Array.from(list)).
Kein vorzeitiger Abbruch: break und return beenden die Schleife nicht. Wenn du abbrechen willst, nimm for...of oder Array.from(list).some().
Doppelte Tokens im Attribut (class="a a b") werden in der DOMTokenList nur einmal geführt.
Browser-Kompatibilität: Der Internet Explorer unterstützt die Methode nicht. In allen modernen Browsern ist sie verfügbar. Für ältere Umgebungen gibt es als Ausweichlösung Array.prototype.forEach.call(el.classList, fn).

Siehe auch

DOMTokenList Element.classList DOMTokenList.entries() DOMTokenList.values() DOMTokenList.contains() Array.prototype.forEach() KeyboardLayoutMap.forEach()