NodeList集合跟Array數(shù)組的區(qū)別

首先來看看什么是NodeList，NodeList跟arguments都不是普通的數(shù)組，他們有數(shù)組的一些基本屬性但是又不完全是數(shù)組。下面是在Mozilla上面找到的定義：

This is a commonly used type which is a collection of nodes returned by getElementsByTagName, getElementsByTagNameNS, and Node.childNodes. The list is live, so changes to it internally or externally will cause the items they reference to be updated as well. Unlike NamedNodeMap, NodeList maintains a particular order (document order). The nodes in a NodeList are indexed starting with zero, similarly to JavaScript arrays, but a NodeList is not an array.

由字面意思來看NodeList是DOM操作（getElementsByTagName等）取出來的集合，是集合而不是普通的數(shù)組，但是他們有數(shù)組的一些屬性，例如length、下標(biāo)索引，但是他們也有自己的屬性，例如item，另外NodeList最大的特點就是時效性（live）。

NodeList的時效性
我們來看下面的代碼：

<ul id="nodelist">
<li class="lis">index0</li>
<li class="lis">index1</li>
<li class="lis">index2</li>
<li class="lis">index3</li>
<li class="lis">index4</li>
</ul>
javascript代碼如下：

var myUl = document.getElementById('nodelist');
var lis = myUl.getElementsByTagName('li');
lis是一個NodeList集合，具有時效性，所謂的時效性就是我們在修改li的同時，會反映到lis上來，這與array是不同的，例如我們把第一個li插入到ul的底部，那么lis也會發(fā)生相應(yīng)的變化：

//把第一個li插入的ul的底部
myUl.appendChild(myUl.getElementsByTagName('li').item(0));
console.log(lis[0]);//輸出的是原來ul的第二個li
所以我們應(yīng)該在寫代碼的時候注意NodeList的時效性，不然就會犯一些錯誤，
例如下面的代碼（來自Jeff Wong）：

<div id="divAnchor">
<a href="http://www.js8.in">link test</a>
</div>var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++) {
var ele= document.createElement("a");
ele.setAttribute("href", "http://js8.in/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一個新鏈接
}
本意是在div內(nèi)，已經(jīng)存在的a元素后再附加一個a元素。但是，您可以運行一下，瀏覽器crash掉了吧？樓豬這里IE直接掛掉，F(xiàn)F提示腳本正忙，是否停止腳本運行，點擊停止后，頁面內(nèi)已經(jīng)生成了n多個a鏈接。這是因為NodeList的length會不斷變化上升，循環(huán)循環(huán)再循環(huán)，最后成了個死循環(huán)。

NodeList轉(zhuǎn)化為數(shù)組
NodeList具有l(wèi)ength，下標(biāo)索引這些數(shù)組的屬性特征，但是我們不可以使用數(shù)組的push、pop、shift、unshift等數(shù)組原生的方法，這樣我們就不能使用數(shù)組的原生方法來操作NodeList，所以我們要吧NodeList轉(zhuǎn)化為數(shù)組，方便操作。下面的代碼就可以把NodeList轉(zhuǎn)化為普通的數(shù)組。

function collectionToArray(collection){
var ary = [];
for(var i=0, len = collection.length; i < len; i++){
ary.push(collection[i]);
}
return ary;
}