深入理解 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