DOMTokenList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
DOMTokenList 介面表示一組以空白分隔的標記。這類集合通常由 Element.classList 或 HTMLLinkElement.relList 等屬性回傳。
DOMTokenList 的索引從 0 開始，與 JavaScript 的 Array 物件相同。DOMTokenList 永遠區分大小寫。
實例屬性
DOMTokenList.lengthRead only-
一個
integer，代表此物件中儲存的項目數量。 DOMTokenList.value-
一個 stringifier 屬性，會以字串形式回傳整個清單的值。
實例方法
DOMTokenList.item()-
根據索引回傳清單中的項目，若索引超過或等於清單的
length，則回傳null。 DOMTokenList.contains()-
若清單中包含指定的標記，則回傳
true，否則回傳false。 DOMTokenList.add()-
將指定的標記加入清單中。
DOMTokenList.remove()-
從清單中移除指定的標記。
DOMTokenList.replace()-
以另一個標記取代原有標記。
DOMTokenList.supports()-
若指定的標記為關聯屬性所支援的標記，則回傳
true。 DOMTokenList.toggle()-
若清單中已存在該標記，則移除；否則加入。會回傳一個布林值，表示操作後該標記是否存在於清單中。
DOMTokenList.entries()-
回傳一個迭代器，可用來遍歷此物件內所有鍵／值對。
DOMTokenList.forEach()-
為清單中的每個元素執行一次所提供的回呼函式。
DOMTokenList.keys()-
回傳一個迭代器，可用來遍歷此物件內所有鍵／值對的鍵。
DOMTokenList.toString()-
回傳
DOMTokenList.value，也就是以空白分隔的清單字串。 DOMTokenList.values()-
回傳一個迭代器，可用來遍歷此物件內所有鍵／值對的值。
範例
以下簡單範例中，我們使用 Element.classList 取得一個 <p> 元素的類別清單（DOMTokenList），接著使用 DOMTokenList.add() 新增一個類別，最後將 Node.textContent 更新為 DOMTokenList 的內容。
首先是 HTML：
<p class="a b c"></p>
接著是 JavaScript：
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `段落類別清單是 "${classes}"`;
輸出結果如下所示：
空白修剪與重複項目移除
會修改 DOMTokenList 的方法（例如 DOMTokenList.add()）會自動修剪多餘的空白並移除清單中的重複值。例如：
<span class=" d d e f"></span>
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `行內容器類別清單是 "${classes}"`;
輸出結果如下所示：
規範
| Specification |
|---|
| DOM # interface-domtokenlist |
瀏覽器相容性
Loading…