JavaScript 如何检查给定元素是否有指定的类

JavaScript 如何检查给定元素是否有指定的类

概述

为了执行某项任务,我们首先需要通过它的类或ID来访问该特定的元素,所以在访问该元素之前,我们要检查该类是否存在于该特定元素中。在JavScript中,classList对象包含内置方法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:当一个元素包含指定的类时

我们把<p>标签放在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>

上述例子的输出,由于 “元素包含指定的类”,输出为真。

例2:当元素不包含指定的类时

下面的图片显示,”元素不包含指定的类”,意味着当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,它是一个数组类型。它包含了存在于该特定元素中的类的列表。DOMTokenList可以通过使用任何for循环或map进行迭代来查看。

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

contains() “方法返回布尔类型的结果为真或假。classList对象包含类的数组。因此,当contains()方法检查指定的类时,它在DOMTokenList中检查,在此基础上,它采取决定并返回真或假。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程