The JavaScript classList API

JavaScript is a programming language widely used to add interactivity and dynamics to web pages. One of the common operations in interacting with the DOM (Document Object Model) is the management of CSS classes on HTML elements. The classList API in JavaScript is a powerful tool for adding, removing, and manipulating CSS classes on HTML elements. In this article, we will explore in detail how to use the classList API to improve the manipulation of CSS classes in your web pages.

What is the classList API?

The classList API is an interface provided by JavaScript to manage the classes of an HTML element. This interface is available for any object of type Element in the DOM, which means you can use it to add, remove, check or modify CSS classes on any HTML element such as <div>, <p>, <span>, etc.

The classList API provides methods that greatly simplify the manipulation of CSS classes. Some of the main methods of the classList API include:

  1. add(class1, class2, ...): Adds one or more classes to the element. If a class already exists, it is ignored.

  2. remove(class1, class2, ...): Removes one or more classes from the element. Classes that do not exist on the element do not generate errors.

  3. toggle(class, force): Adds or removes a class depending on the value of force. If force is true, the class is added, if false, the class is removed. If force is not specified, the class is alternated, i.e. if it is present, it is removed, otherwise it is added.

  4. contains(class ): Tests whether an element has a specific class and returns true or false accordingly.

  5. item(index): Returns the class at the specified position as a string. This method is useful for accessing a specific class based on its position in the class list.

  6. replace(oldClass, newClass): Replaces an existing class with a new class.

Examples of using the classList API

To better understand how the classList API works, let's see some examples of use:

Add a class to an element


const myElement = document.getElementById('myElement');
myElement.classList.add('active');

In this example, we are adding the 'active' class to the HTML element with the ID 'myElement'.

Remove a class from an element


myElement.classList.remove('active');

In this example, we are removing the 'active' class from the element.

Toggle between classes


myElement.classList.toggle('active');

This code will add the 'active' class if it is not already present, and will remove it if it is already associated with the element.

Check the existence of a class


if (myElement.classList.contains('active')) {
     // Do something if the 'active' class is present
}

In this example, we are checking whether the element has the class 'active', and if so, we will perform a certain action.

Replace a class


myElement.classList.replace('active', 'inactive');

With this code, we are replacing the 'active' class with 'inactive' in the element.

Conclusions

The classList API in JavaScript is a very useful tool for manipulating CSS classes on HTML elements. It offers clear and simple methods for adding, removing, checking and replacing classes, making managing dynamic CSS interactions much easier. It is important to note that the classList API is supported by most modern browsers, making it a reliable choice for web development.

Learning to correctly use the classList API will allow you to improve the interactivity of your web pages and provide a smoother user experience through dynamically updating CSS classes.

Back to top