Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check the given element has the specified class in JavaScript?
Overview
To perform a certain task first we need to access that particular element by its class or by id so before accessing the element we check whether that class is present in that particular element or not. The classList object contains the built-in method classList.contains() in JavScript. This method determines whether the given element belongs to the specified class. This whole process will take place, as first we have to access that element by getElementById(), getElementsByClassName(), or any other method. After accessing it, we have to check for the class with the classList.contains() method.
Syntax
The syntax used in this problem is −
classList.contains(className);
classList − This is an object in JavaScript, which receives the array of the class contained in an specific element.
contains − This is a method of classList object, which checks whether the specified class is present in the given element or not.
className − This is that specified name for which we have to search in the given element.
Algorithm
Step 1 − Create some HTML element inside the body tag. Specify each element with some class.
Step 2 − Specify onclick() event method in the HTML button.
Step 3 − Create a JavaScript arrow function. Access any HTML and store it in the variable.
Step 4 − Use contains() method of classList object. Pass the variable in a contains() method as a parameter.
Step 5 − If it returns true then a particular class exists in a HTML element, otherwise if it returns false then the particular class does not exist in an element.
Example 1: When an element contains the specified class
We've taken the "<p>" tag inside the body tag, which contains the class name: class = "my-para first lorems," so these are the class names. Our task is to check for the element to see if it contains the specified element or not. So for that, we used the contains() method, which is the method of the classList object. So the class that we have to check for is passed in the "contains()" method as an argument, which checks for 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, as the output is true with “Elements contains specified class”.
Example 2: When element does not contains the specified class
The image below shows that "Element does not contain the specified class," implying that when classList.contains() was checked, it must have returned false. So the false condition has been 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>
Conclusion
The return type of classList is the DOMTokenList, which is an array type. It contains the list of classes that are present in that particular element. The DOMTokenList can be seen by iterating through it using any for loop or map.
var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
console.log(element);
});
The “contains()” method returns the Boolean type of result as true or false. The classList object contains the array of classes. So when the contains() method checks for the specified class, it checks in the DOMTokenList, and on that behalf, it takes a decision and returns true or false.
667 Views
