JavaScript - クラス名に一致する要素を取得する

Document.getElementsByClassName()

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

var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);
document.getElementsByClassName() メソッド
names
探す要素のクラス名のリストを表します。クラス名はスペースで区切ります。
/* HTML 側 */
<div class="box"></div>
<div class="box"></div>

/* JavaScript 側 */
var element = document.getElementsByClassName("box");
document.getElementsByClassName() メソッド

document.getElementsByClassName() メソッドの返り値は、指定されたクラス名に一致する HTMLCollection オブジェクトです。文書内に一致する要素がなければ、空の HTMLCollection オブジェクトを返します。

// test クラスを持つすべての要素を返します
document.getElementsByClassName('test');

// test および red クラスを持つすべての要素を返します
document.getElementsByClassName('test red');

// main という ID を持つ要素内にある test クラスを持つすべての要素を返します
document.getElementById('main').getElementsByClassName('test');

// test クラスを持つ最初の要素を取得します(一致する要素がなければ undefined を返す)
document.getElementsByClassName('test')[0]
document.getElementsByClassName() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
91241
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事