使用NodeList

 

   理解NodeList、NamedNodeMap和HTMLCollection是整体透彻理解DOM的关键。

   这三个集合都是“动态”的，也就是说：每当文档结构发生变化时，他们都会得到更新，他们始终保存的都是最新最准确的信息。

   从本质上说：所有NodeList对象都是在访问DOM文档时实时运行的查询。

 

  

//下面代码会无限循环

var divs = document.getElementsByTagName('div');
var i,
   div;

   for(i=0;i<divs.length;i++){
       div = document.createElement('div');
       document.body.appendChild(div);
   }

 

   第一行代码会取得文档中所有<div>元素的HTMLCollection。由于这个集合是动态的，因此只要有新的<div>元素被加到页面中，集合都会被更新。i和div.length会同时递增，结果他们的值永远不会相等，就会无限循环。

 

   

//下面代码会正常运行

var divs = document.getElementsByTagName('div');
var i,
    len,
    div;

 //len保存的是divs.length循环开始时的一个快照是不变的
   for(i=0;len=divs.length;i<len;i++){
       div = document.createElement('div');
       document.body.appendChild(div);
   }

 

  一般来说应该尽量减少访问NodeList的次数，因为每次访问NodeList都会运行一次基于文档的查询。