Home >Web Front-end >JS Tutorial >How to check if a given element has a specified class in JavaScript?

How to check if a given element has a specified class in JavaScript?

王林forward: 2023-09-08 08:49:02775browse

如何在 JavaScript 中检查给定元素是否具有指定的类？

Overview

To perform a certain task first, we need to access that specific element by its class or ID, so before accessing that element, we check if the class exists in that specific element. The classList object contains the built-in method classList.contains() in JavScript. This method determines whether the given element belongs to the specified class. The whole process will happen because first we have to access the element through getElementById(), getElementsByClassName() or any other method. After accessing it we have to check the class using classList.contains() method.

grammar

The syntax used in this question is -

classList.contains(className);

classList - This is an object in JavaScript that receives an array of classes contained in a specific element.
contains - This is a method of classList object that checks whether the specified class is present in the given element.
className - This is the specified name that we have to search for in the given element.

algorithm

Step 1 - Create some HTML elements inside the body tag. Assign some class to each element.
Step 2 - Specify the onclick() event method in the HTML button.
Step 3 - Create a JavaScript arrow function. Access any HTML and store it in a variable.
Step 4 - Use the contains() method of the classList object. Pass variables as arguments to the contains() method.
Step 5 - If it returns true then the specific class exists in the HTML element, else if it returns false then the specific class does not exist in the element.

Example 1: When the element contains the specified class

We used the "

" tag in the body tag, which contains the class name: class = "my-para first lorems", so these are the class names. Our task is to check the element to see if it contains the specified element. To do this, we use the contains() method, which is a method of the classList object. Therefore, the class we want to check is passed as a parameter to the "contains()" method, which checks the certainty of the class.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for specified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>
      
      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("my-para");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      
      </script>
   </body>
</html>

The output of the above example, because the output of "Elements contains specified class" is true.

Example 2: When the element does not contain the specified class

The following image shows "Element does not contain the specified class", which means that when classList.contains() is checked, it must have returned false. Therefore the error condition has terminated.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for pecified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>

      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("mypara");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      </script>
   </body>
</html>

in conclusion

The return type of classList is DOMTokenList, which is an array type. It contains the list of classes present in that particular element. The DOMTokenList can be viewed by iterating it using any for loop or map.

var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
   console.log(element);
});

The "contains()" method returns a Boolean result, which is true or false. The classList object contains an array of classes. So when the contains() method checks the specified class, it checks the DOMTokenList and makes a decision on its behalf and returns true or false.

The above is the detailed content of How to check if a given element has a specified class in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html for 循环 class 布尔类型对象事件算法

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to check if matrix is upper triangularNext article：JavaScript program to check if matrix is upper triangular

See more