快捷導(dǎo)航

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)文章

js對table的td進行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對table的td進行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯過
2013-12-12
詳細(xì)分析單線程JS執(zhí)行問題
給大家詳細(xì)講解一下單線程javascript的執(zhí)行問題，以及通過實例分析用法。
2017-11-11
JavaScript 瀏覽器對象模型BOM原理與常見用法實例分析
這篇文章主要介紹了JavaScript 瀏覽器對象模型BOM原理與常見用法,結(jié)合實例形式詳細(xì)分析了JavaScript瀏覽器對象模型BOM基本概念、原理、使用方法及操作注意事項,需要的朋友可以參考下
2019-12-12
JS控制GIF圖片的停止與顯示
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
jsp 網(wǎng)站引入外部css或者js失效問題解決
這篇文章主要介紹了jsp 網(wǎng)站引入外部css或者js失效問題解決的相關(guān)資料,需要的朋友可以參考下
2016-10-10
javascript url幾種編碼方式詳解
下面小編就為大家?guī)硪黄猨avascript url幾種編碼方式詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS實現(xiàn)520 表白簡單代碼
本文是小編基于js實現(xiàn)的520表白代碼，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-05-05
JavaScript讀寫二進制數(shù)據(jù)的方法詳解
avascript里有兩個內(nèi)置對象，一個是ArrayBuffer；一個是DataView，讀寫二進制數(shù)據(jù)都需要使用這兩個對象。這篇文章主要給大家介紹了關(guān)于JavaScript讀寫二進制數(shù)據(jù)的方法，需要的朋友可以參考下
2018-09-09
淺談Javascript中的12種DOM節(jié)點類型
DOM是javascript操作網(wǎng)頁的接口，全稱為文檔對象模型(Document Object Model)。本文將主要說明DOM節(jié)點類型，有需要的可以參考借鑒。
2016-08-08
微信小程序開發(fā)中var that =this的用法詳解
這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01