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