javascript中操作NodeList

作者: gaohailin 分类: 网站技术 发布时间: 2011-05-28 06:13

在web前端编程中,我们通常会通过document.getElementsByTagName的方法取出一组相同标签的dom元素,比如:

  1. var anchors = document.getElementsByTagName(“a”);<br>
  2. for (i = 0; i < anchors.length; i++) {<br>
  3. var ele=anchors[i];//取某一个元素
  4. //some code here<br>
  5. }

上面的代码表示获取文档中的所有链接元素,然后遍历做一些事情。
也许你会问,通过这种方法获取的这一组dom元素不就是一个数组吗?你看,你都可以直接获取它的length属性,还可以根据索引取到对应的单独元素,根据大牛的著名鸭子理论,它像鸭子一样行走(有length属性),像鸭子一样叫唤(根据索引取值),那么它就是一只鸭子。结论不言自明了吧?
如果,你已经对javascript稍微有过深入的了解,有length属性,可以索引取值,一定是数组吗,好像arguments也会这么一手吧,arguments是数组?虽然在实际开发的时候,我们把它当做普通数组来操作,length和for循环使用的不亦乐乎,而且并不见得会出错。
但是,它真的不是数组(Array),而是NodeList。NodeList不是数组。
What a surprise,right?

1、NodeList为什么不是数组?

验证NodeList是不是数组,最直接的方法也许是试一下Array专有的push和pop大法:

view plainprint?
  1. var anchors = document.getElementsByTagName(“a”);<br>
  2. var newEle = document.createElement(“a”);//新建一个a元素<br>
  3. anchors.push(newEle);//push<br>
  4. var element= anchors.pop();//pop

您可以自己测试一下,上面的代码不管是push还是pop方法,无一例外的会提示你没有push或者pop方法。还有疑问吗?这样就结束了吗?这种片面的测试反倒使楼猪无法高枕无忧心安理得了。我们完全可以像证明arguments不是数组一样,也用同样的方法证明NodeList不是数组。看下面的代码吧:

  1. Array.prototype.testNodeList = “test nodelist”; //数组添加原型属性<br>
  2. function funcNodeList() {
  3. var links = document.getElementsByTagName(“a”);
  4. alert(links.testNodeList);
  5. }<br>
  6. function test() {
  7. alert(new Array().testNodeList); //test nodelist
  8. funcNodeList(); //#ff0000? what the hell is that?
  9. }
  10. test(); //测试一下

 

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

2、像操作Array一样操作NodeList

既然NodeList有length,可以for循环索引取值,转换成数组还不是轻而易举?哈哈,最直接的思路是这样的:

  1. var arr = new Array();<br>
  2. var anchors = document.getElementsByTagName(“a”)<br>
  3. for (var i = 0; i < anchors.length; i++) {<br>
  4. var ele = anchors[i];<br>
  5. arr.push(ele); //arr就是我们要的数组<br>
  6. }

简明扼要说明一下吧:先new一个Array,遍历NodeList,然后将每一个单独的元素push到数组变量里,最后操作数组变量,over。有没有智商受辱的感觉?
上面不是跟您开玩笑,因为下面是楼猪在网上google到的,两行代码就可以将NodeList转换成Array来使用了:

  1. var anchors = document.getElementsByTagName(“a”);<br>
  2. var arr = Array.prototype.slice.call(anchors); //非ie浏览器正常

【类数组对象如arguments,nodelist等转换为数组都可以采用slice方法。楼猪补注】但是,最最遗憾的事情发生了:上面的代码在万恶的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测试代码

  1. var anchors = document.getElementsByTagName(“a”);<br>
  2. for (i = 0; i < anchors.length; i++) {<br>
  3. var ele= document.createElement(“a”);<br>
  4. ele.setAttribute(“href”, “http://www.cnblogs.com/jeffwongishandsome/”);<br>
  5. ele.appendChild(document.createTextNode(“new link test”));<br>
  6. document.getElementById(“divAnchor”).appendChild(ele); //div附加一个新链接<br>
  7. }

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

  1. var links = document.getElementsByTagName(“a”);<br>
  2. var anchors = null; //数组<br>
  3. try {<br>
  4. anchors = Array.prototype.slice.call(links);<br>
  5. }<br>
  6. catch (e) { //兼容ie<br>
  7. anchors = new Array();<br>
  8. for (var i = 0; i < links.length; i++) {<br>
  9. anchors.push(links[i]);<br>
  10. }<br>
  11. }<br>
  12. for (i = 0; i < anchors.length; i++) { //数组循环 安全多了<br>
  13. var ele = document.createElement(“a”);<br>
  14. ele.setAttribute(“href”, “http://www.cnblogs.com/jeffwongishandsome/”);<br>
  15. ele.appendChild(document.createTextNode(“new link test”));<br>
  16. document.getElementById(“divAnchor”).appendChild(ele); //div附加一个新链接<br>
  17. }<br>

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

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

 

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注