JavaScript | getElementsByClassNameで複数のclass名を指定して取得する方法
JavaScriptのgetElementsByClassName()は指定したclass名が付与されているHTML要素（Elements）を取得する関数になります。
このページではgetElementsByClassName()で複数のclass名を指定して、指定した全てのclass名（and）、またはいずれかのclass名（or）が付与されているHTML要素を取得する方法を紹介しています。
複数のclass名をand指定でHTML要素を取得する
複数のclass名を指定して完全一致にてHTML要素を取得する場合、getElementsByClassName()に半角スペース区切りでclass名を指定していきます。
例えば以下のようなHTML要素があり、class名「aaa」と「bbb」両方が付与されている要素を取得したい場合
<div id="item1" class="aaa"></div>
<div id="item2" class="bbb"></div>
<div id="item3" class="aaa bbb"></div>getElementsByClassNameでは「"aaa bbb"」と指定することで「item3」の要素だけを取得します。
let target = document.getElementsByClassName("aaa bbb");
//targetにはitem3の要素が配列として格納されますまた、この指定は、半角スペースを含む完全一致で判別しているわけではなくclass名の「aaa」「bbb」を個別に判別していますので、「"bbb aaa"」と指定した順番が違う指定をしても「item3」を取得することが可能です。
let target = document.getElementsByClassName("bbb aaa");
//targetにはitem3の要素が配列として格納されます複数のclass名からor指定でHTML要素を取得する
getElementsByClassName()では正規表現は使えずor指定ができません。
複数のclass名からor指定でHTML要素を取得する場合はquerySelectorAll()を利用します。
例ではclass名に「aaa」「bbb」「ccc」をそれぞれ付与したHML要素を利用しています。
<div id="item1" class="aaa"></div>
<div id="item2" class="bbb"></div>
<div id="item3" class="ccc"></div>上記のHTML要素からclass名に「aaa」または「bbb」が付与されているHTML要素を取得したい場合、querySelectorAll()の引数は以下のように指定します。
let target = document.querySelectorAll('.aaa, .bbb');
//targetにはitem1とitem2の要素が配列として格納されます※querySelectorAll()はidとclass両用ですのでjQueryのようにclass名であれば「.」、idであれば「#」を加えて指定します。
上記のサンプルの場合、「target」には「item1」と「item2」のHTML要素が配列として格納されます。
class名からnot指定も含めてHTML要素を取得する
特定のclass名を否定（not指定）した取得が必要な場合にもquerySelectorAll()が利用可能です。
<div id="item1" class="aaa"></div>
<div id="item2" class="aaa bbb"></div>
<div id="item3" class="aaa"></div>例えば、上記のHTML要素からclass名「aaa」が付与されているHTML要素のうち「bbb」が付与されていない要素を取得したい場合は以下のように指定します。
let target = document.querySelectorAll('.aaa:not(.bbb)');
//targetにはitem1とitem3の要素が配列として格納されます上記のコードの場合、class名「aaa」が付与されているが「bbb」というclass名も付与されている「item2」は否定され、「target」には「item1」と「item3」のHTML要素が配列として格納されます。
querySelectorAll()やquerySelector()は、他にもdivやpでの指定、「>」などを使った子要素の指定など様々な用途に利用可能となっています。
※querySelectorAll()とquerySelector()の違いは、返されるHTML要素が全てなのか、最初の1つ目なのかの違いとなっています。