js中DOM集合对象的动态性

  出来工作之后，就好久没有来论坛里逛了。大家都知道的出来工作后一般都会很忙，就算不忙，生活中也会有很多的琐碎的事情等着你去处理。哈哈！生活不容易啊。好了废话说完后，下面进入主题。

     在这里先说明一下：小弟不才，接触js不是很久，如果我说的有什么不对的地方，希望大家指出来，另外小弟也想在这方面深入学习一下。如果大家觉得我写的东西对你们有用就留个言支持一下吧，如果不对恳请指出来。大家都知道现在用js来做页面编程部分，前端绝大部分都是和BOM和DOM打交道的。其中DOM里面的document对象提供了很多方法给我们可以访问到页面上那些标签对应的元素对象。

    例如： document.getElementsByTagName();

                  document.getElementById();

      同时也提供给我们创建元素的方法如：

                 document.createElement(elementName);

     所以编程中，下面的代码一般是很常见：

               var divs = document.getElementsByTagName("div");

               var div = document.createElement("div");

      当上面这两行代码变成下面一段代码时，大家想一下会发生什么。

             var divs = document.getElementsByTagName("div"),

              i,

              div;

           for(var i = 0; i < divs.length; i++){

                      div = document.createElement("div");

                      document.body.appendChild(div);

               }

       假设页面上有5个div标签，那么如果是按照一般逻辑理解这段代码是会向页面添加5个div标签。但实际上这段代码会无限循环下去，不断的创建div元素，最终导致浏览器卡死。这是因为divs是HTMLCollection对象，每当文档结构更新时，所有的HTMLCollection都会得到更新。本质上来说它是访问DOM文档时的实时查询。所以每当访问一次divs.length，就会执行一次实时的查询。按照上面代码的逻辑：i递增1，文档中新增一个div元素，则divs.length也递增1。 i 和 divs.length永远保持同步，i永远追不上dvis.length。所以程序永远没法跳出循环。

     其实这样问题之前我就已经在书本上看到过了，只是今天在调试一段js代码的时候，浏览器不可思议的卡死了。跟踪到最后才发现原来是这个问题造成的，有些事情或许你经历过才会印象深刻。呵呵！所以当你发现你的js代码好像没什么问题，而浏览器不可思议的卡死的时候，就可能是进入某种死循环状态了。另外在循环中遍历divs.length其实是很影响性能的，因为每访问一次divs.length就会执行一次查询，所以最好定义一个变量length = divs.length;

     就写到这里了，希望我写的东西对大家有用，我自己写下来也当是加深一下印象。