Master the classList Property in JavaScript

What is classList in JavaScript?

The clasList property in JavaScript is a read-only property of the element interface that returns live DOMTokenList object representing the class attributes of the element

The clasList property is a convenient alternative to accessing an element’s list of classes as a space delimited string via the className property.

The clasList property has the following methods:

• add( ): adds one or more classes to the element
• remove( ): removes one or more classes from the element.
• toggle( ): toggles the presence of a class on the element.
• contains( ): returns a boolean value indicating whether the element has a specified class
• item( ): return the class at the specified index.
• length( ): returns the number of classes on the element.

How to use classList in JavaScript?

To use the classList property, you first need to get the classList object of the element you want to work with. You can do this using the classList property.

          
            const element = document.querySelector('element');
            const classList = element.classList;
          
        

Once you have the classList object, you can use its methods to add, remove, toggle, and check for classes on the element.

For example, the following code adds the my-class class to the element.

clasList.add("my-class");

The following code removes the my-class from the element.

classList.remove('my-class');

The following code toggles the presence of the my-class on the element.

classList.toggle('my-class');

The following code checks whether or not the element has the my-class class.

const hasClass = classList.contains("my-class");

The following code returns the class at the specified index

const className = classList.item(0);

The following code returns the number of classes on the element.

const numberOfClasses = classList.length;

Examples of classList in JavaScript

Here are some Examples of how to use the classList property in JavaScript.

          
            const element = document.querySelector("element");
            element.addEventListener("click", function(){
              element.classList.add("active");
            });
          
        

          
            const element = document.querySelector("element");
            element.element.addEventListener("click", function(){
              element.classList.remove("active");
            });
          
        

          
            const element = document.querySelector("element");
            element.addEventListener("click", function(){
              element.classList.toggle("active");
            });
          
        

          
            const element = document.querySelector("element");
            element.addEventListener("click", function(){
              cosnt hasClass = element.classList.contains("active");
            });
          
        

          
            const element = document.querySelector("element");
            element.addEventListener("click", function(){
              cosnt className = element.classList.item(0);
            });
          
        

          
            const element = document.querySelector("element");
            element.addEventListener("click", function(){
              cosnt numberOfClasses = element.classList.length;
            });