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
- The value of the list as a
DOMString
.
Methods
DOMTokenList.item()
- Returns an item in the list by its index (returns
undefined
if the number is greater than or equal to the length of the list). DOMTokenList.contains()
- Returns
true
if the list contains the given token, otherwisefalse
. DOMTokenList.add()
- Adds the given token to the list.
DOMTokenList.remove()
- Removes the specified token from the list.
DOMTokenList.replace()
- Replaces an existing token with a new token.
DOMTokenList.supports()
- Returns
true
if a given token is in the associated attribute's supported tokens. DOMTokenList.toggle()
- Removes a given token from the list and returns
false
. If token doesn't exist it's added and the function returnstrue
. DOMTokenList.entries()
- Returns an
iterator
allowing you to go through all key/value pairs contained in this object. DOMTokenList.forEach()
- Executes a provided 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:
var para = document.querySelector("p"); var 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>
var span = document.querySelector("span"); var 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 Yes | 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 |
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 ? | Firefox Full support 50 | IE ? | 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 Yes |
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 Yes |
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 ? | Firefox Full support 50 | IE ? | 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 Yes |
length | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 50 | IE ? | 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 ? | Firefox Full support 55 | IE
Full support
Yes
| 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 ? | 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 No support No |
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 Yes | Firefox Full support Yes | IE ? | 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 Yes |
values | Chrome Full support 45 | Edge ? | Firefox Full support 50 | IE ? | 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 Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.