The DOMTokenList
interface represents a set of space-separated tokens. Such a set is returned by Element.classList
or HTMLLinkElement.relList
, and many others.
A DOMTokenList
is indexed beginning with 0
as with JavaScript Array
objects. DOMTokenList
is always case-sensitive.
Instance properties
-
DOMTokenList.length
Read only
-
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 string.
Instance methods
DOMTokenList.item()
-
Returns the item in the list by its index, or null
if the index is greater than or equal to the list's length
.
DOMTokenList.contains()
-
Returns true
if the list contains the given token, otherwise false
.
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 true
if 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 an iterator, allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach()
-
Executes a provided callback function once for each 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:
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
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
@@iterator |
42 |
16 |
36 |
No |
29 |
10.1 |
42 |
42 |
36 |
29 |
10.3 |
4.0 |
DOMTokenList |
8 |
12 |
3.6 |
10 |
11.5 |
5.1 |
3 |
18 |
4 |
11.5 |
5 |
1.0 |
add |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
contains |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
entries |
42 |
16 |
50 |
No |
29 |
10.1 |
42 |
42 |
50 |
29 |
10.3 |
4.0 |
forEach |
42 |
16 |
50 |
No |
29 |
10.1 |
42 |
42 |
50 |
29 |
10.3 |
4.0 |
item |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
keys |
42 |
16 |
50 |
No |
29 |
10.1 |
42 |
42 |
50 |
29 |
10.3 |
4.0 |
length |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
remove |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
remove_duplicates |
60 |
17 |
55 |
No |
47 |
10 |
60 |
60 |
55 |
44 |
10 |
8.0 |
replace |
61 |
17 |
49 |
No |
48 |
10.1 |
61 |
61 |
49 |
45 |
10.3 |
8.0 |
supports |
49 |
17 |
49 |
No |
36 |
10.1 |
49 |
49 |
49 |
36 |
10.3 |
5.0 |
toString |
8 |
12 |
3.6 |
No |
≤12.1 |
5.1 |
4.4 |
18 |
4 |
≤12.1 |
5 |
1.0 |
toggle |
8 |
12 |
3.6 |
10 |
≤12.1 |
5.1 |
3 |
18 |
4 |
≤12.1 |
5 |
1.0 |
trim_whitespace |
48 |
12 |
51 |
10 |
35 |
10 |
48 |
48 |
51 |
35 |
10 |
5.0 |
value |
50Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface. |
17 |
47 |
No |
37Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface. |
10 |
50Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface. |
50Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface. |
47 |
37Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface. |
10 |
5.0Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface. |
values |
42 |
16 |
50 |
No |
29 |
10.1 |
42 |
42 |
50 |
29 |
10.3 |
4.0 |