javascript 使用 NodeList需要注意的问题
更新时间：2013年03月04日 15:20:28 作者：
理解NodeList及其近亲NamedNodeMap和HTMLCollection，是从整体上透彻理解DOM的关键所在，这三个集合都是“动态的”，换句话说，每当文档结构发生变化时，他们都会得到更新。
因此，他们始终存着最新，最准确的信息。从本质上说，所有NodeList对象都是访问DOM文档时实时运行的查询。例如下列代码会导致无限的循环：
复制代码 代码如下:
<script type="text/javascript">
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0;i<divObj.length;i++){
var d=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
首先取得页面中的所有div，由于这个集合（divObj）是“动态的”，因此只要有新的div插入到页面中，divObj都会添加这个新添加的div。也就是说，只要访问divObj，都会重新查询一次，重新更新一下divObj。所以，上面的代码，会出现死循环，因为每次循环的时候都插入了一个新的div，而每次循环都要对条件i<divObj.length求值，意味着会运行取得的所有<div>的查询。
如果想要迭代一个NodeList，最好是使用length属性初始化第二个变量，然后将迭代器与该变量比较。如下代码所示：
复制代码 代码如下:
<script type="text/javascript">
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0,len=divObj.length;i<len;i++){
var d=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
这个例子中初始化了第二个变量(len)。由于len中保存着对divObj.length的在循环开始时的一个快照，因此就会避免上个例子的死循环。
总结：一般来说，应该尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一基于文档的查询。所以，可以考虑将从NodeList中取到的值缓存起来，如例子二所示！
您可能感兴趣的文章:
- 在javascript将NodeList作为Array数组处理的方法
- javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
- js中将HTMLCollection/NodeList/伪数组转换成数组的代码
- javascript先序遍历DOM树的方法
- JavaScript简单遍历DOM对象所有属性的实现方法
- javascript 获取HTML DOM父、子、临近节点
- JavaScript 节点操作 以及DOMDocument属性和方法
- javascript获取dom的下一个节点方法
- Js 获取HTML DOM节点元素的方法小结
- JavaScript DOM节点操作方法总结
- 原生JS实现循环Nodelist Dom列表的4种方式示例
相关文章
正如标题所言如何对table的td进行相同内容合并，下面为大家详细介绍下使用js是如何做到的，感兴趣的朋友不要错过2013-12-12
给大家详细讲解一下单线程javascript的执行问题，以及通过实例分析用法。2017-11-11
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
这篇文章主要介绍了JavaScript 浏览器对象模型BOM原理与常见用法,结合实例形式详细分析了JavaScript浏览器对象模型BOM基本概念、原理、使用方法及操作注意事项,需要的朋友可以参考下2019-12-12
这篇文章主要为大家详细介绍了JS控制GIF图片的停止与显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了jsp 网站引入外部css或者js失效问题解决的相关资料,需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇javascript url几种编码方式详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文是小编基于js实现的520表白代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
avascript里有两个内置对象，一个是ArrayBuffer；一个是DataView，读写二进制数据都需要使用这两个对象。这篇文章主要给大家介绍了关于JavaScript读写二进制数据的方法，需要的朋友可以参考下2018-09-09
DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型，有需要的可以参考借鉴。2016-08-08
这篇文章主要介绍了微信小程序开发中var that =this的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论