将childNodes返回的数据转化维数组的方法

最新推荐文章于 2021-06-23 22:29:14 发布

前端独秀

最新推荐文章于 2021-06-23 22:29:14 发布

阅读量495

点赞数

分类专栏：前端文章标签： NodeList prototype.slice.call array DOM

原文链接：https://www.mk2048.com/blog/blog.php?id=ha0ii1jaa&title=%E5%B0%86childNodes%E8%BF%94%E5%9B%9E%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E5%8C%96%E7%BB%B4%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

 1 //将childNodes返回的数据转化为数组的方法
 2             function convertToArray(nodes){
 3                 var array=null;
 4                 try{
 5                     array=Array.prototype.slice.call(nodes,0);
 6                 }catch(ex){
 7                     array=new Array();
 8                     for(var i=0,len=nodes.length;i<len;i  ){
 9                         array.push(nodes[i]);
10                     }
11                 }
12                 return array;
13             }
14             //筛选节点的方法
15             function getElementList(arr,value){
16                 var arrList=new Array();
17                 for(var i=0,len=arr.length;i<len;i  ){
18                     if(arr[i].nodeType==value){
19                         arrList.push(arr[i]);
20                     }
21                 }
22                 return arrList;
23             }

　　每一个节点都有一个childNodes属性，其中保存着NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以用过位置来访问这些节点。不过需要大家注意的是，虽然我们可以通过方括号来访问对象，且NodeList也有length属性，但它并不是Array的实例。

　　当然，我们也可以通过item()方法来访问NodeList中的节点，就像使用方括号一样，可以进行访问。这两种无论哪种方式都没有问题，而且因为方括号的简便性，所以更受开发人员的青睐。

　　在此，笔者仍然推荐以上的NodeList转数组的方法，但是因为在IE8及以下是不支持Array.prototypr.slice.call(soneNode.childNodes,0);这样的方法，所以我们只能通过枚举的方式，将NodeList转化维数组。try-catch捕获错误，并手动创建数组。