JavaScript 如何检查类中的特定元素

有时，我们必须验证该元素是否具有类名’className’（任何特定名称）。它包含在类List实体的方法中。它用于确定元素是否具有特定的类名。单个方法用于检查JavaScript类中所需的元素。

语法

以下语法显示了可用的

element.classList.contains("class-name")

它返回一个布尔值结果。如果元素具有类名，则返回true；否则返回false。
在这里，我们将制作一个简单的HTML页面，并添加一个具有类名和id名为main的元素。
寻找具有类名main的h1是我们的责任。

如何操作JavaScript的”contains”方法

在该方法中，将className传递给元素的classList属性的contains()方法。如果元素包含className，则返回true。否则，返回false。

考虑以下具有类secondary和info的div元素。

<div class="sec_info"> value </div>

使用JavaScript命令，查看div元素中是否存在第二个类：

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

在这个示例中，我们使用querySelector()函数选择div，并使用contains()方法检查其类列表中是否存在第二个类。

由于div元素上没有错误类，以下示例返回false。

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

我们可以将其用作html标签中的可用性参考。

示例

以下示例展示了使用JavaScript来显示页面的特定元素。

示例1

以下示例显示了使用JavaScript方法在元素中可用的类。这里我们使用alert标签来显示输出消息。

<!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>

输出

给定的图片显示了可用的类结果作为输出。

JavaScript 如何检查类中的特定元素

示例2

以下示例显示使用JavaScript方法的元素中可用的类。在这里，类名通过innerHTML函数显示在元素中。

<!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>

输出

给定的图像显示可用的类结果作为输出。

JavaScript 如何检查类中的特定元素

示例3

以下示例显示了使用JavaScript方法在元素中的可用类。在这里，使用innerHTML函数无法显示元素中的类名。

<!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>

输出

给定的图像显示了可用的类别结果作为输出。

JavaScript 如何检查类中的特定元素

示例4

以下示例显示了使用JavaScript方法在元素中可用的类。这里，第一个类名在元素中可用，而第二个类名在Html元素中不可用。结果值使用innerHTML函数显示。

<!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>

输出

给定的图像显示了可用的类别结果作为输出。

JavaScript 如何检查类中的特定元素