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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
js数组去重的方法总结
Jan 18 Javascript
jquery实现轮播图特效
Apr 12 jQuery
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
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
mysql 排序失效
2022/05/20 MySQL