首頁 > 文章 > web前端 > 如何在 JavaScript 中檢查給定元素是否具有指定的類別？

如何在 JavaScript 中檢查給定元素是否具有指定的類別？

王林轉載: 2023-09-08 08:49:02724瀏覽

如何在 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。

以上是如何在 JavaScript 中檢查給定元素是否具有指定的類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 程式檢查矩陣是否為上三角下一篇：JavaScript 程式檢查矩陣是否為上三角

看更多