HTML - DOM classList Property

Quiz

The HTML DOM classList property is a read-only property that provides a way to access and manipulate the list of classes of an HTML element.

This property returns a DOMTokenList object that contains the classes of the specified element, allowing you to easily add, remove, toggle, and check for the presence of classes.

Syntax

Following is the syntax of the HTML DOM classList property −

element.classList;

Parameters

Since it is a property, it does not accept any parameters.

Return Value

This property returns a DOMTokenList object, which represents a collection of class names from the class attribute of the element.

Properties and Methods

Following is a list of properties and methods that you can use to add, toggle or remove CSS classes from the list −

Method/Properties	Description
add()	Modifies the element's classList by adding one or more classes.
remove()	Modifies the element's classList by removing one or more classes.
toggle()	Modifies the element's classList by toggling a class on or off.
contains()	Checks if the element's classList contains a specific class.
item()	Access the class at a particular index in the element's classList.
replace()	Replaces one class with another in the element's classList.
entries()	Returns an object that iterates over the class list as key-value pairs.
keys()	Returns an object that iterates over each index of the class list.
values()	Returns an object that allows iterating over the class list's values (class names).
forEach()	Executes the given function once for each class in the classList.
length	Returns the number of classes in the element's classList.

Example 1: Adding a new class to "div" Element

The following program demonstrates the usage of the HTML DOM classList property. It adds a class to a <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       color: white;
       padding: 10px;
   }
   button{
     padding: 8px 12px;
     margin: 10px 0px;
   }
</style>
</head>
<body>
<p>Click the below to add a class ("highlight") to the "div" element.</p>    
<div id="myDiv">Tutorialspoint ("TP")</div>
<button onclick="addClasses()">Add Class</button>
<script>
   function addClasses() {
      let divElement = document.getElementById('myDiv');
      // Adding classes to the element by using add() method
      divElement.classList.add('highlight');
   }
</script>
</body>
</html>

The above program adds a "highlight" class to a "div" element.

Example 2: Removing specified class from the Paragraph ("p")

Following is another example of the HTML DOM classList property. We use this property, along with its "remove()" method, to remove a specified class from the paragraph (<p>) −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       color: white;
       padding: 10px;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to remove highlight from the paragraph.</p>
<p id="paragraph" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="removeClass()">Remove Highlight Class</button>
<script>
   function removeClass() {
      var paragraph = document.getElementById("paragraph");
      paragraph.classList.remove("highlight");
   }
</script>
</body>
</html>

The above program removes the specified class from the paragraph.

Example 3: Switching Between Highlight paragraph

The example below demonstrates the usage of the "toggle()" method of the classList property. This method allows us to switch the background color of the text within the paragraph (<p>) −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the button to add or remove the highlight...</p>
<p id="paragraph">Click to toggle highlight:</p>
<button onclick="document.getElementById('paragraph').classList.toggle('highlight')">Toggle Highlight
</button>
</body>
</html>

The program above adds and removes the "highlight" class from a paragraph by clicking the button.

Example 4: Checking the Class on Element

The example below uses the "contains()" method of classList property to check whether the element has class "highlight" applied or not −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to check whether the paragraph contains the "highlight" class.</p>
<p id="pg" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="checkHighlight()">Check Highlight Class</button>
<script>
   function checkHighlight() {
      var paragraph = document.getElementById("pg");
      if (paragraph.classList.contains("highlight")) {
         alert("Yes, paragraph contains 'highlight' class");
      } else {
         alert("No, paragraph contains 'highlight' class");
      }
   }
</script>
</body>
</html>

Example 5: Accessing a Specific Class

This example shows the usage of the "item()" method of the classList property, which allow us to access individual class name applied to an element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       padding: 10px;
       color: white;
   }
   .italic {
       font-style: italic;
   } 
</style>
</head>
<body>
<h2>Accessing Specific Classes</h2>
<p id="paragraph" class="highlight italic">This paragraph has multiple classes.</p>
<button onclick="getClassNames()">Get Classes</button>
<p id="classOutput"></p>
<script>
   function getClassNames() {
      var paragraph = 
      document.getElementById("paragraph");
      var classList = paragraph.classList;
      
      // Accessing specific classes by index
      var firstClass = classList.item(0);  
      var secondClass = classList.item(1);  
      var thirdClass = classList.item(2);  
      
      // Displaying the classes
      document.getElementById("classOutput").textContent="First class: " 
      + firstClass + ", Second class: " 
      + secondClass;
   }
</script>
</body>
</html>

Example 6: Replacing the Class Dynamically

This example shows how to use the "replace()" method of the classList property to replace a class dynamically from an element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
   .italic {
       background-color: green;
       padding: 10px;
       color: white;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p id="paragraph" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="replaceClass()">Replace Highlight with Italic</button>
<script>
   function replaceClass() {
      var paragraph = document.getElementById("paragraph");
      paragraph.classList.replace("highlight","italic");
   }
</script>
</body>
</html>

Example 7: Iterating over the classes

This example demonstrates how the "forEach()" method of the classList property can be used to iterate through each dynamically applied class on an element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM classList</title>
<style>
   .red {
       color: red;
       padding: 10px;
   }
   .bold {
       font-weight: bold;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>It will iterate over the class values..</p> 
<div id="ex" class="red bold underline">Dynamic Classes</div>
<button onclick="applyForEach()">Apply forEach</button>
<div id="output"></div>
<script>
   function applyForEach() {
      const element = document.getElementById('ex');
      let res="<p><strong>ClassList Classes:</strong></p>";
      element.classList.forEach(className => {
      res += `<p>${className}</p>`;
      });
      document.getElementById('output').innerHTML=res;
   }
</script>
</body>
</html>

Example 8: Retrieving the Number of Classes

This example shows how to use the HTML DOM classList.length property to retrieve the number of classes applied to an element (i.e., <div>) −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM classList</title>
<style>
   .red {
       color: red;
       padding: 10px;
   }
   .b {
       font-weight: bold;
   }
   .udl {
       text-decoration: underline;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to displays number of classes applied...</p>
<div id="ex" class="red b udl">Dynamic Classes</div>
<button onclick="displayClassListLength()">Display ClassList Length</button>
<div id="output"></div>
<script>
   function displayClassListLength() {
      const element = document.getElementById('ex');
      const classLength = element.classList.length;
      const res = `<p>Number of Classes: ${classLength}</p>`;
      document.getElementById('output').innerHTML = res;
   }
</script>
</body>
</html>

Supported Browsers

Property
classList	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page