The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。

同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数のelementを返します。

Syntax

var elements = element.getElementsByClassName(names);
  • elements は見つかった複数の要素のライブな HTMLCollection です(訳注:ライブとは死んだような単純に複製された要素コレクションではなく、動的に常に現状が反映されているということ)。
  • names はマッチさせるクラス名を表す文字列で、クラス名は空白区切りで指定できます。
  • element はドキュメントのどんな Elementでも可能です。

testクラスの全要素を取得:

element.getElementsByClassName('test');

 

redtest 両方のクラスを含む全要素を取得:

element.getElementsByClassName('red test');

 

testクラスの全要素を取得し、そのうち idmainの要素を一つ取得:

document.getElementById('main').getElementsByClassName('test');

 

このメソッドの戻り値を引数を  HTMLCollectionArray.prototype メソッドに与えて使うことができます。 次の例ではtestクラスを持つ全ての <div> 要素を見つけられます。

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

仕様

仕様 ステータス コメント
DOM
Element.getElementsByClassName() の定義
現行の標準 初期定義

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特徴 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本的なサポート (有) (有) [1] 9 (有) (有) [2]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本的なサポート ? ? [1] ? ? ?

[1] Firefox 19以前, このメソッドはNodeListを返していました。

[2] iOS 8 や OS X 10.10 上のSafariは、 NodeListを返します。

ドキュメントのタグと貢献者

 このページの貢献者: naturallucky
 最終更新者: naturallucky,