如何在 HTML 中用 JavaScript 测试元素是否包含类?
在 JavaScript 中，我们可以检查 HTML 文档中特定类是否包含在 HTML 元素中。在网页开发过程中，开发人员使用许多类，有时会将类似的类分配给不同的元素，而这些元素在 CSS 中需要相同的样式。在此过程中，开发人员可能会忘记赋予特定元素的类，然后开发人员可能需要使用 JavaScript 检查元素内的类。在本教程中，我们将讨论如何在 JavaScript 中测试元素是否包含类。
要检查类，我们可以使用元素的 classList 属性的 contains() 方法。
让我们详细讨论一下 contains() 方法 -
使用 contains() 方法
contains() 是元素的 classList 属性的一种方法，它包含目标元素所包含的所有类的列表，要检查列表中的特定类，我们可以使用 contains() 方法，该方法以字符串格式将类的名称作为参数并返回 boolean 值。如果元素包含传递的类名，则返回 true，否则返回 false。
语法
以下语法用于在 classList 属性上实现 contains() 方法 −
var var_name = focusedElement.classList.contains("className");
在此语法中，我们在元素上使用 classList，然后通过将其传递到 contains() 方法中来检查特定类，无论目标元素是否包含它。
让我们通过在代码示例中实际实现它来理解它 -
算法
步骤 1 - 在第一步中，我们将定义一个 HTML 元素，其中包含一个特定的类。
步骤 2 - 在下一步中，我们将通过其 Id 获取目标元素，然后对其使用 classList属性和 contains() 方法。
步骤 3 - 在最后一步中，我们将定义一个 JavaScript 函数，该函数将在单击按钮时调用，它包含显示输出到用户屏幕上。
示例 1
下面的示例将说明如何使用 contains() 方法检查元素是否包含类 -
<!DOCTYPE html>
<html>
<body>
<h2>Testing if an element contains class in JavaScript in HTML</h2>
<p id="result" class="myClass">We will check the class for this element. </p>
<button onclick="display()">click to check the class</button>
<script>
var myElement = document.getElementById("result");
var classTest = myElement.classList.contains("myClass");
function display() {
if (classTest) {
myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
} else {
myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
}
}
</script>
</body>
</html>
在上面的例子中，我们在目标元素上使用 classList 属性的 contains() 方法，并将类名作为字符串传递给该方法以检查该元素是否包含它。
让我们再讨论一个例子，当目标元素包含多个类时，我们将检查 contains() 方法的行为。
在这个例子的算法中，我们只需要在定义的元素中添加多个类，其余的与上一个例子相同。
示例 2
下面的例子将显示元素包含多个类时 contains() 方法的行为 -
<!DOCTYPE html>
<html>
<body>
<h2>Testing if an element contains class in JavaScript in HTML </h2>
<p id="result" class="myClass class1 class2">We will check the class for this element. </p>
<button onclick="display()">click to check the class</button>
<script>
var myElement = document.getElementById("result");
var classTest = myElement.classList.contains("myClass");
function display() {
if (classTest) {
myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
} else {
myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
}
}
</script>
</body>
</html>
在此示例中，我们定义了具有多个类的 HTML 元素，然后使用与上一个示例相同的逻辑来检查元素是否包含该类。我们可以清楚地看到，两个示例的输出是相同的，这意味着如果元素包含多个类，则 contains() 方法也可以检查特定类。
在本教程中，我们讨论了元素的 classList 属性的 contains() 方法，用于在 JavaScript 中测试元素是否包含该类。我们已经讨论了该方法在不同场景中的行为，其中元素包含多个类以及单个类，并通过与每个场景相关的代码示例实际实现它们。
