path: root/files/zh-cn/web/api/nodelist/index.html

---
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>