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 的长度（或类的数量）：

打印页面