How does classList Work in JavaScript?

You must be using light/dark modes on your device. Do you know how it is done? Well, classList in JavaScript helps in toggling this effect where it returns DOMTokenList(set of space-separated tokens). The classList in JavaScript is a read-only property that is used to modify CSS classes and returns CSS classes.

What is the JavaScript classList Property?

The Classlist in JavaScript property allows you to powerfully manipulate the classes(the group of HTML elements) attached to an HTML Element. You might have seen the like button on many websites where you click on the like button it shows thumbs up otherwise thumbs down, it is known as the toggle effect. To do so we have to change the class name of the element and it can be done using the classList toggle method. You can also use JavaScript classList property to add, remove, toggle, check if an element has a specified class, and even replace classes on an element.

Prerequisites

• You must know basic knowledge of JavaScript. How JavaScript works and how the code is written.
• You must also know the basic knowledge of CSS.

Syntax of the JavaScript classList property

The element here is an HTML element that has a class and to get the name of the class .classList is used.

Return value

It returns the list of class names of the elements in the form of an array. The manipulation of these classes is done by classList in JavaScript.

JavaScript classList Examples

Get the CSS Classes of an Element

Suppose there is a CSS class named container

To display the class list for the above div element we will use element.classlist.

Output

• We use the querySelector tool to select CSS selectors based on id, classes, types, etc. So in the above code, the id of the div element is used which is section1.
• Next, we iterate over the classlist elements and display the class in the console.

Add One or More Classes to the Class List of an Element

We can add one or more classes to the class list just by using the add() method.

Syntax

The classList property has add method where we can add different classes to an element by passing the parameter the classname of the element that you wish to add.

Suppose you want to add more classes in the above-mentioned CSS class named container, then we will use add in the following manner.

To add one class:

To add one or more classes:

Remove Element’s Classes

To remove CSS classes from the classList we use the remove() method.

Syntax

We can remove the classnames by passing the parameter - classname of the element in the remove method of the classList property.

Suppose you want to remove the CSS class - element from the CSS class list.

You can also remove multiple CSS classes from the class list as done in add().

Replace a Class of an Element

The replace() method is used to replace the already existing CSS class.

Syntax

We can replace the classnames by passing the parameter - 'the class name of the element that is to be replaced and the new classname in place of the old classname' using the replace() method of the classList property.

Check if an Element has a Specified Class

The contains() method is used to check if the element has the specified CSS class.

If the specified CSS class exists then the return value is true otherwise the contains() method returns false.

Toggle a Class

The toggle() method removes the CSS class from the class list of the element if the specified CSS class is present, if the specified CSS class is not present then it adds the CSS class.

Syntax

Suppose we created a website that has a switch to change the theme of the page. To do that we will use the toggle method where if the entered class is not present in the element then it will add the light-theme class entered in the toggle method. In the following example, we are using the toggle() method to toggle for the division CSS class from the element id section1.