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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
实例解析php的数据类型
2018/10/24 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
税务会计岗位职责
2014/02/18 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
会议邀请函
2015/01/30 职场文书
个人优缺点总结
2015/02/28 职场文书
教师节获奖感言
2015/07/31 职场文书
2015年中秋寄语
2015/07/31 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL