JavaScript - DOM DOMTokenList

Previous
Quiz
Next

DOMTokenList

The DOMTokenList is an interface in DOM (Document Object Model) which represents a set of space-separated tokens (classes). Generally, it is used for managing the classes in HTML elements.

It may look like an array, but it is not. Similar to an array, you can loop through a DOMTokenList and access its tokens by index. However, you cannot use array methods such as push(), pop(), or join() on a DOMTokenList.

You can retrieve individual tokens using their numerical index in the DOMTokenList. For example, element.classList[0] would give you the first-class name of an element.

The following diagram clearly explains the JavaScript DOMTokenList interface. As you can see a DOMTokenList can contain a list of values (tokens) −

DOMTokenList

The following interactive example will use 2-3 important methods as button functionalities. Whenever the user interacts with the page, the respective method will be performed −

Click on the below buttons to see the changes.....

Tutorialspoint

Below is the explanation of the example above:

  • If you click the "Add" button, the 'DOMTokenList' add() method will be called, and the class 'tp' will be added to "tutorials".
  • If you click the "Remove" button, the remove() method will be called to remove the added class.
  • If you click the "Toggle" button, the toggle() method will be called, which will add and remove the class alternately.

JavaScript DOMTokenList Methods

The DOMTokenList is an interface that represents a set of space-separated tokens. These tokens can be seen in properties such as classList, HTMLLinkElement, relList, and many others.

Following is a list of methods provided by the JavaScript DOMTokenList −

Sr.No Method & Description
1 add()

This method adds one or more tokens specified in the parameter to the DOMTokenList.
2 contains()

This method checks whether the list contains the specified token, and returns a boolean value accordingly.
3 entries()

This method returns an iterator that is allowing to go through all the key/value pairs.
4 forEach()

This method calls the callback function mentioned in the parameter once for each value pair in the list in the order of their insertion.
5 item()

This method returns a token from the DOMTokenList specified by the index in the parameter.
6 keys()

This method returns an iterator which allows you to go through all the keys contained in the token list.
7 remove()

This method removes one or more tokens specified in the parameter to the DOMTokenList.
8 replace()

This method replaces the existing token in DomTokenList with a new token specified in the parameter.
9 supports()

This method checks whether the token specified in the parameter is supported in DOMTokenList.
10 toggle()

This method dynamically adds or removes a token or class from an element class attribute.
11 values()

This method returns an iterator allowing us to go through all values contained in the token list.

JavaScript DOMTokenList Properties

Following is a list of properties provided by the JavaScript DOMTokenList −

Sr.No Properties & Description
1 length

This method returns the number of tokens in a token list.
2 value

This method returns the DOMTokenList serialized as a string.

Example 1: Retrieving the length of the DOMTokenList.

The following example demonstrates the usage of the DOMTokenList length property −

<!DOCTYPE html>
<html lang="en">
<body>
    <p>DOMTokenList Example</p>
    <div id="myList" class="tp1 tp2 tp3">
        I'm inside div.
    </div>
    <span id="result"></span>
    <script>
        let list = document.getElementById("myList").classList;
        document.getElementById('result').innerHTML = "DOMTokenList length (number of classes) is : " + list.length;
    </script>
</body>
</html>

The above program returns the length of the DOMTokenList (or number of classes) −

Print Page
Previous
Next
Advertisements