1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
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><p></code> 元素的{{domxref("Node.textContent")}}以显示这个新的 <code>DOMTokenList</code>。</p>
<p>HTML:</p>
<pre><p class="a b c"></p></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><span class=" d d e f"></span></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>
|
