欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 使用 NodeList需要注意的問題

 更新時間：2013年03月04日 15:20:28   作者：  
理解NodeList及其近親NamedNodeMap和HTMLCollection，是從整體上透徹理解DOM的關(guān)鍵所在，這三個集合都是“動態(tài)的”，換句話說，每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時，他們都會得到更新。

因此，他們始終存著最新，最準(zhǔn)確的信息。從本質(zhì)上說，所有NodeList對象都是訪問DOM文檔時實時運行的查詢。例如下列代碼會導(dǎo)致無限的循環(huán)：

復(fù)制代碼 代碼如下:

<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）是“動態(tài)的”，因此只要有新的div插入到頁面中，divObj都會添加這個新添加的div。也就是說，只要訪問divObj，都會重新查詢一次，重新更新一下divObj。所以，上面的代碼，會出現(xiàn)死循環(huán)，因為每次循環(huán)的時候都插入了一個新的div，而每次循環(huán)都要對條件i<divObj.length求值，意味著會運行取得的所有<div>的查詢。

  如果想要迭代一個NodeList，最好是使用length屬性初始化第二個變量，然后將迭代器與該變量比較。如下代碼所示：

復(fù)制代碼 代碼如下:

<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的在循環(huán)開始時的一個快照，因此就會避免上個例子的死循環(huán)。

總結(jié)：一般來說，應(yīng)該盡量減少訪問NodeList的次數(shù)。因為每次訪問NodeList，都會運行一基于文檔的查詢。所以，可以考慮將從NodeList中取到的值緩存起來，如例子二所示！

相關(guān)文章

最新評論