getElementsByClassName() メソッド
document.getElementsByClassName()
Element.getElementsByClassName()
getElementsByClassName() メソッドは、該当する class 名をもつ Element オブジェクトの配列を取得するDocument インターフェイス、Element インターフェイスのメソッドです。
Document と Element では、引数に該当する HTMLCollection を返す上でドキュメント全体か指定されたエレメントでの違いがあります。
詳しくは以下のgetElementsByClassName() メソッドについて
を参照してください。
ページ内 Index
- ad -
getElementsByClassName() メソッドについて
Document と Element における getElementsByClassName() メソッドの概略です。
Document.getElementsByClassName()
Document.getElementsByClassName() の場合は、webページを構成するエレメントの中で該当する class 名をもつエレメントの配列を取得できます。
var elements_ = document.getElementsByClassName("example");
詳しくはExampleを参照してください
Element.getElementsByClassName()
Element オブジェクトの場合は、その包括するエレメント内から該当する class 名のエレメントの配列を取得します。
var elements_ = element.getElementsByClassName("example");
詳しくはExampleを参照してください
セレクターでインスタンスを取得するには querySelector() メソッドが利用できます。
構文（Syntax）
Example Syntax
返り値は HTMLCollection （ Element インスタンスの配列）です。
HTMLCollection = document.getElementsByClassName("class");
引数（Parameter Values）
| Value | 摘要 |
|---|---|
| "class" | 大文字と小文字を区別します |
返り値（Return Values）
| Type | 摘要 |
|---|---|
| HTMLCollection | Elementの配列 |
Example
Document オブジェクトでの例
webページ内で該当する class 名をもつエレメントの配列を取得する例です。
取得したオブジェクトの詳しい内容は、開発用コンソールを確認してください。
- ad -
Element オブジェクトでの例
Element 内の該当する class 名をもつエレメントの配列を取得する例です。
取得したオブジェクトの詳しい内容は、開発用コンソールを確認してください。
- ad -
関連メソッド
似た機能をもつメソッドに以下があります。
- getElementById()
- id値が引数。Documentインターフェイスのメソッド。
- getElementsByTagName()
- エレメント名が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
- getElementsByName()
- name値が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
- getElementsByTagNameNS()
- エレメント名と名前空間が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
- querySelector()
- セレクターを引数にして該当するエレメントを取得。Documentインターフェイス、Elementインターフェイスのメソッド。
- querySelectorAll()
- セレクターを引数にして該当するエレメントのリストを取得。Documentインターフェイス、Elementインターフェイスのメソッド。
- ad -