在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不是数组。看下面的代码吧：
代码如下:
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来使用了：
