NodeList荟萃跟Array数组的区别
发布时间：2018-10-10 02:10:57 所属栏目：创业 来源：站长网
导读：起首来看看什么是NodeList，NodeList跟arguments都不是平凡的数组，他们稀有组的一些根基属性可是又不完满是数组。下面是在Mozilla上面找到的界说： This is a commonly used type which is a collection of nodes returned by getElementsByTagName, getEl
|
起首来看看什么是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> javascript代码如下： 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的时效性，否则就会犯一些错误， 譬喻下面的代码（来自Jeff Wong）： <div id="divAnchor"> <a href="http://www.js8.in">link test</a> </div>var anchors = document.getElementsByTagName("a"); for (i = 0; i < anchors.length; i++) { var ele= document.createElement("a"); ele.setAttribute("href", "http://js8.in/"); ele.appendChild(document.createTextNode("new link test")); document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接 } 本意是在div内，已经存在的a元素后再附加一个a元素。可是，您可以运行一下，赏识器crash掉了吧？楼猪这里IE直接挂掉，FF提醒剧本正忙，是否遏制剧本运行，点击遏制后，页面内已经天生了n多个a链接。这是由于NodeList的length会不绝变革上升，轮回轮回再轮回，最后成了个死轮回。 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; } （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
