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
, orundefined
ifindex
is greater than or equal to the list'slength
. DOMTokenList.contains(token)
- Returns
true
if the list contains the giventoken
, otherwisefalse
. 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
withnewToken
. DOMTokenList.supports(token)
- Returns
true
if a giventoken
is in the associated attribute's supported tokens. DOMTokenList.toggle(token [, force])
- Removes
token
from the list if it exists, or addstoken
to the list if it doesn't. Returns a boolean indicating whethertoken
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 perDOMTokenList
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMTokenList | Chrome Full support 1 | 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 1 | 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 1 | 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 Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
contains | Chrome Full support 1 | 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 Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
entries | Chrome Full support 45 | Edge Full support ≤79 | Firefox Full support 50 | IE No support No | Opera Full support 32 | Safari Full support 10 | 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 | Samsung Internet Android Full support 5.0 |
forEach | Chrome Full support 45 | Edge Full support 16 | Firefox Full support 50 | IE No support No | Opera Full support 32 | Safari Full support 10 | 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 | Samsung Internet Android Full support 5.0 |
item | Chrome Full support 1 | 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 Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
keys | Chrome Full support 45 | Edge Full support ≤79 | Firefox Full support 50 | IE No support No | Opera Full support 32 | Safari Full support 10 | 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 | Samsung Internet Android Full support 5.0 |
length | Chrome Full support 1 | 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 Yes | Chrome Android Full support Yes | Firefox Android Full support 50 | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
remove | Chrome Full support 1 | 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 Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
Trimming of whitespace and removal of duplicates | Chrome Full support Yes | Edge
Partial support
12
| Firefox Full support 55 | IE
Partial support
Partial
| Opera Full support Yes | Safari Full support 10 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 55 | Opera Android Full support Yes | Safari iOS Full support 10 | Samsung Internet Android Full support Yes |
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 | Chrome Full support 49 | Edge Full support 17 | Firefox Full support 49 | IE No support No | Opera Full support 36 | Safari Full support 10 | 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 | Samsung Internet Android Full support 5.0 |
toggle | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE Full support 11 | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android Full support Yes |
value | Chrome
Full support
50
| Edge Full support ≤18 | Firefox Full support Yes | IE No support No | Opera
Full support
37
| Safari Full support 10 | WebView Android
Full support
50
| Chrome Android
Full support
50
| Firefox Android Full support Yes | Opera Android
Full support
37
| Safari iOS Full support 10 | Samsung Internet Android
Full support
5.0
|
values | Chrome Full support 45 | Edge Full support ≤79 | Firefox Full support 50 | IE No support No | Opera Full support 32 | Safari Full support 10 | 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 | Samsung 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.