getElementsByName()和getElementsByTagName()都返回NodeList對象,而類似document.images和document.forms的屬性為HTMLCollection對象。
這些對象都是只讀的類數組對象。它們有length屬性,也可以像真正的數組一樣索引(只是讀而不是寫)。可以對一個NodeList或HTMLCollection的內容用一下標准的循環進行迭代:
for(var i=0;i<document.images.length;i++)//循環所有圖片 document.images[i].style.display="none";//隱藏它們
不能直接在NodeList和HTMLCollection集合上調用Array的方法,但可以間接地使用:
var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML;});
HTMLCollection對象也有額外的命名屬性,也可以通過數字和字符串來索引。
由於歷史的原因,NodeList和HTMLCollection對象也都能當作函數:以數字或字符串為參數調用它就如同使用數字或字符串索引它們一樣。不鼓勵使用這種怪異的方式。
NodeList和HTMLCollection接口都不是為像JavaScript這樣的動態語言設計的,它們都定義了item()方法,期望輸入一個整數,並返回此索引處的元素。在JS中根本沒有必要調用此方法,因為簡單的使用數組索引就能替代。類似的,HTMLCollection定義了namedItem()方法,它返回指定屬性名的值,但在JS中可以用數組索引或常規屬性來訪問。
NodeList和HTMLCollection對象不是歷史文檔狀態的一個靜態快照,而通常是實時的,並且當文檔變化時它們所包含的元素列表能隨之改變,這是其中一個最重要和令人驚訝的特性。假設在一個沒有<div>元素的文檔中調用getElementsByTagName('div'),此時返回值是一個length為0的NodeList對象。如果再在文檔中插入一個新的<div>元素,此元素將自動成為NodeList的一個成員,並且它的length屬性變成1。
通常,NodeList和HTMLCollection的實時性非常有用。但是,如果要在迭代一個NodeList對象時在文檔中添加或者刪除元素,首先會需要對NodeList對象生成一個靜態的副本:
var snapshot=Array.prototype.slice.call(nodelist,0);