javascript 使用 NodeList需要注意的问题


Posted in Javascript onMarch 04, 2013

因此,他们始终存着最新,最准确的信息。从本质上说,所有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 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 #Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 #Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 #Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
You might like
一个简洁的多级别论坛
2006/10/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python中requests模块的使用方法
2015/04/08 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python实现媒体播放器功能
2018/02/11 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python图像处理入门(一)
2019/04/04 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python和php学习哪个更有发展
2020/06/17 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
校本教研工作方案
2014/01/14 职场文书
英雄儿女观后感
2015/06/09 职场文书
公司人事管理制度
2015/08/05 职场文书
python数字类型和占位符详情
2022/03/13 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技