深入理解 NodeList

在web前端編程中，我們通常會通過document.getElementsByTagName的方法取出一組相同標簽的dom元素，比如：

var list = document.getElementsByTagName("li");  
for (i = 0; i < list.length; i++) {   
    var lis = list[i];//取某一個元素  
    //more code
} 

　　首先說明：通過這種方法獲取的這一組dom元素，不是數組（Array），而是NodeList，NodeList不是數組。
　　我們可以直接獲取它的length屬性，還可以根據索引取到對應的單獨元素，難道不是數組嗎？如果，你已經對javascript稍微有過深入的了解，有length屬性，可以索引取值，一定是數組嗎，好像arguments也會這么一手吧，arguments是數組？當然不是！

1、NodeList為什么不是數組！

　　驗證NodeList是不是數組，最直接的方法也許是試一下Array專有的push和pop方法：

var list = document.getElementsByTagName("li");
var a = document.createElement("a");//新建一個a元素
list.push(a);//push   
var element= list.pop();//pop

　　通過測試，上面的代碼不管是push還是pop方法，無一例外的會提示你沒有push或者pop方法。當然這種測試有點片面。我們完全可以像證明arguments不是數組一樣，也用同樣的方法證明NodeList不是數組。那就是修改它的原型，來測試。看下面的代碼吧：

Array.prototype.testNodeList = "test nodelist"; //數組添加原型屬性
function NodeList() {   
    var list = document.getElementsByTagName("li");   
    alert(list.testNodeList);   
}   
function test() {   
    alert(new Array().testNodeList); //test nodelist   
    NodeList(); //undefined   
}   
test(); //測試一下  

　　通過上面的分析，我們可以肯定NodeList不是數組（Array）了。那么如何按照我們操作集合的習慣操作NodeList呢？

2、像操作Array一樣操作NodeList

　　既然NodeList有length，可以for循環索引取值，轉換成數組還不是輕而易舉。最直接的思路是這樣的：先new一個Array，遍歷NodeList，然后將每一個單獨的元素push到數組變量里，最后操作數組變量。

var arr = [];
var list = document.getElementsByTagName("li"); 
for (var i = 0; i < list.length; i++) {  
    var li = list[i]; 
    arr.push(li); //arr就是我們要的數組  
} 

 

參考自：http://hi.baidu.com/anywing2000/item/b498a611e69e029898ce336c