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() | 返回一個包含列表中值的迭代器 |
示例
為元素新增 "myStyle" 類
element.classList.add("myStyle");
自己動手試一試 »
從元素中移除 "myStyle" 類
element.classList.remove("myStyle");
自己動手試一試 »
切換 "myStyle" 的開/關狀態
element.classList.toggle("myStyle");
自己動手試一試 »
更多示例見下文。
不是陣列
DOMTokenList 不是陣列！
DOMTokenList 看起來像一個數組，但它不是。
您可以迴圈遍歷 DOMTokenList 並使用索引引用其標記。
但您不能在 DOMTokenList 上使用 push()、pop() 或 join() 等陣列方法。
獲取 "myDIV" 元素的類名
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>我是 myDIV。</p>
</div>
const list = document.getElementById("myDIV").classList;
自己動手試一試 »
如果元素具有 "myStyle" 類，則移除 "anotherClass"。
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
自己動手試一試 »
在類之間切換以建立下拉按鈕
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
自己動手試一試 »
建立粘性導航欄
// 獲取導航欄
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");
}
}
自己動手試一試 »
