DOMTokenList
DOMTokenList 介面表示一組由空格分隔的標記(token)。例如,Element.classList 或 HTMLLinkElement.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 程式碼
<p class="a b c"></p>
現在是 JavaScript 程式碼
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${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 = `span classList is "${classes}"`;
輸出如下所示
規範
| 規範 |
|---|
| DOM # interface-domtokenlist |
瀏覽器相容性
載入中…