zoukankan      html  css  js  c++  java
  • javascript 使用 NodeList主意的问题

       理解NodeList及其近亲NamedNodeMap和HTMLCollection,是从整体上透彻理解DOM的关键所在,这三个集合都是“动态的”,换句话说,每当文档结构发生变化时,他们都会得到更新。因此,他们始终存着最新,最准确的信息。从本质上说,所有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中取到的值缓存起来,如例子二所示!

  • 相关阅读:
    Echrarts的基本API
    Echarts中Option属性设置
    大数据ETL处理时遇到的坑
    模块设计模式
    PAT (Advanced Level) Practice 代码
    递归中的 DFS 与 DP 比较
    CF 1557 D. Ezzat and Grid
    CF 1557 C. Moamen and XOR
    CF 1555 E. Boring Segments
    CF 1555 D. Say No to Palindromes
  • 原文地址:https://www.cnblogs.com/zhangwei412827/p/2942752.html
Copyright © 2011-2022 走看看