Document.getElementsByClassName()

（Web API ＞ Document）
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

document.getElementsByClassName( クラス名 );

Document オブジェクトの getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返す。
引数には class 属性の値を DOMString オブジェクトで指定する（例えば ‘box’ など）。複数の class 属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得する。その場合は空白文字で区切って指定する（例えば ‘box menu’ など）。戻り値は HTMLCollection オブジェクト。
HTMLCollection オブジェクトは複数の要素ノードの集合である。HTMLCollection オブジェクトでは length プロパティと item メソッド、および namedItem メソッドが用意されている。

// '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";
  },
);
inserted by FC2 system