getElementsByClassName()でクラスを複数指定する時の注意点

JavaScriptのgetElementsByClassName()は、 クラス名を指定して要素を取得するメソッドですが、 複数のクラス名を指定することもできます。

その場合の結果は、双方のクラスが指定された要素のみを取得します。 つまりAND検索と同じであり、ORではありません。

早速試してみます。

getElementsByClassName()に複数のクラス名を指定してみる

HTML

「cls1」と「cls2」を単独で指定しているp要素と、 「cls1 cls2」を同時に指定しているp要素を用意します。

<p class="cls1">コンテンツ1</p>

<p class="cls2">コンテンツ2</p>

<p class="cls1 cls2">コンテンツ3</p>

JavaScript

クラス名「cls1」とクラス名「cls2」を半角スペースで区切って同時に指定します。

var elems = document.getElementsByClassName('cls1 cls2');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

// 実行結果 -------

コンテンツ3

実行結果からわかるように、複数のクラス名を指定した場合、 両方のクラスが指定されている要素を取得します（AND検索）。

どちらか一方しか指定されていない要素は取得できません。

では、どちらか一方しか指定されていない要素も取得したい場合（OR検索する場合）は どうすればいいのでしょうか？

代替方法: querySelectorAll()メソッド

上のHTMLで、クラス名「cls1」「cls2」「cls1 cls2」が指定されている要素を取得したい場合は、

getElementsByClassName()の代わりに、querySelectorAll()メソッドを使います。

次のように、クラス名をカンマ区切りで指定すれば、複数のクラスを指定することになります。

var elems = document.querySelectorAll('.cls1, .cls2');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

// 実行結果 -----------

コンテンツ1
コンテンツ2
コンテンツ3

まとめ

・getElementsByClassName()で2つ（複数）のクラス名を指定した場合、 両方のクラスが指定されている要素のみが取得できます（AND検索）。

・どちらか一方のクラスでも指定されている要素を取得したい場合は、 querySelectorAll()メソッドを使います（OR検索）。