DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 使用 NodeList需要注意的問題
javascript 使用 NodeList需要注意的問題
編輯:關於JavaScript     

因此,他們始終存著最新,最准確的信息。從本質上說,所有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中取到的值緩存起來,如例子二所示!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved