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扩展 垂直tabLayout实现代码
Jun 21 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
js的对象与函数详解
Jan 21 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
jquery轮播图插件使用方法详解
Jul 31 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP设置进度条的方法
2015/07/08 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
JQuery 常用操作代码
2010/03/14 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python的动态重新封装的教程
2015/04/11 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python模块常用用法实例详解
2019/10/17 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
大学生职业规划书的范本
2014/02/18 职场文书
2014政务公开实施方案
2014/02/19 职场文书
销售工作决心书
2015/02/04 职场文书
质量保证书格式模板
2015/02/27 职场文书
企业培训简报范文
2015/07/20 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书