How to Check the Specific Element in the JavaScript Class?

At times, we must verify that the element does have the class 'className' ( Any specific name ). It is included the method of the class List entity. It can be used to determine whether an element has a particular class name. The single method is used to check the required element in the JavaScript class.

Syntax

The following syntax shows the available

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 passed to the contains() method of the classList property of the element in this method. The method returns true if the element includes the className. Otherwise, false is returned.

Consider the following div> element, which has the classes secondary and info.

Use the JavaScript command to see if the second class is present in the div element:

const div_tag = document.querySelector('div');
div_tag.classList.contains('sec_info');

In this example, we choose the div using the querySelector() function and check to see if the second class is present in its class list using the contains() method.

Due to the absence of the error class on the div> element, the following example returns false.

const div_tag = document.querySelector('div');
div_tag.classList.contains('error');

We can use it as a reference for the availability in the html tag.

Examples

The following examples show specific elements of the page using JavaScript.

Example 1

The following example shows available classes in the element using the JavaScript method. Here we use the alert tag to display the output message.

<!DOCTYPE html>
<html>
<body>
<h1 id="myfiles" class="myfiles">Welcome To Javatpoint</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 given image shows the available class result as an output.

How to Check the Specific Element in the JavaScript Class

Example 2

The following example shows available classes in the element using the JavaScript method. Here, the class name is available in the element shown using the innerHTML function.

<!DOCTYPE html>
<html>
<body>
<h1 id="myfiles" class="myfiles">Welcome To Javatpoint</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 given image shows the available class result as an output.

Example 3

The following example shows available classes in the element using the JavaScript method. Here, the class name is not available in the element shown using the innerHTML function.

<!DOCTYPE html>
<html>
<body>
<h1 id="files" class="files">Welcome To Javatpoint</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 given image shows the available class result as an output.

Example 4

The following example shows available classes in the element using the JavaScript method. Here, the first class name is available in the element and the second class name is not available in the Html element. The result values are displayed using the innerHTML function.

<!DOCTYPE html>
<html>
<body>
<h1 id="files" class="files">Welcome To Javatpoint</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 given image shows the available class result as an output.

Conclusion

The contains() function in JavaScript is used to check required class is available or not in the Html element. It is an easy, simple, and user-friendly method to run JavaScript code for checking the class name.

Next TopicJavaScript NaN Function

← prev next →