Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyemak sama ada elemen tertentu mempunyai kelas tertentu dalam JavaScript?

Bagaimana untuk menyemak sama ada elemen tertentu mempunyai kelas tertentu dalam JavaScript?

王林ke hadapan: 2023-09-08 08:49:02724semak imbas

如何在 JavaScript 中检查给定元素是否具有指定的类？

概述

要首先执行某个任务，我们需要通过其类或 ID 来访问该特定元素，因此在访问该元素之前，我们检查该类是否存在于该特定元素中。 classList 对象包含 JavScript 中的内置方法 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 标签中使用了“

”标签，其中包含类名：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>

上述示例的输出，因为“Elements contains specified class”的输出为 true。

示例2：当元素不包含指定类时

下图显示“Element 不包含指定的类”，这意味着当检查 classList.contains() 时，它一定返回了 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 循环或映射对其进行迭代来查看 DOMTokenList。

var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
   console.log(element);
});

“contains()”方法返回布尔类型的结果，为 true 或 false。 classList 对象包含类的数组。因此，当 contains() 方法检查指定的类时，它会检查 DOMTokenList，并代表它做出决定并返回 true 或 false。

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada elemen tertentu mempunyai kelas tertentu dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html for 循环 class 布尔类型对象事件算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk memeriksa sama ada matriks adalah segi tiga atasArtikel seterusnya：Program JavaScript untuk memeriksa sama ada matriks adalah segi tiga atas

Artikel berkaitan

Lihat lagi