概述
要首先執行某個任務，我們需要通過其類或 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 中檢查給定元素是否具有指定的類？的詳細內容，更多請關注www.92cms.cn其它相關文章！
