---
title: DOMTokenList
slug: Web/API/DOMTokenList
tags:
  - API
  - DOM
  - DOMTokenList
  - Interface
  - Renference
translation_of: Web/API/DOMTokenList
---
<p>{{APIRef}}{{ gecko_minversion_header("1.9.2") }}</p>

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

<h2 id="属性">属性</h2>

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

<h2 id="方法">方法</h2>

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

<h2 id="示例">示例</h2>

<p>在下面这个简单的例子中，我们使用 {{domxref("Element.classList")}} 获取了 {{htmlelement("p")}} 元素的class列表，也就是一个<code>DOMTokenList</code> ，再使用 {{domxref("DOMTokenList.add()")}} 添加了一个class，然后更新 <code>&lt;p&gt;</code> 元素的{{domxref("Node.textContent")}}以显示这个新的 <code>DOMTokenList</code>。</p>

<p>HTML:</p>

<pre>&lt;p class="a b c"&gt;&lt;/p&gt;</pre>

<p>JavaScript:</p>

<pre>let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;</pre>

<p>输出类似这样:</p>

<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>

<h2 id="去除空格和重复项目">去除空格和重复项目</h2>

<p>修改 <code>DOMTokenList</code> 的方法（例如 {{domxref("DOMTokenList.add()")}}）会自动去除多余的空格（{{Glossary("Whitespace")}}）和列表中的重复项目。例如：</p>

<pre>&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>

<pre>let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;</pre>

<p>输出类似这样：</p>

<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>

<dl>
 <dt></dt>
</dl>

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col"><strong>规范</strong></th>
   <th scope="col"><strong>状态</strong></th>
   <th scope="col"><strong>注释</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.DOMTokenList")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{ domxref("DOMSettableTokenList") }} (object that extends DOMTokenList with settable <em>.value</em> property)</li>
 <li>{{ bug("501257") }} - Implement HTML 5's HTMLElement.classList property</li>
</ul>