在javascript將NodeList作為Array數組處理的方法
2024-09-06 12:45:25
供稿：網友
比如：
代碼如下:
var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++) {
var ele=anchors[i];//取某一個元素
//some code here
}
上面的代碼表示獲取文檔中的所有鏈接元素，然后遍歷做一些事情。
也許你會問，通過這種方法獲取的這一組dom元素不就是一個數組嗎？你看，你都可以直接獲取它的length屬性，還可以根據索引取到對應的單獨元素，根據大牛的著名鴨子理論，它像鴨子一樣行走（有length屬性），像鴨子一樣叫喚（根據索引取值），那么它就是一只鴨子。結論不言自明了吧？
如果，你已經對javascript稍微有過深入的了解，有length屬性，可以索引取值，一定是數組嗎，好像arguments也會這么一手吧，arguments是數組？雖然在實際開發的時候，我們把它當做普通數組來操作，length和for循環使用的不亦樂乎，而且并不見得會出錯。
但是，它真的不是數組（Array），而是NodeList。NodeList不是數組。
What a surprise，right？
1、NodeList為什么不是數組？
驗證NodeList是不是數組，最直接的方法也許是試一下Array專有的push和pop大法：
代碼如下:
var anchors = document.getElementsByTagName("a");
var newEle = document.createElement("a");//新建一個a元素
anchors.push(newEle);//push
var element= anchors.pop();//pop
您可以自己測試一下，上面的代碼不管是push還是pop方法，無一例外的會提示你沒有push或者pop方法。還有疑問嗎？這樣就結束了嗎？這種片面的測試反倒使樓豬無法高枕無憂心安理得了。我們完全可以像證明arguments不是數組一樣，也用同樣的方法證明NodeList不是數組?？聪旅娴拇a吧：
代碼如下:
Array.prototype.testNodeList = "test nodelist"; //數組添加原型屬性
function funcNodeList() {
var links = document.getElementsByTagName("a");
alert(links.testNodeList);
}
function test() {
alert(new Array().testNodeList); //test nodelist
funcNodeList(); //#ff0000? what the hell is that?
}
test(); //測試一下
通過上面的分析，我們可以肯定NodeList不是數組（Array）了。那么如何按照我們操作集合的習慣操作NodeList呢？
2、像操作Array一樣操作NodeList
既然NodeList有length，可以for循環索引取值，轉換成數組還不是輕而易舉？哈哈，最直接的思路是這樣的：g
代碼如下:
var arr = new Array();
var anchors = document.getElementsByTagName("a")
for (var i = 0; i < anchors.length; i++) {
var ele = anchors[i];
arr.push(ele); //arr就是我們要的數組
}
明扼要說明一下吧：先new一個Array，遍歷NodeList，然后將每一個單獨的元素push到數組變量里，最后操作數組變量，over。有沒有智商受辱的感覺？
上面不是跟您開玩笑，因為下面是樓豬在網上google到的，兩行代碼就可以將NodeList轉換成Array來使用了：
