博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解 NodeList
阅读量:5745 次
发布时间:2019-06-18

本文共 1403 字,大约阅读时间需要 4 分钟。

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

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不是数组(Array)了。那么如何按照我们操作集合的习惯操作NodeList呢?

2、像操作Array一样操作NodeList

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

var arr = [];var list = document.getElementsByTagName("li"); for (var i = 0; i < list.length; i++) {      var li = list[i];     arr.push(li); //arr就是我们要的数组  }

 

参考自:

 

转载地址:http://qdxzx.baihongyu.com/

你可能感兴趣的文章
例题10-2 UVa12169 Disgruntled Judge(拓展欧几里德)
查看>>
[c语言]c语言中的内存分配[转]
查看>>
JS 原生ajax写法
查看>>
day 10 字符编码和文件处理 细节整理
查看>>
如何打造亚秒级加载的网页1——前端性能
查看>>
在首次发布三周之后,MLflow迎来了0.2版本
查看>>
聊天宝彻底凉了,遭罗永浩抛弃,团队就地解散
查看>>
Composer管理PHP依赖关系
查看>>
React.js学习笔记之JSX解读
查看>>
我所了解的Libevent和SEDA架构
查看>>
在Xcode7/7.1中使用Http请求
查看>>
Socket编程问题小记
查看>>
基于Flask-Angular的项目组网架构与部署
查看>>
Rust 2018 即将到来:设法从 Rust 2015 过渡
查看>>
一张图道尽程序员的出路
查看>>
Android 开发应该掌握的 Proguard 技巧
查看>>
是时候放弃 Spark Streaming, 转向 Structured Streaming 了 ...
查看>>
企业级 Spring Boot 教程 (十七)上传文件
查看>>
sqli-labs 下载、安装
查看>>
RouteReuseStrategy angular路由复用策略详解,深度刨析路由复用策略
查看>>