initial commit

9 files changed, 777 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/domtokenlist/add/index.html b/files/zh-cn/web/api/domtokenlist/add/index.html
new file mode 100644
index 0000000000..1ce6e5da8f
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/add/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.add()
+slug: Web/API/DOMTokenList/add
+translation_of: Web/API/DOMTokenList/add
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}} 接口的 <code><strong>add()</strong></code> 方法将给定的标记添加到列表中。 </p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>tokenList</var>.add(<var>token1</var>[, <var>token2</var>[, ...<var>tokenN</var>]]);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>token<em>N</em></dt>
+ <dd>一个 {{domxref("DOMString")}}，表示你要添加到列表里的标记。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="例子">例子</h2>
+
+<p>在下面的例子中，我们使用 {{domxref("Element.classList")}} 将 {{htmlelement("span")}} 元素上设置的类列表检索为 <code>DOMTokenList</code>。然后，我们将新标记添加到列表中，并将列表写入 <code>&lt;span&gt;</code> 元素的{{domxref("Node.textContent")}}。</p>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+</pre>
+
+<p>结果如下:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>你也可以添加多个标记:</p>
+
+<pre class="brush: js">span.classList.add("d", "e", "f");
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.add")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/domtokenlist/contains/index.html b/files/zh-cn/web/api/domtokenlist/contains/index.html
new file mode 100644
index 0000000000..3db05d7b9b
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/contains/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.contains()
+slug: Web/API/DOMTokenList/contains
+translation_of: Web/API/DOMTokenList/contains
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}}接口的<code><strong>contains()</strong></code>方法返回{{domxref("Boolean")}}类型。若传入的参数<code><var>token</var></code>包含在列表中时则返回<code>true</code> ，否则返回 <code>false</code>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>tokenList</var>.contains(<var>token</var>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><var>token</var></code></dt>
+ <dd>{{domxref("DOMString")}}类型，用于判断是否存在于列表中的标记。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{domxref("Boolean")}}类型，当<code><var>token</var></code>包含在列表中时返回<code>true</code>，否则返回<code>false</code>。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在下面的列子中，我们通过{{domxref("Element.classList")}}方法从 {{htmlelement("span")}} 元素中获取<code>DOMTokenList</code> 对象。 然后测试验证<code>"c"</code> 是否包含在列表中， 结果输出到 <code>&lt;span&gt;</code>标签的内容 {{domxref("Node.textContent")}}。</p>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>JavaScript:</p>
+
+<pre class="brush: js">let span = document.querySelector("span");
+let classes = span.classList;
+let result = classes.contains("c");
+if (result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}</pre>
+
+<p>结果如下:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.contains")}}</p>
+</div>
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>
diff --git a/files/zh-cn/web/api/domtokenlist/item/index.html b/files/zh-cn/web/api/domtokenlist/item/index.html
new file mode 100644
index 0000000000..c659eb4d43
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/item/index.html
@@ -0,0 +1,69 @@
+---
+title: DOMTokenList.item()
+slug: Web/API/DOMTokenList/item
+translation_of: Web/API/DOMTokenList/item
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}}接口的<code><strong>item()</strong></code>方法返回一个在列表中的索引的项。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate"><var>tokenList</var>.item(<var>index</var>)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><var>index</var></code></dt>
+ <dd> {{domxref("DOMString")}} 类型，一个表示要返回的项的索引。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{domxref("DOMString")}}类型，一个表示要返回的项。如果数字大于或等于列表的<code>length</code>，则返回<code>null</code>。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在下面的列子中，我们通过{{domxref("Element.classList")}}方法从{{htmlelement("span")}}元素中获取<code>DOMTokenList</code>对象。 然后使用<code>item(<var>tokenList</var>.length - 1)</code>检索列表中的最后的一个项，并将其写入&lt;span&gt;元素的 {{domxref("Node.textContent")}}。</p>
+
+<p>首先， HTML：</p>
+
+<pre class="brush: html notranslate">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>然后， JavaScript：</p>
+
+<pre class="brush: js notranslate">let span = document.querySelector("span");
+let classes = span.classList;
+let item = classes.item(classes.length-1);
+span.textContent = item;</pre>
+
+<p>输出结果如下：</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+<div class="hidden">此页面上的兼容性表格是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ，并向我们发送请求请求。</div>
+
+<p>{{Compat("api.DOMTokenList.item")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/domtokenlist/keys/index.html b/files/zh-cn/web/api/domtokenlist/keys/index.html
new file mode 100644
index 0000000000..3ca1c2a6f2
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/keys/index.html
@@ -0,0 +1,75 @@
+---
+title: DOMTokenList.keys()
+slug: Web/API/DOMTokenList/keys
+tags:
+  - DOM
+  - DOMTokenList
+  - Iterable
+  - Method
+  - Reference
+  - Web
+  - keys
+translation_of: Web/API/DOMTokenList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}}<strong> 的 </strong><code><strong>keys()</strong></code> 方法返回一个{{jsxref("Iteration_protocols",'iterator')}}, 可以用来遍历这个对象中的所有的键，键的类型是<code>无符号整型</code>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">tokenList.keys();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回一个 {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在下面的例子中，我们获取了一个使用 {{domxref("Element.classList")}}属性获取了一个 <code>DOMTokenList</code> ，在这里它表示了这个 {{htmlelement("span")}} 元素的所有class属性值的键（索引）。然后我们使用了它的  <code>keys()</code>方法获取了一个iterator， 最后再使用 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> 循环来对所有键（这里是索引）进行遍历，将遍历的每一个结果都写到这个 <code>&lt;span&gt;</code> 标签内（ 使用{{domxref("Node.textContent")}}属性）显示。</p>
+
+<p>首先，例子使用的HTML代码为：</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>这是JavaScript代码：</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.keys();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>输出为：</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','keys() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.keys")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/domtokenlist/length/index.html b/files/zh-cn/web/api/domtokenlist/length/index.html
new file mode 100644
index 0000000000..92d7da9f16
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/length/index.html
@@ -0,0 +1,66 @@
+---
+title: DOMTokenList.length
+slug: Web/API/DOMTokenList/length
+translation_of: Web/API/DOMTokenList/length
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p> </p>
+
+<p><strong><code>length</code></strong>是<strong><code>DOMTokenList</code></strong>接口的一个只读属性，以整数来表示，代表着当前对象中值的个数。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">tokenList.length;</pre>
+
+<h3 id="数值">数值</h3>
+
+<p>一个 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">整数</span></font>.</p>
+
+<h2 id="示范例子">示范例子</h2>
+
+<p> </p>
+
+<p>在示范例子里我们编写了一个span元素，使用{{domxref("Element.classList")}}去检索元素{{htmlelement("span")}}拥有的类，放回一个实时的<code>DOMTokenList</code>集合，然后把该集合中的数值个数写进 <code>&lt;span&gt;</code>的 {{domxref("Node.textContent")}} 属性中。</p>
+
+<p>HTML代码：</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>JavaScript代码：</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+</pre>
+
+<p>运行得出的结果如下：</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.length")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/domtokenlist/remove/index.html b/files/zh-cn/web/api/domtokenlist/remove/index.html
new file mode 100644
index 0000000000..443250641d
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/remove/index.html
@@ -0,0 +1,77 @@
+---
+title: DOMTokenList.remove()
+slug: Web/API/DOMTokenList/remove
+translation_of: Web/API/DOMTokenList/remove
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>remove()</strong></code> 方法从 {{domxref("DOMTokenList")}} 中移除指定标记。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+
+<h3 id="参数列表">参数列表</h3>
+
+<dl>
+ <dt>token<em>N</em>...</dt>
+ <dd>表示要从列表中移除的一个 {{domxref("DOMString")}}。如果列表中不存在该字符串，不会出错也没有任何变化。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="示例">示例</h2>
+
+<p>在下面的示例中，我们使用 {{domxref("Element.classList")}} 检索 {{htmlelement("span")}} 元素上设置的class列表作为DOMTokenList。然后从列表中删除一个标记，并将该列表写入<code>&lt;span&gt;</code>的 {{domxref("Node.textContent")}} 中。</p>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+</pre>
+
+<p>输出如下：</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>要一次删除多个class，可以提供多个标记。书写顺序不必与它们在列表中出现的顺序匹配：</p>
+
+<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove("c", "b");
+span.textContent = classes;
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DOMTokenList.remove")}}</p>
diff --git a/files/zh-cn/web/api/domtokenlist/replace/index.html b/files/zh-cn/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..53652d2c10
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}}接口的 <code><strong>replace()</strong></code> 方法可以将列表中一个已存在的token替换为一个新token。如果第一个参数token在列表中不存在， <code>replace()</code> 立刻返回<code>false</code> ，而不会将新token字符串添加到列表中。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><var>oldToken</var></code></dt>
+ <dd>{{domxref("DOMString")}}类型，想要替换掉的字符串。</dd>
+ <dt><code><var>newToken</var></code></dt>
+ <dd>{{domxref("DOMString")}}类型，表示要将<code><var>oldToken</var></code>字符串替换成的字符串。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>boolean类型, 如果<code><var>oldToken</var></code>被成功替换，返回 <code>true</code> ，否则返回<code>false</code></p>
+
+<div class="note">
+<p><strong>Note</strong>: In older browsers, <code>replace()</code> returns void.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>在下面的例子中，我们使用{{domxref("Element.classList")}}方法，将设置在{{htmlelement("span")}} 元素上的class列表检索为<code>DOMTokenList</code> 类型。接着我们替换一个字符串, 并且将新列表写入到 <code>&lt;span&gt;</code> 的内容{{domxref("Node.textContent")}}中。</p>
+
+<p>首先，HTML代码如下:</p>
+
+<pre class="brush: html notranslate">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>然后是JavaScript:</p>
+
+<pre class="brush: js notranslate">let span = document.querySelector("span");
+let classes = span.classList;
+
+let result = classes.replace("c", "z");
+console.log(result);
+
+if (result) {
+  span.textContent = classes;
+} else {
+  span.textContent = 'token not replaced successfully';
+}</pre>
+
+<p>输出如下:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.replace")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/domtokenlist/toggle/index.html b/files/zh-cn/web/api/domtokenlist/toggle/index.html
new file mode 100644
index 0000000000..e582da2e9e
--- /dev/null
+++ b/files/zh-cn/web/api/domtokenlist/toggle/index.html
@@ -0,0 +1,144 @@
+---
+title: DOMTokenList.toggle()
+slug: Web/API/DOMTokenList/toggle
+tags:
+  - .toggle()
+  - DOMTokenList.toggle()
+  - classList
+translation_of: Web/API/DOMTokenList/toggle
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("DOMTokenList")}} 接口的 <code><strong>toggle()</strong></code> 方法从列表中删除一个给定的<em>标记 </em>并返回 <code>false</code> 。 如果<em>标记 </em>不存在，则添加并且函数返回 <code>true</code>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">tokenList.toggle(token, force);</pre>
+
+<h3 id="参数列表">参数列表</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>标记列表中你想探查并切换的 {{domxref("DOMString")}} .</dd>
+ <dt>force {{optional_inline}}</dt>
+ <dd>一个{{domxref("Boolean")}} 值, 设置后会将方法变成单向操作. 如设置为<code>false</code>, 则会删除标记列表中匹配的给定标记，且不会再度添加. 如设置为 <code>true</code>, 则将在标记列表中添加给定标记，且不会再度删除。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>该方法返回一个{{domxref("Boolean")}}值 — 如给定标记不存在于列表中返回<code>false</code> , 标记存在则返回<code>true</code> 。</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following example we retrieve the list of classes set on a {{htmlelement("span")}} element as a <code>DOMTokenList</code> using {{domxref("Element.classList")}}. We then replace a token in the list, and write the list into the <code>&lt;span&gt;</code>'s {{domxref("Node.textContent")}}.</p>
+
+<p>First, the HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b"&gt;classList is 'a b'&lt;/span&gt;</pre>
+
+<p>Now the JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.onclick = function() {
+  var result = classes.toggle("c");
+  if(result) {
+    span.textContent = "'c' added; classList is now '" + classes + "'.";
+  } else {
+    span.textContent = "'c' removed; classList is now '" + classes + "'.";
+  }
+}
+</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>IE 9 and below - NO,  Windows 10, IE 11.608 - Yes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><strong>force</strong> argument</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><strong>force</strong> argument</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>