在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不是数组。那就是修改它的原型,来测试。看下面的代码吧:

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

  通过上面的分析,我们可以肯定NodeList不是数组(Array)了。那么如何按照我们操作集合的习惯操作NodeList呢?

2、像操作Array一样操作NodeList

  既然NodeList有length,可以for循环索引取值,转换成数组还不是轻而易举。最直接的思路是这样的:先new一个Array,遍历NodeList,然后将每一个单独的元素push到数组变量里,最后操作数组变量。

深入理解 NodeList-LMLPHP
var arr = [];
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
var li = list[i];
arr.push(li); //arr就是我们要的数组
}
深入理解 NodeList-LMLPHP
05-11 14:58