initial commit

7 files changed, 612 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/nodelist/entries/index.html b/files/zh-cn/web/api/nodelist/entries/index.html
new file mode 100644
index 0000000000..9c9605c2f9
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/entries/index.html
@@ -0,0 +1,122 @@
+---
+title: NodeList.entries()
+slug: Web/API/NodeList/entries
+translation_of: Web/API/NodeList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>该方法返回一个迭代协议，允许遍历此对象中包含的所有键/值。该值也是一个{{domxref("Node")}} 对象。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">list.entries();</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回一个 {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js;highlight:[12]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// 使用 for..of 循环
+for(var entry of list.entries()) {
+  console.log(entry);
+}
+</pre>
+
+<p>结果如下:</p>
+
+<pre>Array [ 0, &lt;p&gt; ]
+Array [ 1, #text "hey" ]
+Array [ 2, &lt;span&gt; ]</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','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</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>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Andorid</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/nodelist/foreach/index.html b/files/zh-cn/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..29f2c575a7
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/foreach/index.html
@@ -0,0 +1,120 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("NodeList")}}接口的 <strong><code>forEach()</code></strong> 方法按插入顺序为列表中的每个值对调用一次参数中给定的回调。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>someNodeList</var>.forEach(<var>callback</var>[, <var>thisArg</var>]);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><var>callback</var></code></dt>
+ <dd>
+ <p>为 <code><var>someNodeList</var></code>的每一个元素执行函数。它接受以下三个参数：</p>
+
+ <dl>
+  <dt><code><var>currentValue</var></code></dt>
+  <dd><code><var>someNodeList</var></code>中的当前元素。</dd>
+  <dt><code><var>currentIndex</var></code> {{Optional_inline}}</dt>
+  <dd><code><var>someNodeList</var></code>中的<code><var>currentValue</var></code>所对应的索引值。</dd>
+  <dt><code><var>listObj</var></code> {{Optional_inline}}</dt>
+  <dd><code><var>someNodeList</var></code> 在 <code>forEach()</code> 方法中所属的NodeList对象。</dd>
+ </dl>
+ </dd>
+ <dt><code><var>thisArg</var></code> {{Optional_inline}}</dt>
+ <dd>传递 <code><var>callback</var></code> 的值一般用{{jsxref("this")}}值。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<p>None.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js;highlight:[6]">let node = document.createElement("div");
+let kid1 = document.createElement("p");
+let kid2 = document.createTextNode("hey");
+let kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+let list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>上述代码会产生以下结果：</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>{{Glossary("Polyfill","polyfill")}} 增加了对所有支持<a href="https://caniuse.com/#search=es5">ES5</a>的浏览器的兼容性：</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</pre>
+
+<p>或者</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+   NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>上面的代码是大部分浏览器实现的 <code>NodeList.prototype.forEach()</code> (例如Chrome).</p>
+
+<h2 id="Specifications">Specifications</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("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Defines <code>forEach</code> on <code>iterable</code> declarations</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/nodelist/index.html b/files/zh-cn/web/api/nodelist/index.html
new file mode 100644
index 0000000000..50e0269c26
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/index.html
@@ -0,0 +1,182 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - NodeList
+  - 接口
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>NodeList</code> 对象是节点的集合，通常是由属性，如{{domxref("Node.childNodes")}} 和 方法，如{{domxref("document.querySelectorAll")}} 返回的。</p>
+
+<div class="note">
+<p><code>NodeList</code> <strong>不是一个数组</strong>，是一个类似数组的对象(<em>Like Array Object</em>)。虽然 <code>NodeList</code> 不是一个数组，但是可以使用 <code>forEach()</code> 来迭代。你还可以使用 {{jsxref("Array.from()")}} 将其转换为数组。</p>
+
+<p>不过，有些浏览器较为过时，没有实现 <code>NodeList.forEach()</code> 和 <code>Array.from()</code>。你可以用 {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} 来规避这一问题。请查看<a href="#Example">该例</a>。</p>
+</div>
+
+<p>在一些情况下，<code>NodeList</code> 是一个实时集合，也就是说，如果文档中的节点树发生变化，<code>NodeList</code> 也会随之变化。例如，{{domxref("Node.childNodes")}} 是实时的：</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // 我们假设结果会是“2”
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // 但此时的输出是“3”</pre>
+
+<p>在其他情况下，<code>NodeList</code> 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如  {{domxref("document.querySelectorAll")}} 就会返回一个静态 <code>NodeList</code>。</p>
+
+<p>最好牢记这种不同，尤其是在当你选择 <code>NodeList</code> 中所有项遍历的方式，或缓存它的长度的时候。</p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd><code>NodeList</code> 中包含的节点个数。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+</dl>
+
+<dl>
+ <dd>返回 <code>NodeList</code> <font face="Courier New">对象</font>中指定索引的节点，如果索引越界，则返回<code>null</code>。等价的写法是 <code>nodeList[i]</code>，不过，在这种情况下，越界访问将返回 <code>undefined</code>。</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}}, allowing code to go through all key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0 and the values are nodes.)</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Executes a provided function once per <code>NodeList</code> element, passing the element as an argument to the function.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}}, allowing code to go through all the keys of the key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0.)</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing code to go through all values (nodes) of the key/value pairs contained in the collection.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>可以使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for">for</a> 循环遍历一个<code> NodeList</code> 对象中的所有的节点：</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // 调用 myNodeList.item(i) 是没有必要的
+}
+</pre>
+
+<p><strong>不要尝试使用 <code><a href="/zh-CN/JavaScript/Reference/Statements/for...in">for...in</a></code> 或者 <code><a href="/zh-CN/JavaScript/Reference/Statements/for_each...in">for each...in</a></code> 来遍历一个 <code>NodeList</code> 对象中的元素</strong>，因为，如果你把上述两个属性也看成 {{domxref("element")}} 对象的话，<code>NodeList</code> 对象中的 <code>length</code> 和 <code>item</code> 属性也会被遍历出来，这可能会导致你的脚本运行出错。此外，<code>for...in</code> 不能保证访问这些属性的顺序。</p>
+
+<p><a href="/zh-CN/JavaScript/Reference/Statements/for...of">for...of</a> 循环<strong>将会</strong>正确的遍历 <code>NodeList</code> 对象：</p>
+
+<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
+for (var checkbox of list) {
+  checkbox.checked = true;
+}</pre>
+
+<p>最近，浏览器也支持一些遍历方法，比如 {{domxref("NodeList.forEach()", "forEach()")}} 与 {{domxref("NodeList.entries()", "entries()")}}、{{domxref("NodeList.values()", "values()")}}、和 {{domxref("NodeList.keys()", "keys()")}}。</p>
+
+<p>也有一种使用数组 <code>Array</code> 的 {{jsxref("Array.forEach()", "Array.prototype.forEach")}} 来遍历 <code>NodeList</code> 的方法，这种方法兼容 Internet Explorer {{obsolete_inline}}：</p>
+
+<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
+Array.prototype.forEach.call(list, function (checkbox) {
+  checkbox.checked = true;
+});</pre>
+
+<h2 id="英文原版中已删除的内容">英文原版中已删除的内容</h2>
+
+<blockquote>
+<p>译者注：也许它已独立成了一篇单独的技术文章。如果有找到这样的文章，请将其链接添加至本页末的“参见”处，并删除本节内容。如果没有“参见”，请添加它为二级标题（<code>&lt;h2&gt;</code>），<code>&lt;h2&gt;</code> 的 <code><a href="/zh-CN/docs/Web/HTML/Global_attributes/id">id</a></code> 属性为“See_also”或“参见”。</p>
+</blockquote>
+
+<h3 id="为什么_NodeList_不是数组？">为什么 NodeList 不是数组？</h3>
+
+<p><code>NodeList</code> 对象在某些方面和数组非常相似，看上去可以直接使用从 <code>Array.prototype</code> 上继承的方法。然而，除了 <code>forEach</code> 方法，<code>NodeList</code> 没有这些类似数组的方法。</p>
+
+<p>JavaScript 的继承机制是基于原型的。数组元素之所以有一些数组方法（比如 <code>forEach</code> 和 <code>map</code>），是因为它的原型链上有这些方法，如下:</p>
+
+<p><code>myArray --&gt; Array.prototype --&gt; Object.prototype --&gt; null</code>（想要获取一个对象的原型链，可以连续地调用 <code>Object.getPrototypeOf</code>，直到原型链尽头）。</p>
+
+<p><code>forEach</code>，<code>map</code> 这些方式其实是 <code>Array.prototype</code> 这个对象的方法。</p>
+
+<p>和数组不一样的是，<code>NodeList</code> 的原型链是这样的：</p>
+
+<p><code>myNodeList --&gt; NodeList.prototype --&gt; Object.prototype --&gt; null</code></p>
+
+<p>NodeList的原型上除了类似数组的 <code>forEach</code> 方法之外，还有 <code>item</code>，<code>entries</code>，<code>keys</code> 和 <code>values</code> 方法。</p>
+
+<h4 id="解决办法">解决办法</h4>
+
+<p>一个解决办法就是把 <code>Array.prototype</code> 上的方法添加到 <code>NodeList.prototype</code> 上。可是，要注意<a class="external" href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/">扩展DOM对象的原型是非常危险的</a>，尤其是在旧版本的Internet Explorer（6，7，8）中。</p>
+
+<pre class="brush: js">var arrayMethods = Object.getOwnPropertyNames( Array.prototype );
+
+arrayMethods.forEach( attachArrayMethodsToNodeList );
+
+function attachArrayMethodsToNodeList(methodName)
+{
+  if(methodName !== "length") {
+    NodeList.prototype[methodName] = Array.prototype[methodName];
+  }
+};
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+firstDiv.childNodes.forEach(function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});</pre>
+
+<p>不扩展 DOM 对象原型的解决办法：</p>
+
+<pre class="brush: js">var forEach = Array.prototype.forEach;
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+forEach.call(firstDiv.childNodes, function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});</pre>
+
+<div class="note">
+<p>请注意，在上面的代码中，将某个宿主对象 （如 <code>NodeList</code>） 作为 <code>this</code> 传递给原生方法 （如 forEach） 不能保证在所有浏览器中工作，已知在一些浏览器中会失败。</p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.NodeList")}}</p>
diff --git a/files/zh-cn/web/api/nodelist/item/index.html b/files/zh-cn/web/api/nodelist/item/index.html
new file mode 100644
index 0000000000..f24b67bef8
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/item/index.html
@@ -0,0 +1,30 @@
+---
+title: NodeList.item
+slug: Web/API/NodeList/item
+translation_of: Web/API/NodeList/item
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>根据给定的索引,返回一个 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177"><code>NodeList</code></a>对象中包含的Node对象.</p>
+<h3 id="Syntax" name="Syntax">语法</h3>
+<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>)
+</pre>
+<ul>
+ <li><code>nodeList</code>是一个<code>NodeList</code>对象.通常是由某个DOM属性或方法返回的,比如<a href="/zh-cn/DOM/Node.childNodes" title="zh-cn/DOM/Node.childNodes">childNodes</a>.</li>
+ <li><code>index</code> 是给定的索引. 从0开始.</li>
+ <li><code>nodeItem</code> 是根据索引<code>index由</code><code>item</code>方法从<code>nodeList</code>中获取到的节点.</li>
+</ul>
+<p>JavaScript有更简单的语法来从一个NodeList对象中获取指定索引的节点:</p>
+<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>]
+</pre>
+<h3 id="Example" name="Example">例子</h3>
+<pre class="eval">var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // 或者简写为tables[1],返回一个文档中的第二个table元素.
+</pre>
+<h3 id="Notes" name="Notes">备注</h3>
+<p>如果索引越界,该方法不会抛出异常,只会返回<code>null</code>.</p>
+<p><code>item()不是</code>DOM<a href="/zh-cn/DOM/element" title="zh-cn/DOM/element">元素</a>或者DOM节点的方法,而是NodeList对象的方法.</p>
+<h3 id="Specification" name="Specification">规范</h3>
+<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p>
+<p>{{ languages( {"en": "en/DOM/NodeList.item" } ) }}</p>
diff --git a/files/zh-cn/web/api/nodelist/keys/index.html b/files/zh-cn/web/api/nodelist/keys/index.html
new file mode 100644
index 0000000000..ac08a2ba2d
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/keys/index.html
@@ -0,0 +1,60 @@
+---
+title: NodeList.keys()
+slug: Web/API/NodeList/keys
+tags:
+  - DOM
+  - Iterator
+  - Method
+  - NodeList
+  - Reference
+  - Web
+translation_of: Web/API/NodeList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>NodeList.keys()</strong></code> 方法返回 {{jsxref("Iteration_protocols",'iterator')}} ，此方法允许遍历这个对象中包含的所有的键，即使这个键是 <code>unsigned integer（无符号整数）</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">nodeList.keys();</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回 {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js;highlight:[13] notranslate">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>结果是:</p>
+
+<pre class="notranslate">0
+1
+2
+</pre>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p>{{Compat("api.NodeList.keys")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/nodelist/length/index.html b/files/zh-cn/web/api/nodelist/length/index.html
new file mode 100644
index 0000000000..468c9226fb
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/length/index.html
@@ -0,0 +1,45 @@
+---
+title: NodeList.length
+slug: Web/API/NodeList/length
+tags:
+  - 属性
+translation_of: Web/API/NodeList/length
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">摘要</h2>
+
+<p>返回 <a href="/zh-CN/docs/Web/API/NodeList">NodeList</a> <code>集合中</code>子节点数量<code>。</code></p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length
+</pre>
+
+<ul>
+ <li><code>numItems</code> <code>是一个整数，表示</code> <code>NodeList</code> <code>子节点的数量。</code></li>
+</ul>
+
+<h2 id="Example" name="Example">例子</h2>
+
+<pre class="brush: js">// 获取文档中的所有 p 标签
+var items = document.getElementsByTagName("p");
+
+// 循环 items 然后输出每个 p 标签 html
+var gross = "";
+for (var i = 0; i &lt; items.length; i++) {
+  gross += items[i].innerHTML;
+}
+
+// gross 现在集合了所有 p 标签的 HTML 内容。
+</pre>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p>length 不是 <a href="en/DOM/element">元素（Element）</a>的属性，而是 <a href="/zh-CN/docs/Web/API/NodeList">NodeList</a> 的属性。NodeList 是使用 DOM 操作方法返回的对象，比如使用 <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a> 就会返回一个 NodeList 对象。</p>
+
+<p>length 是在 DOM 操作中非常常见的属性。最常见的是用 length 属性来判断某些节点是否存在，或者如上述一样，用在 for 循环上。</p>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
diff --git a/files/zh-cn/web/api/nodelist/values/index.html b/files/zh-cn/web/api/nodelist/values/index.html
new file mode 100644
index 0000000000..36fb078e94
--- /dev/null
+++ b/files/zh-cn/web/api/nodelist/values/index.html
@@ -0,0 +1,53 @@
+---
+title: NodeList.values()
+slug: Web/API/NodeList/values
+translation_of: Web/API/NodeList/values
+---
+<p>该方法返回一个iterator迭代器，可以利用迭代器遍历所有value。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">nodeList.values();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Returns an {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+</pre>
+
+<p>The result is:</p>
+
+<pre>&lt;p&gt;
+#text "hey"
+&lt;span&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.values")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>