DOMTokenList.item() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.item(index)

Beschreibung

Mit item() liest man ein einzelnes Token aus einer DOMTokenList über seine Position aus. Am häufigsten ist das element.classList, aber auch relList von <a>/<link>, sandbox von <iframe> oder part sind DOMTokenList-Objekte. Die Reihenfolge entspricht der Reihenfolge der Tokens im zugrunde liegenden Attribut, doppelte Einträge werden dabei entfernt.

Die Methode verhält sich fast genauso wie der Zugriff per eckigen Klammern (list[0]). Der Unterschied liegt beim ungültigen Index: item() gibt null zurück, der Klammerzugriff undefined. Brauchen Sie ausdrücklich null als Signal für „nicht vorhanden“, oder soll der Code auch mit anderen DOM-Listen einheitlich aussehen, ist item() die passende Wahl.

Wollen Sie nur wissen, ob ein Token vorhanden ist, nehmen Sie besser contains(). item() lohnt sich vor allem, wenn die Position selbst wichtig ist, etwa für die erste Klasse als „Hauptklasse“ oder beim Durchlaufen mit einer klassischen for-Schleife bis length.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierte Position des gewünschten Tokens. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt (`unsigned long`). Negative Werte werden deshalb zu sehr großen Zahlen und ergeben `null`.

Rückgabewert

Typ

string | null

Beschreibung

Das Token an der Position index als String oder null, wenn index größer oder gleich length ist.

Beispiele

Erste und letzte CSS-Klasse auslesen

const box = document.createElement('div');
box.className = 'card card--active shadow';

const { classList } = box;
console.log(classList.item(0));
console.log(classList.item(classList.length - 1));
console.log(classList.item(10));

card shadow null

Unterschied zwischen item() und Klammerzugriff

const el = document.createElement('span');
el.className = 'badge';

console.log(el.classList.item(5)); // null
console.log(el.classList[5]);      // undefined
console.log(el.classList.item(-1)); // -1 wird zu 4294967295 → null

null undefined null

Alle Klassen mit Index durchlaufen

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

for (let i = 0; i < button.classList.length; i++) {
  console.log(`${i}: ${button.classList.item(i)}`);
}

0: btn 1: btn-primary 2: btn-lg

relList eines Links prüfen

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

const firstRel = link.relList.item(0) ?? 'keins';
console.log(`Erster rel-Wert: ${firstRel}`);

Erster rel-Wert: noopener

// Wichtig · Fallstricke

Ungültiger Index: item() liefert null, list[i] liefert undefined. Beim strikten Vergleich (=== undefined) ist dieser Unterschied wichtig.
Negative Indizes zählen nicht vom Ende her wie bei Array.prototype.at(). Für das letzte Token schreiben Sie list.item(list.length - 1) oder [...list].at(-1).
Live-Liste: Die DOMTokenList ändert sich mit, sobald sich das Attribut ändert. Wer in einer Schleife mit item(i) gleichzeitig remove() aufruft, überspringt dadurch Einträge. In dem Fall erst mit [...list] kopieren.
Doppelte Tokens im Attribut, etwa class="a a b", erscheinen nur einmal. Die Indizes können deshalb von der Schreibweise im HTML abweichen.
Ohne Argument wirft der Aufruf einen TypeError.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt, classList sogar ab IE 10.

Siehe auch

DOMTokenList DOMTokenList.contains() DOMTokenList.length DOMTokenList.add() DOMTokenList.remove() Element.classList CSSRuleList.item()