DOMTokenList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die Schnittstelle DOMTokenList repräsentiert eine Menge von durch Leerzeichen getrennten Tokens. Eine solche Menge wird von Element.classList oder HTMLLinkElement.relList und vielen anderen zurückgegeben.

Ein DOMTokenList ist beginnend mit 0 indiziert, wie bei JavaScript-Array-Objekten. DOMTokenList ist immer fallunterscheidend.

Instanz-Eigenschaften

DOMTokenList.length Schreibgeschützt

Eine integer, die die Anzahl der im Objekt gespeicherten Objekte darstellt.

DOMTokenList.value

Eine stringifier-Eigenschaft, die den Wert der Liste als Zeichenkette zurückgibt.

Instanz-Methoden

DOMTokenList.item()

Gibt das Element in der Liste anhand seines Indexes zurück oder null, wenn der Index größer oder gleich der length der Liste ist.

DOMTokenList.contains()

Gibt true zurück, wenn die Liste das angegebene Token enthält, andernfalls false.

DOMTokenList.add()

Fügt der Liste die angegebenen Tokens hinzu.

DOMTokenList.remove()

Entfernt die angegebenen Tokens aus der Liste.

DOMTokenList.replace()

Ersetzt das Token durch ein anderes.

DOMTokenList.supports()

Gibt true zurück, wenn das angegebene Token zu den unterstützten Tokens des zugehörigen Attributs gehört.

DOMTokenList.toggle()

Entfernt das Token aus der Liste, wenn es existiert, oder fügt es hinzu, wenn es nicht existiert. Gibt einen booleschen Wert zurück, der angibt, ob das Token nach der Operation in der Liste ist.

DOMTokenList.entries()

Gibt einen iterator zurück, der es ermöglicht, alle Schlüssel/Wert-Paare in diesem Objekt durchzugehen.

DOMTokenList.forEach()

Führt eine bereitgestellte Callback-Funktion einmal für jedes Element des DOMTokenList aus.

DOMTokenList.keys()

Gibt einen iterator zurück, der es ermöglicht, alle Schlüssel der Schlüssel/Wert-Paare in diesem Objekt durchzugehen.

DOMTokenList.toString()

Gibt den DOMTokenList.value zurück, die als Zeichenkette durch Leerzeichen getrennten Werte der Liste.

DOMTokenList.values()

Gibt einen iterator zurück, der es ermöglicht, alle Werte der Schlüssel/Wert-Paare in diesem Objekt durchzugehen.

Beispiele

Im folgenden einfachen Beispiel rufen wir die Liste von Klassen ab, die auf einem <p>-Element als DOMTokenList gesetzt sind, fügen eine Klasse mit DOMTokenList.add() hinzu und aktualisieren anschließend den Node.textContent des <p>, um dem DOMTokenList gleichzusetzen.

Zuerst das HTML:

html
<p class="a b c"></p>

Jetzt das JavaScript:

js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;

Die Ausgabe sieht so aus:

Kürzen von Leerzeichen und Entfernen von Duplikaten

Methoden, die das DOMTokenList modifizieren (wie DOMTokenList.add()), kürzen automatisch überschüssige Leerzeichen und entfernen doppelte Werte aus der Liste. Zum Beispiel:

html
<span class="    d   d e f"></span>
js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;

Die Ausgabe sieht so aus:

Spezifikationen

Specification
DOM
# interface-domtokenlist

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMTokenList
[Symbol.iterator]
add
Multiple parameters for add()
contains
entries
forEach
item
keys
length
remove
Multiple parameters for remove()
Removes duplicates
replace
return()'s value is a boolean, not void as it used to be.
supports
toString
toggle
force parameter
Trims whitespace
value
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.