DOMTokenList

DOMTokenList 接口表示一组用空格分隔的标记。 这种集合由 Element.classListHTMLLinkElement.relList 以及许多其他方法返回。

DOMTokenList0 开始索引,与 JavaScript Array 对象类似。 DOMTokenList 始终区分大小写。

实例属性

DOMTokenList.length 只读

表示对象中存储的对象数量的 整数

DOMTokenList.value

一个 字符串化器 属性,返回列表的值作为字符串。

实例方法

DOMTokenList.item()

通过其索引返回列表中的项目,如果索引大于或等于列表的 length,则返回 null

DOMTokenList.contains()

如果列表包含给定的标记,则返回 true,否则返回 false

DOMTokenList.add()

将指定的标记添加到列表中。

DOMTokenList.remove()

从列表中删除指定的标记。

DOMTokenList.replace()

用另一个标记替换标记。

DOMTokenList.supports()

如果给定的标记在关联属性的支持的标记中,则返回 true

DOMTokenList.toggle()

如果标记存在,则将其从列表中删除,如果不存在,则将其添加到列表中。 返回一个布尔值,指示操作后标记是否在列表中。

DOMTokenList.entries()

返回一个 迭代器,允许您遍历此对象中包含的所有键值对。

DOMTokenList.forEach()

对每个 DOMTokenList 元素执行一次提供的回调函数。

DOMTokenList.keys()

返回一个 迭代器,允许您遍历此对象中包含的键值对的所有键。

DOMTokenList.values()

返回一个 迭代器,允许您遍历此对象中包含的键值对的所有值。

示例

在以下简单的示例中,我们使用 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。