快捷導(dǎo)航

javascript 使用 NodeList需要注意的問題

更新時(shí)間：2013年03月04日 15:20:28 作者：

理解NodeList及其近親NamedNodeMap和HTMLCollection，是從整體上透徹理解DOM的關(guān)鍵所在，這三個(gè)集合都是“動(dòng)態(tài)的”，換句話說，每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時(shí)，他們都會(huì)得到更新。

因此，他們始終存著最新，最準(zhǔn)確的信息。從本質(zhì)上說，所有NodeList對(duì)象都是訪問DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢。例如下列代碼會(huì)導(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，由于這個(gè)集合（divObj）是“動(dòng)態(tài)的”，因此只要有新的div插入到頁面中，divObj都會(huì)添加這個(gè)新添加的div。也就是說，只要訪問divObj，都會(huì)重新查詢一次，重新更新一下divObj。所以，上面的代碼，會(huì)出現(xiàn)死循環(huán)，因?yàn)槊看窝h(huán)的時(shí)候都插入了一個(gè)新的div，而每次循環(huán)都要對(duì)條件i<divObj.length求值，意味著會(huì)運(yùn)行取得的所有<div>的查詢。

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

復(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>

這個(gè)例子中初始化了第二個(gè)變量(len)。由于len中保存著對(duì)divObj.length的在循環(huán)開始時(shí)的一個(gè)快照，因此就會(huì)避免上個(gè)例子的死循環(huán)。

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

您可能感興趣的文章:

相關(guān)文章

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