備忘録的プログラミングリファレンス

getElementsByClassName() メソッド

Document.getElementsByClassName()
Element.getElementsByClassName()

 getElementsByClassName() メソッドは、該当する class 名をもつ Element オブジェクトの配列を取得するDocument インターフェイスElement インターフェイスのメソッドです。

Document.getElementsByClassName()

 Document.getElementsByClassName() の場合は、webページを構成するエレメントの中で該当する class 名をもつエレメントの配列を取得できます。

webページ上から該当する class 名をもつ HTMLCollection を取得
var elements_ = document.getElementsByClassName("example");
詳しくはExampleを参照してください

Element.getElementsByClassName()

 Element オブジェクトの場合は、その包括するエレメント内から該当する class 名のエレメントの配列を取得します。

element 内のから該当する class 名をもつ HTMLCollection を取得
var elements_ = element.getElementsByClassName("example");
詳しくはExampleを参照してください

 セレクターでインスタンスを取得するには querySelector()メソッドが利用できます。

Syntax

in JavaScript

返り値は HTMLCollection ( Element インスタンスの配列)です。

HTMLCollection = document.getElementsByClassName("class");

引数(Parameter Values)

Value摘要
"class"大文字と小文字を区別します

返り値(Return Values)

Type摘要
HTMLCollectionElementの配列

Example

Document オブジェクトでの例

 webページ内で該当する class 名をもつエレメントの配列を取得する例です。
 取得したオブジェクトの詳しい内容は、開発用コンソールを確認してください。

Element オブジェクトでの例

 Element 内の該当する class 名をもつエレメントの配列を取得する例です。
 取得したオブジェクトの詳しい内容は、開発用コンソールを確認してください。

関連メソッド

 似た機能をもつメソッドに以下があります。

getElementById()
id値が引数。Documentインターフェイスのメソッド。
getElementsByTagName()
エレメント名が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
getElementsByName()
name値が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
getElementsByTagNameNS()
エレメント名と名前空間が引数。Documentインターフェイス、Elementインターフェイスのメソッド。
querySelector()
セレクターを引数にして該当するエレメントを取得。Documentインターフェイスのメソッド。