Occasionally, it is necessary to confirm that the element possesses the class 'className' (or any designated name). This functionality is part of the List entity class method. It serves to ascertain if an element contains a specific class name. The solitary method is employed to validate the desired element within the JavaScript class.
Syntax
The following syntax shows the available
element.classList.contains("class-name")
- It gives back a Boolean result. It returns true if the element has the class name; otherwise, it returns false.
- Here, we will make a straightforward HTML page and add an element with the class and id names main.
- Finding the h1 that has the class name main is our responsibility.
How to Operate JavaScript "contains" Method
The className is supplied to the contains function of the classList attribute of the element in this function. This method yields true if the element possesses the specified className; if it does not, false is returned.
- Examine the following div> element, which contains the classes secondary and info.
- Utilize the JavaScript command to check for the existence of the second class within the div element:
- In this scenario, we utilize the querySelector method to select the div element and then verify whether the second class exists within its class list by employing the contains method.
<div class="sec_info"> value </div>
const div_tag = document.querySelector('div');
div_tag.classList.contains('sec_info');
As the error class is not present on the div> element, the example provided below yields a result of false.
const div_tag = document.querySelector('div');
div_tag.classList.contains('error');
It can serve as a point of reference for the accessibility within the HTML tag.
Examples
The subsequent examples illustrate particular components of the webpage utilizing JavaScript.
Example 1
The example provided illustrates the classes that are accessible within the element by utilizing a JavaScript method. In this instance, we employ the alert function to present the output message.
<!DOCTYPE html>
<html>
<body>
<h1 id="myfiles" class="myfiles">Welcome To Example</h1>
<script>
let elem_files = document.getElementById("myfiles");
let isMain_files = elem_files.classList.contains("myfiles");
if (isMain_files) {
alert("the required class name is Found");
} else {
alert("the required class name is not Found");
}
</script>
</body>
</html>
Output
The displayed image illustrates the results of the available class as an output.
Example 2
The subsequent example illustrates the classes that can be accessed within the element through the use of a JavaScript method. In this case, the class name is displayed within the element by utilizing the innerHTML function.
<!DOCTYPE html>
<html>
<body>
<h1 id="myfiles" class="myfiles">Welcome To Example</h1>
<h3 id="myfiles1" class="myfiles1"></h3>
<script>
let elem_files = document.getElementById("myfiles");
let isMain_files = elem_files.classList.contains("myfiles");
if (isMain_files) {
var result ="Available";
document.getElementById("myfiles1").innerHTML = result;
} else {
document.getElementById("myfiles1").innerHTML = result;
}
</script>
</body>
</html>
Output
The provided image illustrates the output showcasing the results of the available class.
Example 3
The example below demonstrates how to identify the classes present within an element using a JavaScript method. In this instance, the class name is not accessible within the element, as indicated by the usage of the innerHTML function.
<!DOCTYPE html>
<html>
<body>
<h1 id="files" class="files">Welcome To Example</h1>
<h3 id="myfiles1" class="myfiles1"></h3>
<script>
let elem_files = document.getElementById("myfiles");
let isMain_files = elem_files.classList.contains("myfiles");
if (isMain_files) {
var result ="Found the class name";
document.getElementById("myfiles1").innerHTML = result;
} else {
document.getElementById("myfiles1").innerHTML = result;
}
</script>
</body>
</html>
Output
The displayed image illustrates the output representing the results of the available class.
Example 4
The subsequent example illustrates the classes that can be found within the element by utilizing a JavaScript method. In this case, the initial class name is present within the element, whereas the second class name is absent from the HTML element. The resulting values are presented using the innerHTML function.
<!DOCTYPE html>
<html>
<body>
<h1 id="files" class="files">Welcome To Example</h1>
<h3 id="myfiles1" class="myfiles1"></h3>
<h3 id="myfiles2" class="myfiles2"></h3>
<script>
let elem_files1 = document.getElementById("files");
let isMain_files1 = elem_files1.classList.contains("files");
if (isMain_files1) {
var result1 ="Found the class name";
document.getElementById("myfiles2").innerHTML = result1;
} else {
document.getElementById("myfiles2").innerHTML = result1;
}
let elem_files = document.getElementById("myfiles");
let isMain_files = elem_files.classList.contains("myfiles");
if (isMain_files) {
var result ="Found the class name";
document.getElementById("myfiles1").innerHTML = result;
} else {
document.getElementById("myfiles1").innerHTML = result;
}
</script>
</body>
</html>
Output
The displayed image illustrates the output of the class results that are currently accessible.
Conclusion
The contains method in JavaScript serves the purpose of verifying whether a specific class exists within an HTML element. This method is straightforward, uncomplicated, and designed to be user-friendly, enabling developers to execute JavaScript code effectively to assess the presence of a class name.