数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何在JavaScript中检查给定元素是否包含指定的类？
概述
为了执行特定任务，首先需要通过其类或ID访问该特定元素，因此在访问元素之前，我们检查该类是否存在于该特定元素中。classList 对象在 JavaScript 中包含内置方法 classList.contains()。此方法确定给定元素是否属于指定的类。整个过程将按以下步骤进行：首先，我们必须使用 getElementById()、getElementsByClassName() 或任何其他方法访问该元素。访问后，我们必须使用 classList.contains() 方法检查该类。
语法
此问题中使用的语法为：
classList.contains(className);
classList − 这是 JavaScript 中的一个对象，它接收特定元素中包含的类的数组。
contains − 这是 classList 对象的一个方法，它检查给定元素中是否存在指定的类。
className − 这是我们在给定元素中搜索的指定名称。
算法
步骤 1 − 在 body 标签内创建一些 HTML 元素。为每个元素指定一些类。
步骤 2 − 在 HTML 按钮中指定 onclick() 事件方法。
步骤 3 − 创建一个 JavaScript 箭头函数。访问任何 HTML 并将其存储在变量中。
步骤 4 − 使用 classList 对象的 contains() 方法。将变量作为参数传递给 contains() 方法。
步骤 5 − 如果返回 true，则 HTML 元素中存在特定类；否则，如果返回 false，则元素中不存在特定类。
示例 1：当元素包含指定的类时
我们在 body 标签内使用了 "<p>" 标签，它包含类名：class = "my-para first lorems"，所以这些是类名。我们的任务是检查元素是否包含指定的元素。为此，我们使用了 contains() 方法，它是 classList 对象的方法。因此，我们必须检查的类作为参数传递给 "contains()" 方法，该方法检查类的确定性。
<!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>
上述示例的输出为 true，并显示“元素包含指定的类”。
示例 2：当元素不包含指定的类时
下图显示“元素不包含指定的类”，这意味着当检查 classList.contains() 时，它必须返回 false。因此，false 条件已终止。
<!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>
结论
classList 的返回类型是 DOMTokenList，它是一种数组类型。它包含特定元素中存在的类的列表。可以通过使用任何 for 循环或 map 来迭代 DOMTokenList 来查看它。
var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
console.log(element);
});
“contains()” 方法返回布尔类型的结果 true 或 false。classList 对象包含类的数组。因此，当 contains() 方法检查指定的类时，它会在 DOMTokenList 中进行检查，并据此做出决定并返回 true 或 false。
832 次浏览
