JavaScript - DOM DOMTokenList

DOMTokenList

DOMTokenList 是 DOM（文件物件模型）中的一種介面，它表示一組空格分隔的標記（類）。通常，它用於管理 HTML 元素中的類。

它看起來像一個數組，但它不是。與陣列類似，您可以迴圈遍歷 DOMTokenList 並透過索引訪問其標記。但是，您不能在 DOMTokenList 上使用諸如 push()、pop() 或 join() 等陣列方法。

您可以使用 DOMTokenList 中的數字索引檢索單個標記。例如，element.classList[0] 將為您提供元素的第一個類名。

下圖清楚地解釋了 JavaScript DOMTokenList 介面。正如您所看到的，DOMTokenList 可以包含值（標記）列表：

下面的互動式示例將使用 2-3 個重要方法作為按鈕功能。每當使用者與頁面互動時，將執行相應的方法：

DOMTokenList - 技術教學

點選下面的按鈕檢視更改……

Tutorialspoint

以下是上面示例的解釋

如果單擊“新增”按鈕，將呼叫 'DOMTokenList' 的 add() 方法，並將類 'tp' 新增到“tutorials”。
如果單擊“移除”按鈕，將呼叫 remove() 方法以移除新增的類。
如果單擊“切換”按鈕，將呼叫 toggle() 方法，該方法將交替新增和移除類。

JavaScript DOMTokenList 方法

DOMTokenList 是一個介面，它表示一組空格分隔的標記。這些標記可以在諸如 classList、HTMLLinkElement、relList 等屬性中看到，以及許多其他屬性。

以下是 JavaScript DOMTokenList 提供的方法列表：

序號	方法和描述
1	add() 此方法將引數中指定的一個或多個標記新增到 DOMTokenList。
2	contains() 此方法檢查列表是否包含指定的標記，並相應地返回布林值。
3	entries() 此方法返回一個迭代器，允許遍歷所有鍵值對。
4	forEach() 此方法根據插入順序，為列表中的每個值對呼叫引數中提到的回撥函式一次。
5	item() 此方法返回引數中指定索引的 DOMTokenList 中的標記。
6	keys() 此方法返回一個迭代器，允許您遍歷標記列表中包含的所有鍵。
7	remove() 此方法將引數中指定的一個或多個標記從 DOMTokenList 中移除。
8	replace() 此方法將 DOMTokenList 中的現有標記替換為引數中指定的新標記。
9	supports() 此方法檢查引數中指定的標記是否在 DOMTokenList 中受支援。
10	toggle() 此方法動態地向元素類屬性新增或移除標記或類。
11	values() 此方法返回一個迭代器，允許我們遍歷標記列表中包含的所有值。

JavaScript DOMTokenList 屬性

以下是 JavaScript DOMTokenList 提供的屬性列表：

序號	屬性和描述
1	length 此方法返回標記列表中的標記數。
2	value 此方法返回作為字串序列化的 DOMTokenList。

示例 1：檢索 DOMTokenList 的長度。

以下示例演示了 DOMTokenList length 屬性的用法：

<!DOCTYPE html>
<html lang="en">
<body>
    <p>DOMTokenList Example</p>
    <div id="myList" class="tp1 tp2 tp3">
        I'm inside div.
    </div>
    <span id="result"></span>
    <script>
        let list = document.getElementById("myList").classList;
        document.getElementById('result').innerHTML = "DOMTokenList length (number of classes) is : " + list.length;
    </script>
</body>
</html>

以上程式返回 DOMTokenList 的長度（或類的數量）：

列印頁面