数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 HTML 的 JavaScript 中测试元素是否包含某个类？
在 JavaScript 中，我们可以检查 HTML 文档中的 HTML 元素是否包含特定的类。在网页开发过程中，开发者会使用许多类，有时会为不同的元素分配相似的类，这些元素在 CSS 中需要相同的样式。在这个过程中，开发者可能会忘记赋予特定元素的类，那么开发者可能需要使用 JavaScript 检查元素内部的类。在本教程中，我们将讨论如何测试 JavaScript 中的元素是否包含类。
要检查类，我们可以使用元素的 `classList` 属性的 `contains()` 方法。
让我们详细讨论一下 `contains()` 方法：
使用 contains() 方法
`contains()` 是元素 `classList` 属性的一个方法，该属性包含目标元素包含的所有类的列表，要检查列表中是否存在特定类，可以使用 `contains()` 方法，该方法将类名作为字符串参数，并返回 `boolean` 值。如果元素包含传递的类名，则返回 `true`，否则返回 `false`。
语法
以下是用于在 `classList` 属性上实现 `contains()` 方法的语法：
var var_name = targetedElement.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 中的元素是否包含该类。我们通过结合每个场景的代码示例，在不同的场景中讨论了此方法的行为，其中元素包含多个类以及单个类。
9K+ 次浏览
