在 JavaScript 中檢查元素是否包含類

Alex Dulcianu 2023年1月30日 2022年5月1日
  1. 使用內建 element.classList.contains() 方法檢查元素是否包含 JavaScript 中的類
  2. 使用查詢選擇器和 Element.matches() 方法檢查元素是否包含 JavaScript 中的類
  3. 使用 indexOf() 檢查元素是否包含 JavaScript 中的類
在 JavaScript 中檢查元素是否包含類

在 HTML 中使用類允許你對元素進行分組,並在樣式或功能方面對所有元素執行相同的操作。因此,你可以在一行程式碼中輕鬆更改共享一個類的所有元素的行為。

在某些情況下,你可能希望一個元素成為多個類的一部分。HTML 允許你執行此操作,但你必須遵循某些規則以避免意外行為。

此外,如果在 JavaScript 中按類選擇元素,則如果它們被標記為多個類,則會變得更加棘手。不用擔心;我們可以檢查一個元素是否包含一個特定的類。

使用內建 element.classList.contains() 方法檢查元素是否包含 JavaScript 中的類

不出所料,這個用例很常見,可以在 JavaScript 中使用其本機方法,如果不涉及其他特殊要求,這應該是你的首選。

這個方法的要點是檢索一個元素,遍歷它所屬的所有類,然後檢查你作為引數提供的類是否確實是列表的一部分。以下是它在實踐中的工作方式:

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById("mydiv");

console.log(element.classList.contains("myclass1"));

輸出:

true

上面的 JavaScript 程式碼與所有現代瀏覽器相容,儘管在非常舊的 Internet Explorer 版本中可能會出現一些問題。

使用查詢選擇器和 Element.matches() 方法檢查元素是否包含 JavaScript 中的類

查詢選擇器是非常強大的 JavaScript 工具,特別是因為它們通常可以完成 jQuery 所做的所有事情,除非你不需要第三方庫。

在這種情況下,查詢選擇器允許你選擇要對其執行檢查的元素,而 Element.matches() 方法允許你再次檢查該類是否存在。

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.querySelector("#mydiv");

console.log(element.matches('.myclass1'));

輸出:

true

如你所見,這兩種方法所需的程式碼在複雜性和長度方面或多或少相同。但是,查詢選擇器需要比 classList.contains() 方法更現代的瀏覽器,因此請記住這一點。

使用 indexOf() 檢查元素是否包含 JavaScript 中的類

雖然現代瀏覽器支援上述兩種方法,但你可能沒有那麼奢侈。因此,如果你的程式碼必須與非常舊的瀏覽器版本相容,你也可以使用 indexOf() 方法來獲得相同的結果。下面是它的工作原理:

<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById("mydiv");

function containsClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

console.log(containsClass(element, "myclass1"));

輸出:

true

自然,這種方法更加複雜,即使結果相同。本質上,我們建立了名為 containsClass 的方法,它遍歷元素的類列表。

如果找到了我們要查詢的類,那麼它的索引將為 0 或更大,並且該方法將返回 true

相關文章 - JavaScript Class