在javascript将NodeList作为Array数组处理的方法_javascript技巧

比如:

复制代码 代码如下:

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来使用了:

复制代码 代码如下:

var anchors = document.getElementsByTagName("a");
var arr = Array.prototype.slice.call(anchors); //非ie浏览器正常

但是,最最遗憾的事情发生了:上面的代码在万恶的IE下不能正常工作,IE会给你提示: 缺少 JScript 对象。
你可能会对上面的一大段分析不屑一顾,认为没有必要将NodeList转换成Array来操作。其实,楼猪个人也认为,不管在哪种编程语言里,类型转换都是非常不明智的行为。最常见的比如c#里的装箱和拆箱,数值型数据转换,有性能问题,一不小心还会触雷。但是为什么楼猪单独要把NodeList当做Array来处理呢?因为动态改变NodeList的时候,直接操作NodeList很可能会误闯禁区而浑然不觉。下面举个例子:
(1)、html文档片段

<div id="divAnchor">
<a href="http://www.cnblogs.com/jeffwongishandsome/">link test</a>
</div>
(2)、javascript测试代码

复制代码 代码如下:

var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++) {
var ele= document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接
}

在文档加载结束后,执行上面的脚本。我们的本意是在div内,已经存在的a元素后再附加一个a元素。但是,您可以运行一下,浏览器crash掉了吧?楼猪这里IE直接挂掉,FF提示脚本正忙,是否停止脚本运行,点击停止后,页面内已经生成了n多个a链接。其实我们可以大胆分析出原因来:for循环NodeList(前提:for循环内部添加了新的元素使nodelist长度发生了变化。感谢陈童鞋超群的建议),它的length会不断变化上升,循环循环再循环,最后成了个死循环。而用下面的代码,和我们预期的效果是一样一样的:

复制代码 代码如下:

var links = document.getElementsByTagName("a");
var anchors = null; //数组
try {
anchors = Array.prototype.slice.call(links);
}
catch (e) { //兼容ie
anchors = new Array();
for (var i = 0; i < links.length; i++) {
anchors.push(links[i]);
}
}
for (i = 0; i < anchors.length; i++) { //数组循环 安全多了
var ele = document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接
}

那么你可能会问,不转换不行吗?没有那么死板,当然是可以的,只要对我们平时熟悉的编码习惯稍微动点小手术就可以了:

复制代码 代码如下:

var anchors = document.getElementsByTagName("a");
var len = anchors.length; //定义一个变量
for (i = 0; i < len; i++) { //对局部变量len进行循环
var ele = document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接
}

到这里,不管有无疑问,实际编程如何取舍,楼猪都要感谢您的阅读了。期待指点。
者:Jeff Wong

时间: 2024-10-27 13:04:30

在javascript将NodeList作为Array数组处理的方法_javascript技巧的相关文章

javascript中Array()数组函数详解_javascript技巧

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

Js的Array数组对象详解_javascript技巧

本文为大家分享了关于Js的Array数组对象的相关资料,供大家参考,具体内容如下 1. 介绍1.1 说明 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 1.2 定义方式 var names = new Array("张三", "李四", "王五&q

JavaScript每天必学之数组和对象部分_javascript技巧

对象部分  Object类型  Object 是一个无序的集合,可以存放任意类型对象,所有其他对象都继承自这个对象.  创建Object类型有两种,一种是使用new运算符,一种是字面量表示法.  1.使用new运算符创建Object var obj = new Object();//注意大写,也可以直接写成Object() 注意,通过new Object() 的写法生成新对象,与字面量的写法 obj = {} 是等价的.  2. 使用字面量方式创建: var obj = { name : 'tr

JavaScript 笔记二 Array和Date对象方法_javascript技巧

JavaScript的对象基础 本篇主要讲解本地对象Array和Date的各种方法. 一种面向对象语言需要向开发者提供四种基本能力: (1) 封装--把相关的信息(无论数据或方法)存储在对象中的能力. (2) 聚集--把一个对象存储在另一个对象内的能力. (3) 继承--由另一个类(或多个类)得来类的属性和方法的能力. (4) 多态--编写能以多种方法运行的函数或方法的能力. 1.本地对象包括: ①Array类 ②Date类 2.内置对象 3.宿主对象 Array类 toString()方法和v

将HTMLCollection/NodeList/伪数组转换成数组的实现方法_javascript技巧

这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments . 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeLi

JavaScript获取两个数组交集的方法_javascript技巧

本文实例讲述了JavaScript获取两个数组交集的方法.分享给大家供大家参考.具体如下: 这里传入的数组必须是已经排过序的 /* finds the intersection of * two arrays in a simple fashion. * * PARAMS * a - first array, must already be sorted * b - second array, must already be sorted * * NOTES * * Should have O(

JS Array.slice 截取数组的实现方法_javascript技巧

slice定义和用法 slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end 可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组尾部开始算

详解JavaScript中数组的reduce方法_javascript技巧

介绍 我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束. 我们来举个例子大家就很明白了. 假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少.正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码. var total = [0,1,2,3,4

Javascript 更新 JavaScript 数组的 uniq 方法_javascript技巧

上次写的一篇<JavaScript 数组的 uniq 方法>,发现代码的问题还是存在.比如如果数组内有 undefined 元素就无法过滤等. 昨天看见 Lazy 兄弟重新更新了函数,现在他是这样子写的: Array.prototype.uniq = function() {     var resultArr = [],         returnArr = [],         origLen = this.length,         resultLen;     function