NodeList集合跟Array數組的區別

首先來看看什么是NodeList，NodeList跟arguments都不是普通的數組，他們有數組的一些基本屬性但是又不完全是數組。下面是在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等）取出來的集合，是集合而不是普通的數組，但是他們有數組的一些屬性，例如length、下標索引，但是他們也有自己的屬性，例如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也會發生相應的變化：

//把第一個li插入的ul的底部
myUl.appendChild(myUl.getElementsByTagName('li').item(0));
console.log(lis[0]);//輸出的是原來ul的第二個li
所以我們應該在寫代碼的時候注意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內，已經存在的a元素后再附加一個a元素。但是，您可以運行一下，瀏覽器crash掉了吧？樓豬這里IE直接掛掉，FF提示腳本正忙，是否停止腳本運行，點擊停止后，頁面內已經生成了n多個a鏈接。這是因為NodeList的length會不斷變化上升，循環循環再循環，最后成了個死循環。

NodeList轉化為數組
NodeList具有length，下標索引這些數組的屬性特征，但是我們不可以使用數組的push、pop、shift、unshift等數組原生的方法，這樣我們就不能使用數組的原生方法來操作NodeList，所以我們要吧NodeList轉化為數組，方便操作。下面的代碼就可以把NodeList轉化為普通的數組。

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