javascript 使用 NodeList需要注意的问题_javascript技巧
程序员文章站
2022-04-08 16:12:48
...
因此,他们始终存着最新,最准确的信息。从本质上说,所有NodeList对象都是访问DOM文档时实时运行的查询。例如下列代码会导致无限的循环:
首先取得页面中的所有div,由于这个集合(divObj)是“动态的”,因此只要有新的div插入到页面中,divObj都会添加这个新添加的div。也就是说,只要访问divObj,都会重新查询一次,重新更新一下divObj。所以,上面的代码,会出现死循环,因为每次循环的时候都插入了一个新的div,而每次循环都要对条件i的查询。
这个例子中初始化了第二个变量(len)。由于len中保存着对divObj.length的在循环开始时的一个快照,因此就会避免上个例子的死循环。
复制代码 代码如下:
首先取得页面中的所有div,由于这个集合(divObj)是“动态的”,因此只要有新的div插入到页面中,divObj都会添加这个新添加的div。也就是说,只要访问divObj,都会重新查询一次,重新更新一下divObj。所以,上面的代码,会出现死循环,因为每次循环的时候都插入了一个新的div,而每次循环都要对条件i
如果想要迭代一个NodeList,最好是使用length属性初始化第二个变量,然后将迭代器与该变量比较。如下代码所示:
复制代码 代码如下:
这个例子中初始化了第二个变量(len)。由于len中保存着对divObj.length的在循环开始时的一个快照,因此就会避免上个例子的死循环。
总结:一般来说,应该尽量减少访问NodeList的次数。因为每次访问NodeList,都会运行一基于文档的查询。所以,可以考虑将从NodeList中取到的值缓存起来,如例子二所示!
下一篇: php删除字符串末尾子字符_PHP教程
推荐阅读
-
Javascript 一些需要注意的细节(必看篇)
-
JavaScript 大数据相加的问题_javascript技巧
-
JavaScript中各种编码解码函数的区别和注意事项_javascript技巧
-
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧
-
js操作ajax返回的json的注意问题!_javascript技巧
-
JavaScript使用指针操作实现约瑟夫问题实例_javascript技巧
-
javascript实现的使用方向键控制光标在table单元格中切换_javascript技巧
-
使用JS 清空File控件的路径值_javascript技巧
-
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试_javascript技巧
-
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧