MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

与えられたクラス名で得られる子要素すべての配列ライクのオブジェクトを返します。document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。任意の要素でgetElementsByClassName() を呼び出すこともできます。その場合は、与えられたクラス名を持つ指定されたルート要素下の要素だけが返ります。

構文

var elements = document.getElementsByClassName(name) // または: var elements = rootElement.getElementsByClassName(name)
  • elementsは、見つかった要素のライブな【訳注: 現状の情報とリンクした】HTMLCollection です。要素は、それらがその文書ツリーに現れる順番に得られます。
  • name は、マッチした要素のクラス名のリストを表す文字列です。クラス名を空白区切りで指定できます。
  • getElementsByClassName は、document だけでなく、任意の要素で呼び出すことができます。呼び出した要素が検索のルートとして使われます。

'test' クラスを持っている要素の全てを得ます。

 document.getElementsByClassName('test')

'red' クラスと 'test' クラスを持っている要素の全てを得ます。

 document.getElementsByClassName('red test')

'main' ID を持っている要素内で、'test' クラスを持っている要素の全てを得ます。

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

あらゆる HTMLCollection で、HTMLCollection をメソッドのthisの値に渡すことで Array.prototype を使うことができます。ここでは 'test' クラスを持つすべてのdiv要素を検索しています:

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

要素クラスを取得

以下はよく使われる処理です。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p class="test">hello word2</p>
        <p >hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById("parent-id");
        
        var test=parentDOM.getElementsByClassName("test");//test変数はまだ取得したい要素ではない
        console.log(test);//HTMLCollection[1]

        var testTarget=parentDOM.getElementsByClassName("test")[0];//こちらのこれがターゲットElement
        console.log(testTarget);//<p class="test">hello word2</p>
    </script>
</body>
</html>

ブラウザの互換性

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 Edge Firefox (Gecko) Internet Explorer Opera Safari
基本的なサポート状況 (有) (有) 3.0 9.0 (有) (有)
特徴 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本的なサポート状況 ? (有) ? ? ? ?

仕様

 

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

 このページの貢献者: Uemmra3, naturallucky, fscholz, AshfaqHossain, ethertank, Potappo
 最終更新者: Uemmra3,