Document インターフェイスの getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 document オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して getElementsByClassName() を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。

構文

var elements = document.getElementsByClassName(names); // または
var elements = rootElement.getElementsByClassName(names);
  • elements は、見つかった要素の生きた HTMLCollection です。
  • names は文字列で、一致させるクラス名のリストを表します。クラス名はホワイトスペースで区切ります。
  • getElementsByClassName は、 document だけでなく、任意の要素に対して呼び出すことができます。呼び出した要素が検索のルートとして使われます。

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

document.getElementsByClassName('test')

'red' および 'test' クラスを両方持つすべての要素を取得します。

document.getElementsByClassName('red test')

'main' という ID を持った要素の中にある、 'text' クラスを持つすべての要素を取得します。

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

'test' クラスを持つ最初の要素を取得し、一致する要素がなければ undefined になります。

document.getElementsByClassName('test')[0]

メソッドの this 値として HTMLCollection を渡すことで、 Array プロトタイプのメソッドを HTMLCollection で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。

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

クラスが 'test' である最初の要素を取得する

これは最もよく使われる操作のメソッドです。

<html>
<body>
    <div id="parent-id">
        <p>hello world 1</p>
        <p class="test">hello world 2</p>
        <p>hello world 3</p>
        <p>hello world 4</p>
    </div>

    <script>
        var parentDOM = document.getElementById("parent-id");
        
        var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない*
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
        console.log(testTarget); //<p class="test">hello world 2</p>
    </script>
</body>
</html>

仕様書

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

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

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