javascript 使用 NodeList需要注意的問題

因此，他們始終存著最新，最準確的資訊。從本質上說，所有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中取到的值緩衝起來，如例子二所示！