与えられたクラス名を持つ全ての子要素を格納した、配列に似たオブジェクトを返します。 ドキュメント(document)のオブジェクト上で呼び出された場合、rootノードを含むドキュメント上から検索されます。 ある要素上でgetElementsByClassName()を呼び出すことも可能で、 その場合はその要素をルート要素とした、与えられたクラス名を持つ子孫要素だけが返されます。

文法

var elements = document.getElementsByClassName(names);
//または、
var elements = rootElement.getElementsByClassName(names);

getElementsByClassNameは、document上だけではなく、ある要素上で呼び出すことも可能です。 その場合は、その呼び出した要素が検索対象のルート要素として使用されます。

引数	説明
names	クラス名にマッチさせるリストを表す文字列を指定します。 クラス名は空白で区切られます。
戻り値
elements	検出された要素のHTMLCollectionが返されます。

例

'test'のクラスを持つ要素を全て取得します。

document.getElementsByClassName('test');

'red'と'test'クラスの両方を持つ全ての要素を取得します。

document.getElementsByClassName('red test');

'main'のIDを持つ要素内から、'test'のクラスを持つ全ての要素を取得します。

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

また、HTMLCollectionをthis値として渡すことで、 HTMLCollection上のArray.prototypeのメソッドを使用することも可能です。 下記は、'test'のクラスを持つ全てのDIV要素を見つけ出します。

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

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	3.0	9.0	◯	◯

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	?	?	?	?

仕様

W3C: getElementsByClassName

 Back to top