Document.getElementsByClassName()

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>

複数のクラスの例

document.getElementsByClassNamedocument.querySelectordocument.querySelectorAll ととても似た動きをします。指定されたクラス名がすべてある要素のみが選択されます。

HTML

<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:100%;height:7em"></textarea>

JavaScript

// getElementsByClassName は部分一致で選択します
var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
var result = "document.getElementsByClassName('orange juice')";
for (var i=0, len=allOrangeJuiceByClass.length|0; i<len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceByClass[i].textContent;
}


// querySelector は完全一致で選択します
var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (var i=0, len=allOrangeJuiceQuery.length|0; i<len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;

結果

仕様書

ブラウザーの互換性

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

凡例

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