NodeList集合跟Array数组的区别

首先来看看什么是NodeList,NodeList跟arguments都不是普通的数组,他们有数组的一些基本属性但是又不完全是数组。下面是在Mozilla上面找到的定义:

This is a commonly used type which is a collection of nodes returned by   getElementsByTagName, getElementsByTagNameNS, and Node.childNodes. The   list is live, so changes to it internally or externally will cause the   items they reference to be updated as well. Unlike NamedNodeMap,   NodeList maintains a particular order (document order). The nodes in a   NodeList are indexed starting with zero, similarly to JavaScript arrays,   but a NodeList is not an array.


由字面意思来看NodeList是DOM操作(getElementsByTagName等)取出来的集合,是集合而不是普通的数组,但是他们有数组的一些属性,例如length、下标索引,但是他 们也有自己的属性,例如item,另外NodeList最大的特点就是时效性(live)。


NodeList的时效性

我们来看下面的代码:


<ul id="nodelist"> 

<li class="lis">index0</li> 

<li class="lis">index1</li> 

<li class="lis">index2</li> 

<li class="lis">index3</li> 

<li class="lis">index4</li> 

</ul> 


var myUl = document.getElementById('nodelist'); 

var lis = myUl.getElementsByTagName('li'); 


lis是一个NodeList集合,具有时效性,所谓的时效性就是我们在修改li的同时,会反映到lis上来,这与array是不同的,例如我们把第一个li插入到ul的底部,那么lis也会发生相应的变化:


//把第一个li插入的ul的底部 

myUl.appendChild(myUl.getElementsByTagName('li').item(0)); 

console.log(lis[0]);//输出的是原来ul的第二个li


NodeList转化为数组

NodeList具有length,下标索引这些数组的属性特征,但是我们不可以使用数组的push、pop、shift、unshift等数组原生的方法,这样我们就不能使用数组的原生方法来操作NodeList,所以我们要吧NodeList转化为数组,方便操作。下面的代码就可以把NodeList转化为普通的数组。

function collectionToArray(collection){ 

var ary = []; 

for(var i=0, len = collection.length; i < len; i++){ 

ary.push(collection[i]); 

return ary; 

}










  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值