資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在JavaScript中檢查給定元素是否包含指定的類？
概述
為了執行特定任務，首先需要透過其類或ID訪問該特定元素，因此在訪問元素之前，我們檢查該類是否存在於該特定元素中。classList 物件在 JavaScript 中包含內建方法 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 標籤內使用了 "<p>" 標籤，它包含類名：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>
上述示例的輸出為 true，並顯示“元素包含指定的類”。
示例 2：當元素不包含指定的類時
下圖顯示“元素不包含指定的類”，這意味著當檢查 classList.contains() 時，它必須返回 false。因此，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 迴圈或 map 來迭代 DOMTokenList 來檢視它。
var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
console.log(element);
});
“contains()” 方法返回布林型別的結果 true 或 false。classList 物件包含類的陣列。因此，當 contains() 方法檢查指定的類時，它會在 DOMTokenList 中進行檢查，並據此做出決定並返回 true 或 false。
832 次瀏覽
