HTMLコレクション (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を返します。

仕様

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。