HTMLコレクション (HTMLCollection)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

HTMLCollectionインターフェースは、要素(documentの順)の一般的なコレクション(配列)であり、リストから選択するためのメソッドとプロパティを提供します。

注意: このインターフェースは歴史的な経緯からHTMLCollectionと呼ばれています。 (DOM4以前は、このインターフェースが実装されたコレクションは、その項目としてHTML要素のみを持つことが出来た。)

HTMLのDOM内のHTMLCollectionは実稼働(live)の状態であり、 document下のものが変更されると、自動的に更新されます。

プロパティ

HTMLCollection.length: コレクション内の項目数を返します。

メソッド

HTMLCollection.item(): 0始まりのインデックスを与えることで、特定のノードがリストから返されます。もし範囲外のインデックスが渡されると、nullが返されます。
HTMLCollection.namedItem(): 文字列を指定することで、その文字列がIDに、またはフォールバックとしてnameにマッチしたノードを返します。 nameへのマッチはHTMLでのみの限られた手段であり、更に参照される要素がname属性をサポートしている必要があります。マッチするものが無ければ、nullが返されます。

JavaScriptでの使用方法

JavaScriptでは、HTMLCollectionオブジェクトにアクセスするコードは、与えられたHTMLCollectionの項目を取得するために、 item()またはnamedItem()メソッドを直接呼び出す代わりに、角括弧([])文法を使用することが出来ます。角括弧内の数値は、item()と同じように動作し、文字列値は、namedItem()と同じように動作します。

下記の例において、document内に<form>要素が1つ存在し、そのidは"myForm"だと仮定します。

var elem1, elem2;

// document.formsは、HTMLCollectionです。
elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // "true"を表示

elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // "true"を表示

ブラウザ互換性

インデックスに文字列を指定して2つ以上の要素がマッチした際に、異なるブラウザで異なる挙動が行われます。 (または、namedItemの引数) Firefox 8はDOM2とDOM4に従い、マッチされた1つ目の要素を返します。 WebKitブラウザはInternet Explorerは、このケースでは別のHTMLCollectionを返し、 Operaは全てのマッチした要素のNodeListを返します。