HTML DOMTokenList
DOMTokenList
A DOMTokenList is a set of space separated tokens.
A DOMTokenList can be accessed by index (starts at 0).
The length Property returns the number of tokens in a DOMTokenList.
Note
The The classList Property of an HTML element represents a DOMTokenList.
DOMTokenList Properties and Methods
| Name | Description |
|---|---|
| add() | Adds one or more tokens to the list |
| contains() | Returns true if the list contains a class |
| entries() | Returns an Iterator with key/value pairs from the list |
| forEach() | Executes a callback function for each token in the list |
| item() | Returns the token at a specified index |
| keys() | Returns an Iterator with the keys in the list |
| length | Returns the number of tokens in the list |
| remove() | Removes one or more tokens from the list |
| replace() | Replaces a token in the list |
| supports() | Returns true if a token is one of an attribute's supported tokens |
| toggle() | Toggles between tokens in the list |
| value | Returns the token list as a string |
| values() | Returns an Iterator with the values in the list |
Examples
Add a "myStyle" class to an element:
element.classList.add("myStyle");
Try it Yourself »
Remove the "myStyle" class from an element:
element.classList.remove("myStyle");
Try it Yourself »
Toggle "myStyle" on and off:
element.classList.toggle("myStyle");
Try it Yourself »
More examples below.
Not an Array
A DOMTokenList is not an Array!
A DOMTokenList may look like an array, but it is not.
You can loop through a DOMTokenList and refer to its token with an index.
But you cannot use Array methods like push(), pop(), or join() on a DOMTokenList.
Add multiple classes to the an element:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Try it Yourself »
Remove multiple classes from an element:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Try it Yourself »
Get the number of class names for an element:
let numb = element.classList.length;
Try it Yourself »
Get the class names of the "myDIV" element:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Try it Yourself »
Does an an element has a "myStyle" class?
let x = element.classList.contains("myStyle");
Try it Yourself »
Remove "anotherClass" if an element has a "myStyle" class.
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Try it Yourself »
Toggle between classes to create a dropdown button:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Try it Yourself »
Create a sticky navigation bar:
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Try it Yourself »