Web/API/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
DOMThe definition of 'DOMTokenList' in that specification.	Living Standard	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DOMTokenList`	Chrome Full support 8	Edge Full support 12	Firefox Full support 3	IE Full support 10	Opera Full support 11.5	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11.5	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
`add`	Chrome Full support 8	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
`contains`	Chrome Full support 8	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
`entries`	Chrome Full support 42	Edge Full support 16	Firefox Full support 50	IE No support No	Opera Full support 32	Safari Full support 10.1	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 50	Opera Android Full support 32	Safari iOS Full support 10.3	Samsung Internet Android Full support 5.0
`forEach`	Chrome Full support 42	Edge Full support 16	Firefox Full support 50	IE No support No	Opera Full support 32	Safari Full support 10.1	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 50	Opera Android Full support 32	Safari iOS Full support 10.3	Samsung Internet Android Full support 5.0
`item`	Chrome Full support 8	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
`keys`	Chrome Full support 42	Edge Full support 16	Firefox Full support 50	IE No support No	Opera Full support 32	Safari Full support 10.1	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 50	Opera Android Full support 32	Safari iOS Full support 10.3	Samsung Internet Android Full support 5.0
`length`	Chrome Full support 8	Edge Full support 12	Firefox Full support 50	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support 50	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
`remove`	Chrome Full support 8	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
Removes duplicates	Chrome Full support 60	Edge Full support 17	Firefox Full support 55	IE No support No	Opera Full support 47	Safari Full support 10	WebView Android Full support 60	Chrome Android Full support 60	Firefox Android Full support 55	Opera Android Full support 44	Safari iOS Full support 10	Samsung Internet Android Full support 8.0
`replace`	Chrome Full support 61	Edge Full support 17	Firefox Full support 49	IE No support No	Opera Full support 48	Safari Full support 10.1	WebView Android Full support 61	Chrome Android Full support 61	Firefox Android Full support 49	Opera Android Full support 45	Safari iOS Full support 10.3	Samsung Internet Android Full support 8.0
`supports` Experimental'	Chrome Full support 49	Edge Full support 17	Firefox Full support 49	IE No support No	Opera Full support 36	Safari Full support 10.1	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 49	Opera Android Full support 36	Safari iOS Full support 10.3	Samsung Internet Android Full support 5.0
`toggle`	Chrome Full support 8	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0
Trims whitespace	Chrome Full support 48	Edge Full support 12	Firefox Full support 51	IE Full support 10	Opera Full support 35	Safari Full support 10	WebView Android Full support 48	Chrome Android Full support 48	Firefox Android Full support 51	Opera Android Full support 35	Safari iOS Full support 10	Samsung Internet Android Full support 5.0
`value`	Chrome 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 17	Firefox Full support 47	IE No support No	Opera 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 10	WebView 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 47	Opera 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 10	Samsung 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.
`values`	Chrome Full support 42	Edge Full support 16	Firefox Full support 50	IE No support No	Opera Full support 32	Safari Full support 10.1	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 50	Opera Android Full support 32	Safari iOS Full support 10.3	Samsung Internet Android Full support 5.0

Legend

Full support: Full 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.

DOMTokenList by Mozilla Contributors is licensed under CC-BY-SA 2.5.