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.
TheDOMTokenList interface represents a set of space-separated tokens. Such a set is returned byElement.classList orHTMLLinkElement.relList, and many others.
ADOMTokenList is indexed beginning with0 as with JavaScriptArray objects.DOMTokenList is always case-sensitive.
Instance properties
DOMTokenList.lengthRead onlyAn
integerrepresenting the number of objects stored in the object.DOMTokenList.valueAstringifier property that returns the value of the list as a string.
Instance methods
DOMTokenList.item()Returns the item in the list by its index, or
nullif the index is greater than or equal to the list'slength.DOMTokenList.contains()Returns
trueif the list contains the given token, otherwisefalse.DOMTokenList.add()Adds the specified tokens to the list.
DOMTokenList.remove()Removes the specified tokens from the list.
DOMTokenList.replace()Replaces the token with another one.
DOMTokenList.supports()Returns
trueif the given token is in the associated attribute's supported tokens.DOMTokenList.toggle()Removes the token from the list if it exists, or adds it to the list if it doesn't. Returns a boolean indicating whether the token is in the list after the operation.
DOMTokenList.entries()Returns aniterator, allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach()Executes a provided callback function once for each
DOMTokenListelement.DOMTokenList.keys()Returns aniterator, allowing you to go through all keys of the key/value pairs contained in this object.
DOMTokenList.toString()Returns the
DOMTokenList.value, the space-separated values of the list as a string.DOMTokenList.values()Returns aniterator, allowing you to go through all values of the key/value pairs contained in this object.
Examples
In the following simple example, we retrieve the list of classes set on a<p> element as aDOMTokenList usingElement.classList, add a class usingDOMTokenList.add(), and then update theNode.textContent of the<p> to equal theDOMTokenList.
First, the HTML:
<p></p>Now the #"p");let classes = para.classList;para.classList.add("d");para.textContent = `paragraph classList is "${classes}"`;
The output looks like this:
Trimming of whitespace and removal of duplicates
Methods that modify theDOMTokenList (such asDOMTokenList.add()) automatically trim any excessWhitespace and remove duplicate values from the list. For example:
<span></span>let span = document.querySelector("span");let classes = span.classList;span.classList.add("x");span.textContent = `span classList is "${classes}"`;The output looks like this:
Specifications
| Specification |
|---|
| DOM # interface-domtokenlist |