DOMTokenList

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

DOMTokenList 介面表示一組由空格分隔的標記(token)。例如,Element.classListHTMLLinkElement.relList 以及許多其他屬性會返回這樣的集合。

DOMTokenList 與 JavaScript 的 Array 物件一樣,從 0 開始索引。DOMTokenList 始終區分大小寫。

例項屬性

DOMTokenList.length 只讀

一個 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()

返回一個 迭代器(iterator),允許您遍歷物件中包含的所有鍵/值對。

DOMTokenList.forEach()

DOMTokenList 中的每個元素執行一次提供的回撥函式。

DOMTokenList.keys()

返回一個 迭代器(iterator),允許您遍歷物件中包含的所有鍵/值對的鍵。

DOMTokenList.toString()

返回 DOMTokenList.value,即列表中由空格分隔的值組成的字串。

DOMTokenList.values()

返回一個 迭代器(iterator),允許您遍歷物件中包含的所有鍵/值對的值。

示例

在下面的簡單示例中,我們使用 Element.classList 獲取 <p> 元素上設定的類列表(作為 DOMTokenList),然後使用 DOMTokenList.add() 新增一個類,最後將 <p>Node.textContent 更新為等於 DOMTokenList 的值。

首先,HTML 程式碼

html
<p class="a b c"></p>

現在是 JavaScript 程式碼

js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;

輸出如下所示

修剪空格並移除重複項

修改 DOMTokenList 的方法(例如 DOMTokenList.add())會自動修剪任何多餘的 空格 並從列表中移除重複的值。例如:

html
<span class="    d   d e f"></span>
js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;

輸出如下所示

規範

規範
DOM
# interface-domtokenlist

瀏覽器相容性