在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就是我们要的数组 }