JavaScript - DOM DOMTokenList
DOMTokenList
DOMTokenList 是 DOM(文档对象模型)中的一个接口，它表示一组以空格分隔的标记(类)。通常，它用于管理 HTML 元素中的类。
它看起来像一个数组，但实际上并非如此。与数组类似，您可以循环遍历 DOMTokenList 并通过索引访问其标记。但是，您不能在 DOMTokenList 上使用数组方法，例如 push()、pop() 或 join()。
您可以使用 DOMTokenList 中的数字索引检索单个标记。例如，element.classList[0] 会返回元素的一级类名。
下图清晰地解释了 JavaScript DOMTokenList 接口。如您所见，DOMTokenList 可以包含一个值列表(令牌)-
以下交互式示例将使用 2-3 个重要方法作为按钮功能。每当用户与页面交互时，相应的方法都会被执行 -
以下是上述示例的解释:
- 如果点击"添加"按钮，将调用"DOMTokenList"的 add() 方法，并将类"tp"添加到"tutorials"中。
- 如果点击"删除"按钮，将调用 remove() 方法删除已添加的类。
- 如果点击"切换"按钮，将调用 toggle() 方法，该方法将交替添加和删除类。
JavaScript DOMTokenList 方法
DOMTokenList 是一个接口，它表示一组以空格分隔的 token。这些标记可以在 classList、HTMLLinkElement、relList 等属性中看到。
以下是 JavaScript DOMTokenList 提供的方法列表 -
| Sr.No | 方法及说明 |
|---|---|
| 1 |
add()
此方法将参数中指定的一个或多个 token 添加到 DOMTokenList 中。 |
| 2 |
contains()
此方法检查列表是否包含指定的 token，并返回相应的布尔值。 |
| 3 |
entries()
此方法返回一个迭代器，用于遍历所有键/值对。 |
| 4 |
forEach()
此方法按插入顺序对列表中的每个值对调用一次参数中指定的回调函数。 |
| 5 |
item()
此方法从 DOMTokenList 中返回一个 token，该 token 由 DOMTokenList 中指定的索引指定。参数。 |
| 6 |
keys()
此方法返回一个迭代器，允许您遍历令牌列表中包含的所有键。 |
| 7 |
remove()
此方法从 DOMTokenList 中删除参数中指定的一个或多个令牌。 |
| 8 |
replace()
此方法将 DomTokenList 中的现有 token 替换为参数中指定的新 token。 |
| 9 |
supports()
此方法检查 DOMTokenList 是否支持参数中指定的 token。 |
| 10 |
toggle()
此方法动态地从元素类中添加或删除 token 或类属性。 |
| 11 |
values()
此方法返回一个迭代器，使我们能够遍历令牌列表中包含的所有值。 |
JavaScript DOMTokenList 属性
以下是 JavaScript DOMTokenList 提供的属性列表 -
| Sr.No | 属性 &说明 |
|---|---|
| 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 的长度(或类的数量)-
