javascript使用NodeList需要注意的问题
JavaScript 问题 使用 需要 注意 NodeList
2023-06-13 09:14:46 时间
因此,他们始终存着最新,最准确的信息。从本质上说,所有NodeList对象都是访问DOM文档时实时运行的查询。例如下列代码会导致无限的循环:
<scripttype="text/javascript">
window.onload=function(){
vardivObj=document.getElementsByTagName("div");
for(vari=0;i<divObj.length;i++){
vard=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
首先取得页面中的所有div,由于这个集合(divObj)是“动态的”,因此只要有新的div插入到页面中,divObj都会添加这个新添加的div。也就是说,只要访问divObj,都会重新查询一次,重新更新一下divObj。所以,上面的代码,会出现死循环,因为每次循环的时候都插入了一个新的div,而每次循环都要对条件i<divObj.length求值,意味着会运行取得的所有<div>的查询。
如果想要迭代一个NodeList,最好是使用length属性初始化第二个变量,然后将迭代器与该变量比较。如下代码所示:
<scripttype="text/javascript">
window.onload=function(){
vardivObj=document.getElementsByTagName("div");
for(vari=0,len=divObj.length;i<len;i++){
vard=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
这个例子中初始化了第二个变量(len)。由于len中保存着对divObj.length的在循环开始时的一个快照,因此就会避免上个例子的死循环。
总结:一般来说,应该尽量减少访问NodeList的次数。因为每次访问NodeList,都会运行一基于文档的查询。所以,可以考虑将从NodeList中取到的值缓存起来,如例子二所示!
相关文章
- 开发人员面临的10个最常见的JavaScript问题
- javascript iframe跳转问题详解编程语言
- 用javascript动态调整iframe高度的方法
- 从JavaScript的函数重名看其初始化方式
- xml与javascript结合的问题解决方法
- 用javascript实现在小方框中浏览大图的代码
- Javascript中Eval函数的使用说明
- HTML与javascript常碰到的编码问题
- 细品javascript寻址,闭包,对象模型和相关问题
- JavaScript浮点数运算精度问题
- JavaScript页面刷新与弹出窗口问题的解决方法
- JavaScript面向对象编程(1)基础
- JavaScript类型转换方法及需要注意的问题小结(挺全面)
- 能说明你的Javascript技术很烂的五个原因分析
- Javascript异步加载详解(浏览器在javascript的加载方式)
- 你必须知道的JavaScript中字符串连接的性能的一些问题
- 使用javascript过滤html的字符串(注释标记法)
- javascript正则表达式容易被忽略的小问题整理
- 解析Javascript中难以理解的11个问题
- javascript:window.open弹出窗口的位置问题
- javascript中使用正则计算中文长度的例子
- javascript实现切换td中的值
- 解决phpcms更换javascript的幻灯片代码调用图片问题
- 关于javaScript注册click事件传递参数的不成功问题
- Python中还原JavaScript的escape函数编码后字符串的方法
- JavaScript中实现异步编程模式的4种方法