DOMTokenList

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties

DOMTokenList.length Read only
Is an integer representing the number of objects stored in the object.
DOMTokenList.value
A stringifier property that returns the value of the list as a DOMString.

Methods

DOMTokenList.item(index)
Returns the item in the list by its index, or undefined if index is greater than or equal to the list's length.
DOMTokenList.contains(token)
Returns true if the list contains the given token, otherwise false.
DOMTokenList.add(token1[, token2[, ...tokenN]])
Adds the specified token(s) to the list.
DOMTokenList.remove(token1[, token2[, ...tokenN]])
Removes the specified token(s) from the list.
DOMTokenList.replace(oldToken, newToken)
Replaces token with newToken.
DOMTokenList.supports(token)
Returns true if a given token is in the associated attribute's supported tokens.
DOMTokenList.toggle(token [, force])
Removes token from the list if it exists, or adds token to the list if it doesn't. Returns a boolean indicating whether token is in the list after the operation.
DOMTokenList.entries()
Returns an iterator, allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach(callback [, thisArg])
Executes a provided callback function once per DOMTokenList element.
DOMTokenList.keys()
Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object.
DOMTokenList.values()
Returns an iterator, 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 a DOMTokenList using Element.classList, add a class using DOMTokenList.add(), and then update the Node.textContent of the <p> to equal the DOMTokenList.

First, the HTML:

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

Now the JavaScript:

let para = document.querySelector("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 the DOMTokenList (such as DOMTokenList.add()) automatically trim any excess Whitespace and remove duplicate values from the list. For example:

<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}"`;

The output looks like this:

Specifications

Specification Status Comment
DOM
The definition of 'DOMTokenList' in that specification.
Living Standard Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMTokenListChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 10Opera Full support 11.5Safari Full support 5.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
addChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
containsChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
entriesChrome Full support 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
forEachChrome Full support 45Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
itemChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
keysChrome Full support 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
lengthChrome Full support 1Edge Full support 12Firefox Full support 50IE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 50Opera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
removeChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
Trimming of whitespace and removal of duplicatesChrome Full support YesEdge Partial support 12
Notes
Partial support 12
Notes
Notes Before Edge 79, DOMTokenList trims whitespace but doesn't remove duplicates.
Firefox Full support 55IE Partial support Partial
Notes
Partial support Partial
Notes
Notes DOMTokenList trims whitespace but doesn't remove duplicates.
Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 55Opera Android Full support YesSafari iOS Full support 10Samsung Internet Android Full support Yes
replaceChrome Full support 61Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 48Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 49Opera Android Full support 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0
supports
Experimental
Chrome Full support 49Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 36Safari Full support 10WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 49Opera Android Full support 36Safari iOS Full support 10Samsung Internet Android Full support 5.0
toggleChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 11Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
valueChrome Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Full support ≤18Firefox Full support YesIE No support NoOpera Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari Full support 10WebView Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Firefox Android Full support YesOpera Android Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS Full support 10Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface.
valuesChrome Full support 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.