How to test if an element contains class in JavaScript in HTML?

Javascript Web Development Front End Technology

In JavaScript, we can check for particular class whether it is contained by an HTML element or not, in the HTML document. During the development of the web page, a developer uses many classes and sometimes assign similar classes to different elements which requires same styles in CSS. In this process, the developer may forget the class given to the particular element, then the developer may need check for the class inside the element using the JavaScript. In this tutorial, we are going to discuss how we can test if an element contains class in JavaScript.

To check for the class, we can use the contains() method of the classList property of an element.

Let us discuss the contains() method in details −

Using the contains() Method

The contains() is an method of classList property of an element, which contains a list of all the classes contained by the targeted element, and to check for the particular class in the list we can use the contains() method, which takes the name of the class as a parameter in the string format and returns the boolean value. It returns true, if the element contains the passed class name, otherwise it returns false.

Syntax

Following syntax is used to implement the contains() method on the classList property −

var var_name = targetedElement.classList.contains("className");

In this syntax, we used the classList on the element and then check for the particular class by passing it inside the contains() method whether the targeted element contains it or not.

Let us understand it by practically implementing it inside a code example −

Algorithm

Step 1 − In the first step, we will define an HTML element with a particular class given inside it.
Step 2 − In the next step, we will grab the targeted element by its Id and then use the classList property and the contains() method on it.
Step 3 − In the last step, we will define a JavaScript function that will be invoked on click to the button and it contains the logic for displaying the output on the user screen.

Example 1

The below example will illustrates how we can use the contains() method to check for the class contained by an element or not −

<!DOCTYPE html>
<html>
<body>
   <h2>Testing if an element contains class in JavaScript in HTML</h2>
   <p id="result" class="myClass">We will check the class for this element. </p>
   <button onclick="display()">click to check the class</button>
   <script>
      var myElement = document.getElementById("result");
      var classTest = myElement.classList.contains("myClass");
      function display() {
         if (classTest) {
            myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
         } else {
            myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
         }
      }
   </script>
</body>
</html>

In the above example, we used the contains() method of the classList property on the targeted element and pass the class name as a string to the method to check whether the element contains it or not.

Let us discuss one more example, where we will check for the behaviour of the contains() method when the targeted element contains more than one class.

In this algorithm of this example, we just need to add more than one class in the defined element and rest if the things are same as in previous example.

Example 2

Below example will show the behaviour of the contains() method if an element contains multiple classes −

<!DOCTYPE html>
<html>
<body>
   <h2>Testing if an element contains class in JavaScript in HTML </h2>
   <p id="result" class="myClass class1 class2">We will check the class for this element. </p>
   <button onclick="display()">click to check the class</button>
   <script>
      var myElement = document.getElementById("result");
      var classTest = myElement.classList.contains("myClass");
      function display() {
         if (classTest) {
            myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
         } else {
            myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
         }
      }
   </script>
</body>
</html>

In this example, we defined the HTML element with multiple classes and then use the same logic which we use in previous example to check whether the class is contained by the element or not. We can clearly see that the output of both the example is same, that means the contains() method can also check for the particular class if there are multiple classes contained by an element.

In this tutorial, we discussed about the contains() method of the classList property of an element to test if an element contains the class in JavaScript. We have discussed the behaviour of this method in different scenarios, where the element contains the multiple classes as well as single class by implementing them practically with help of code example associated to each scenario.