使用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都会运行一次基于文档的查询。

原文地址:https://www.cnblogs.com/skylar/p/3631359.html