Element.getElementsByClassName()

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

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

Syntax

var elements = element.getElementsByClassName(names);

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

例

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

element.getElementsByClassName('test');

redとtest 両方のクラスを含む全要素を取得:

element.getElementsByClassName('red test');

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

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

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

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

仕様

ブラウザの互換性

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

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