如何在 JavaScript 类中检查特定元素？

有时，我们必须验证元素是否确实具有 'className' (任何特定名称) 类。它包含类列表实体的方法。它可用于确定元素是否具有特定的类名。只使用一个方法来检查 JavaScript 类中所需的元素。

语法

以下语法显示了可用的

• 它返回一个布尔结果。如果元素具有类名，则返回 true；否则，返回 false。
• 在这里，我们将创建一个简单的 HTML 页面，并添加一个具有类名和 ID 名 main 的元素。
• 我们的任务是找到具有类名 main 的 h1 元素。

如何操作 JavaScript "contains" 方法

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

• 考虑以下 div> 元素，它具有 secondary 和 info 类。

• 使用 JavaScript 命令查看 div 元素中是否存在 second 类

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

由于 div> 元素中缺少 error 类，以下示例返回 false。

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

示例

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

示例 1

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

输出

提供的图像显示了作为输出可用的类结果。

示例 2

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

输出

提供的图像显示了作为输出可用的类结果。

示例 3

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

输出

提供的图像显示了作为输出可用的类结果。

示例 4

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

输出

提供的图像显示了作为输出可用的类结果。

结论

JavaScript 中的 contains() 函数用于检查必需的类是否在 Html 元素中可用。它是一种简单、直接且用户友好的方法，用于运行 JavaScript 代码来检查类名。