Skip to main content

Using classList in JavaScript DOM (Live Playground)

In this tutorial, we will learn how to use the classList property in JavaScript to add, remove, toggle, and check the presence of classes for an HTML element. We'll cover the basics of the classList property and provide sample code with explanations.

What is classList?​

The classList property is a built-in JavaScript DOM property that provides a convenient way to manipulate the classes of an HTML element. It is an object with methods to add, remove, toggle, and check the presence of classes, allowing you to dynamically update your web page's content and styling based on user interactions or other events.

Sample Code: Using classList​

Let's say we have the following HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>classList Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>
  </body>
</html>

To use classList to manipulate the class attribute of an HTML element, you'll need to include a JavaScript <script> tag in your HTML document. For this example, we will add an inline script, although it's generally recommended to use external JavaScript files for larger projects.

Here's how you can use the classList property to add, remove, toggle, and check the presence of classes for the p element with the ID firstParagraph:

<!DOCTYPE html>
<html>
  <head>
    <title>classList Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>

    <script>
      // Select the element with the ID "firstParagraph"
      var firstParagraph = document.getElementById('firstParagraph');

      // Use classList.add to add a new class
      firstParagraph.classList.add('newClass');
      console.log("After adding 'newClass':", firstParagraph.className);

      // Use classList.remove to remove a class
      firstParagraph.classList.remove('mainParagraph');
      console.log("After removing 'mainParagraph':", firstParagraph.className);

      // Use classList.toggle to toggle a class
      firstParagraph.classList.toggle('newClass');
      console.log("After toggling 'newClass':", firstParagraph.className);

      // Use classList.contains to check the presence of a class
      var hasNewClass = firstParagraph.classList.contains('newClass');
      console.log("Contains 'newClass':", hasNewClass);
    </script>
  </body>
</html>

After running this code, the console will display:

After adding 'newClass': mainParagraph newClass
After removing 'mainParagraph': newClass
After toggling 'newClass':
Contains 'newClass': false

The p element with the ID firstParagraph will now have a class attribute value of "" (an empty string) as a result of our manipulations using the classList property.

Live Playground, Try it Yourself

Advanced Usage: classList and Multiple Classes​

The classList property also allows you to manipulate multiple classes at once. For example, you can add or remove multiple classes in a single call:

firstParagraph.classList.add('classOne', 'classTwo', 'classThree');
firstParagraph.classList.remove('classOne', 'classThree');

In this example, classOne, classTwo, and classThree will be added to the element, then classOne and classThree will be removed, leaving only classTwo.

Conclusion​

The classList property is a powerful and convenient tool for manipulating the classes of HTML elements in the DOM. By mastering this property and its methods, you can dynamically update your web page's content and styling based on user interactions, events, or other conditions. Experiment with the different methods provided by the classList property to build more interactive and engaging web pages.