HTML DOMTokenList 參考手冊

DOMTokenList

DOMTokenList 是一組空格分隔的令牌。

可以通過索引訪問 DOMTokenList（從 0 開始）。

length 屬性返回 DOMTokenList 中的令牌數。

注釋：HTML 元素的 classList 屬性表示 DOMTokenList。

DOMTokenList 屬性和方法

名稱 描述
add() 將一個或多個令牌添加到列表中。
contains() 如果列表包含類，則返回 true。
entries() 從列表中返回帶有鍵/值對的迭代器。
forEach() 為列表中的每個令牌執行回調函數。
item() 返回指定索引處的令牌。
keys() 返回包含列表中鍵的迭代器。
length 返回列表中的令牌數。
remove() 從列表中刪除一個或多個令牌。
replace() 替換列表中的令牌。
supports() 如果令牌是屬性支持的令牌之一，則返回 true。
toggle() 在列表中的令牌之間切換。
value 以字符串形式返回令牌列表。
values() 返回帶有列表中值的迭代器。

實例

例子 1

將 "myStyle" 類添加到元素：

element.classList.add("myStyle");

親自試一試

例子 2

從元素中刪除 "myStyle" 類：

element.classList.remove("myStyle");

親自試一試

例子 3

打開并關閉 "myStyle"：

element.classList.toggle("myStyle");

親自試一試

頁面下方提供更多實例。

不是數組

DOMTokenList 不是數組！

DOMTokenList 可能看起來像數組，但事實并非如此。

您可以遍歷 DOMTokenList 并使用索引引用其令牌。

但是您不能在 DOMTokenList 上使用 Array 方法，如 push()、pop() 或 join()。

實例

例子 1

向元素添加多個類：

element.classList.add("myStyle", "anotherClass", "thirdClass");

親自試一試

例子 2

從元素中刪除多個類：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

親自試一試

例子 3

獲取元素的類名數量：

let numb = element.classList.length;

親自試一試

例子 4

獲取 "myDIV" 元素的類名：

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

親自試一試

例子 5

獲取元素的第一個類：

let className = element.classList.item(0);

親自試一試

例子 6

元素是否有 "myStyle" 類？

let x = element.classList.contains("myStyle");

親自試一試

例子 7

如果元素有 "myStyle" 類，則刪除 "anotherClass"：

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

親自試一試

例子 8

在類之間切換，以創建下拉按鈕：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

親自試一試

例子 9

創建粘性導航欄：

// 獲取導航欄
const navbar = document.getElementById("navbar");
// 獲取導航欄的偏移位置
const sticky = navbar.offsetTop;
// 當您到達其滾動位置時，將 sticky 類添加到導航欄
// 離開滾動位置時將其刪除
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

親自試一試