DOMTokenList
Das DOMTokenList
-Interface repräsentiert eine Menge von leerzeichengetrennten Tokens. Solch eine Menge wird von Element.classList
oder HTMLLinkElement.relList
und vielen anderen zurückgegeben.
Ein DOMTokenList
wird, wie JavaScript-Array
-Objekte, beginnend bei 0
indiziert. DOMTokenList
ist immer case-sensitive (Groß- und Kleinschreibung wird unterschieden).
Instanz-Eigenschaften
DOMTokenList.length
Nur lesbar-
Ein
integer
, der die Anzahl der im Objekt gespeicherten Objekte repräsentiert. DOMTokenList.value
-
Eine stringifier-Eigenschaft, die den Wert der Liste als Zeichenkette zurückgibt.
Instanz-Methoden
DOMTokenList.item()
-
Gibt das Element in der Liste durch seinen Index zurück oder
null
, wenn der Index größer oder gleich derlength
der Liste ist. DOMTokenList.contains()
-
Gibt
true
zurück, wenn die Liste das gegebene Token enthält, andernfallsfalse
. DOMTokenList.add()
-
Fügt die angegebenen Tokens zur Liste 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 gegebene Token in den unterstützten Tokens des zugehörigen Attributs enthalten ist. DOMTokenList.toggle()
-
Entfernt das Token aus der Liste, wenn es existiert, oder fügt es zur Liste 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 Ihnen ermöglicht, alle in diesem Objekt enthaltenen Schlüssel/Wert-Paare durchzugehen.
DOMTokenList.forEach()
-
Führt eine bereitgestellte Callback-Funktion einmal für jedes
DOMTokenList
-Element aus. DOMTokenList.keys()
-
Gibt einen iterator zurück, der es Ihnen ermöglicht, alle Schlüssel der in diesem Objekt enthaltenen Schlüssel/Wert-Paare durchzugehen.
DOMTokenList.values()
-
Gibt einen iterator zurück, der es Ihnen ermöglicht, alle Werte der in diesem Objekt enthaltenen Schlüssel/Wert-Paare durchzugehen.
Beispiele
Im folgenden einfachen Beispiel rufen wir die Liste der class
-Attribute ab, die auf einem <p>
-Element mithilfe von Element.classList
als DOMTokenList
gesetzt sind, fügen eine Klasse mithilfe von DOMTokenList.add()
hinzu und aktualisieren dann den Node.textContent
des <p>
, sodass er der DOMTokenList
entspricht.
Zuerst das HTML:
<p class="a b c"></p>
Nun das JavaScript:
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;
Die Ausgabe sieht so aus:
Trimmen von Leerzeichen und Entfernen von Duplikaten
Methoden, die die DOMTokenList
ändern (wie zum Beispiel DOMTokenList.add()
), schneiden automatisch überschüssige Whitespace ab und entfernen doppelte Werte aus der Liste. Zum Beispiel:
<span class=" d d e f"></span>
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 Standard # interface-domtokenlist |
Browser-Kompatibilität
BCD tables only load in the browser