HTMLCollection - HTML要素の集合
HTMLCollectionは、HTML要素の集合を表すオブジェクトです。Elementだけが含まれた配列であるかのように、手軽にインデックス番号でアクセスできます。
概要
- 名前
- HTMLCollection
- IDL
[Exposed=Window, LegacyUnenumerableNamedProperties] interface HTMLCollection { readonly attribute unsigned long length; getter Element? item(unsigned long index); getter Element? namedItem(DOMString name); };
- 仕様書
- https://dom.spec.whatwg.org/#htmlcollection
チュートリアル
HTMLCollectionは、HTML要素の集合を取得する各メソッドの返り値として、取得できます。典型的なメソッドは、Document.getElementsByClassName()です。
<p class="hoge">Good Morning!</p>
<p class="hoge">Hello!</p>
<p class="hoge">Good Evening!</p>
// HTMLCollectionを取得
var elements = document.getElementsByClassName( "hoge" ) ;
// HTMLCollectionの内容
elements[0] ; // <p class="hoge">Good Morning!</p>
elements[1] ; // <p class="hoge">Hello!</p>
elements[2] ; // <p class="hoge">Good Evening!</p>
コンストラクタ
コンストラクタはありません。
プロパティ
length
集合に含まれるHTML要素の個数を返します。
メソッド
item()
インデックス番号を指定してHTML要素を取得します。このメソッドは、ブラケット記法(例: [0])に置き換えられます。
namedItem()
name属性を指定してHTML要素を取得します。ドット記法やブラケット記法に置き換えられます。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
HTMLCollection | ● | ● | ● | ● | ● | ● | ● | ● |
item() | ● | ● | ● | ● | ● | ● | ● | ● |
length | ● | ● | ● | ● | ● | ● | ● | ● |
namedItem() | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- class属性値を取得、変更する
- 要素のclass属性値を取得、変更、確認する方法をまとめています。
- HTMLCollection.namedItem()
- namedItem()は、HTMLCollectionのメソッドです。name属性を指定してHTML要素を取得します。このメソッドは、ドット記法やブラケット記法に置き換えられます。
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。
- HTMLElement
- HTMLElementは、全てのHTML要素が共通して実装しているインターフェイスです。全てのHTML要素は、これと同じインターフェイスか、または、これに独自のプロパティやメソッドを追加したインターフェイスを持っています。