--- title: DOMTokenList slug: Web/API/DOMTokenList tags: - API - DOM - DOMTokenList - Interface - Renference translation_of: Web/API/DOMTokenList ---

{{APIRef}}{{ gecko_minversion_header("1.9.2") }}

DOMTokenList 接口表示一组空格分隔的标记（tokens）。如由 {{ domxref("Element.classList") }}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}} 或 {{domxref("HTMLAreaElement.relList")}} 返回的一组值。它和 JavaScript {{jsxref("Array")}} 对象一样，索引从 0 开始。DOMTokenList 总是区分大小写（case-sensitive）。

属性

{{ domxref("DOMTokenList.length") }} {{ReadOnlyInline}}
一个整数，表示存储在该对象里值的个数。
{{domxref("DOMTokenList.value")}}
该属性以 {{domxref("DOMString")}} 的形式返回 DOMTokenList 列表的值。

方法

{{domxref("DOMTokenList.item()", "DOMTokenList.item(index)")}}
根据传入的索引值返回一个值，如果索引值大于等于符号列表的长度（length），则返回 undefined 或 null，在 {{ gecko("7.0") }} 之前的版本中返回 null。
{{domxref("DOMTokenList.contains()", "DOMTokenList.contains(token)")}}
如果 DOMTokenList 列表中包括相应的字符串 token，则返回 true，否则返回 false。
{{domxref("DOMTokenList.add()", "DOMTokenList.add(token1[, token2[, ...tokenN]])")}}
添加一个或多个标记（token）到 DOMTokenList 列表中。
{{domxref("DOMTokenList.remove()", "DOMTokenList.remove(token1[, token2[, ...tokenN]])")}}
从 DOMTokenList 列表中移除一个或多个标记（token）。
{{domxref("DOMTokenList.replace()", "DOMTokenList.replace(oldToken, newToken)")}}
使用 newToken 替换 token 。
{{domxref("DOMTokenList.supports()", "DOMTokenList.supports(token)")}}
如果传入的 token 是相关属性（attribute）支持的标记，则返回 true 。
{{domxref("DOMTokenList.toggle()", "DOMTokenList.toggle(token [, force])")}}
从 DOMTokenList 字符串中移除标记字串（token），并返回 false。如果传入的字串（token）不存在，则将其添加进去，并返回 true 。force 是一个可选的布尔值，如果传入 true ，且传入的 token 不存在，则将其添加进去并返回 true ，若传入的 token 存在，则直接返回 true ；反之，如果传入 false ，则移除存在的 token ，并返回 false ，如 token 不存在则直接返回 false 。
{{domxref("DOMTokenList.entries()")}}
返回一个迭代器（{{jsxref("Iteration_protocols","iterator")}}） ，以遍历这个对象中的所有键值对。
{{domxref("DOMTokenList.forEach()", "DOMTokenList.forEach(callback [, thisArg])")}}
为每个 DOMTokenList 中的元素都调用一次传入的 callback 函数 。
{{domxref("DOMTokenList.keys()")}}
返回一个迭代器（{{jsxref("Iteration_protocols","iterator")}}）以遍历这个对象中所有键值对的键。
{{domxref("DOMTokenList.values()")}}
返回一个迭代器（{{jsxref("Iteration_protocols","iterator")}}）以遍历这个对象中所有键值对的值。

示例

在下面这个简单的例子中，我们使用 {{domxref("Element.classList")}} 获取了 {{htmlelement("p")}} 元素的class列表，也就是一个DOMTokenList ，再使用 {{domxref("DOMTokenList.add()")}} 添加了一个class，然后更新 <p> 元素的{{domxref("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 的方法（例如 {{domxref("DOMTokenList.add()")}}）会自动去除多余的空格（{{Glossary("Whitespace")}}）和列表中的重复项目。例如：

<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}"`;

输出类似这样：

规范

规范 状态 注释
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}} {{Spec2("DOM WHATWG")}} Initial definition

浏览器兼容性

{{Compat("api.DOMTokenList")}}

相关链接