极客笔记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，则HTML元素中不存在特定的类。
示例1：当元素包含指定的类时
我们在body标签内取了一个“
”标签，并且其中包含类名：class=”my-para first lorems”，所以这些是类名。我们的任务是检查元素是否包含指定的类。为此，我们使用了classList对象的contains()方法。因此，我们要检查的类作为参数传递给“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。