SYNCERのロゴ
アイキャッチ画像

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要素を取得します。ドット記法やブラケット記法に置き換えられます。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
HTMLCollection
item()
length
namedItem()
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。