How does classList Work in JavaScript?
Published: 2023-01-11 10:19:53

In this article, we are going to explore classList property to work with the CSS classes of an element.

JavaScript's ClassList property is a way to create CSS classes dynamically. It also can remove, add, or toggle CSS classes for a given DOM element. we can retrieve all the classes that an element has and then use them to modify the appearance or behavior of that element. it is a read-only property of an HTML element that holds the class names of the element currently selected.

Suppose you have the below element in your HTML



<body>
  <div id="main" class="flex justify-center items-center"></div>
</body>
you can find the <div> element above using the document.getElementById() method, then you can get the class names of the element using classList property.



const div = document.getElementById("main");
console.log(div.classList); // ["flex", "justify-center", "items-center"]

//using the loop to iterate through the classlist
for (let cls of div.classList) {
    console.log(cls); // "flex" "justify-center"  "items-center"
}
If you want to manipulate the HTML element’s classes, you need to use the methods included in the classList property.

contains()

add()

replace()

remove()

toggle()

Let’s explore these methods one by one.

Contains
Sometimes you need to check to see if an element has a specific class so that you can perform a certain operation. You can use contains method and pass the name of the class you want to check. The contains() method will check on your element’s class attribute and check if it contains the specified class name. if the class is in the classList it returns true and false if it is not the case.



const div = document.getElementById("main");
div.classList.contains("dark"); // false
div.classList.contains("flex"); // true
Add
The add() method allows you to add new class names to an element. You just need to pass the class names you want to add as a comma-delimited string

Note that if the class is already present. Then it won’t be added again to the element

Here’s an example of adding a new class name to the above div element above



const div = document.getElementById("main");
// adding dark class
div.classList.add("dark");
Replace
The replace method is used to replace an existing class name with a new one only if the class to be replaced is already present in the element. This method will also return true if the replacement was successful or false if the element does not contain the class to be replaced.

Here is an example to showcase how this works.



const div = document.getElementById("main");
// replacing flex class
element.classList.replace('flex', 'block')
Remove
The replace method works like the add method but instead of adding it allows you to remove one or more class names from an HTML element.

Just like the add method You can pass as many class names that you want to remove as you need. if the class name you want to remove is not present in the element’s class attribute, JavaScript will continue and try to remove the next class name you passed into the method.



const div = document.getElementById("main");
// remove three class names
div.classList.remove("flex", "justify-center", "items-center");
Toggle
This method lets you toggle a class on/off depending on if the class is already on the element. If the class name you want to toggle is already present inside the element, the toggle() method will remove it, and vice versa.

The toggle() method will return false If the class name is removed and true when the class name is added.

Here is a quick example



const div = document.getElementById("main");
paragraph.classList.toggle("flex"); // false
paragraph.classList.toggle("flex"); // true
Here is a real-world example that uses the toggle method