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


Posted in Javascript onJuly 09, 2010

比如:

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
Javascript 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
jquery multiSelect 多选下拉框
Jul 09 #Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 #Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 #Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 #Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 #Javascript
JQuery从头学起第三讲
Jul 06 #Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 #Javascript
You might like
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php防止sql注入的方法详解
2017/02/20 PHP
php生成word并下载代码实例
2019/03/15 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue实现扫码功能
2020/01/17 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
九年级语文教学反思
2014/02/04 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2016猴年春节问候语
2015/11/11 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers