HTML DOMTokenList Reference Manual

DOMTokenList

DOMTokenList It is a set of tokens separated by spaces.

DOMTokenList can be accessed by index (starting from 0).

length propertyReturns the number of tokens in the DOMTokenList.

Note:Of the HTML element classList propertyRepresents a DOMTokenList.

DOMTokenList properties and methods

Name Description
add() Adds one or more tokens to the list.
contains() Returns true if the list contains an object.
entries() Returns an iterator with key/value pairs from the list.
forEach() Execute a callback function for each token in the list.
item() Return the token at the specified index.
keys() Return an iterator containing the keys in the list.
length Return the number of tokens in the list.
remove() Remove one or more tokens from the list.
replace() Replace tokens in the list.
supports() Return true if the token is one of the supported attribute tokens.
toggle() Toggle between tokens in the list.
value Return the token list as a string.
values() Return an iterator with the values in the list.

Instance

Example 1

Add the class "myStyle" to the element:

element.classList.add("myStyle");

Try It Yourself

Example 2

Remove the class "myStyle" from the element:

element.classList.remove("myStyle");

Try It Yourself

Example 3

Toggle on and off "myStyle":

element.classList.toggle("myStyle");

Try It Yourself

More examples are provided below the page.

Not an array

DOMTokenList is not an array!

DOMTokenList may look like an array, but it is not.

You can iterate over DOMTokenList and use indices to reference its tokens.

However, you cannot use array methods on DOMTokenList, such as push(), pop(), or join().

Instance

Example 1

Add multiple classes to the element:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Try It Yourself

Example 2

Remove multiple classes from the element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Try It Yourself

Example 3

Get the number of class names of the element:

let numb = element.classList.length;

Try It Yourself

Example 4

Get the class name of the element "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Try It Yourself

Example 5

Get the first class of the element:

let className = element.classList.item(0);

Try It Yourself

Example 6

Does the element have the "myStyle" class?

let x = element.classList.contains("myStyle");

Try It Yourself

Example 7

If the element has the "myStyle" class, remove "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Try It Yourself

Example 8

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

Example 9

Create a Sticky Navigation Bar:

// Get the navigation bar
const navbar = document.getElementById("navbar");
// Get the offset position of the navigation bar
const sticky = navbar.offsetTop;
// Add the sticky class to the navigation bar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Try It Yourself