initial commit

1 files changed, 118 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/domtokenlist/index.html b/files/zh-cn/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..e67bee5432
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/index.html
@@ -0,0 +1,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>&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><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="60" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DOMTokenList$samples/Examples?revision=1600968" width="100%"></iframe></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><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="60" id="frame_Trimming_of_whitespace_and_removal_of_duplicates" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DOMTokenList$samples/Trimming_of_whitespace_and_removal_of_duplicates?revision=1600968" width="100%"></iframe></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>