今回はタイトルにもある通り、複数のクラス名を指定して要素を取得する方法についてです。
とあるプロジェクトで要素を取得する際に、たとえば A と B という 2つのクラスが指定されている要素のみを取得したいということがあったのですが、そういえばこのやり方知らないな…と思い、備忘録としてまとめます。
今回、参考にさせていただいた記事はこちらから。
getElementsByClassName()でクラスを複数指定する時の注意点 | ITライフ
https://infoteck-life.com/a0194-js-getbyclassname-multiple/
使用するメソッドは getElementsByClassName() です。
取得する方法はいたって簡単で、引数にクラス名を半角スペース区切りで指定するだけでした。
サンプルコードはこちら。
まず、HTML です。
<div class="Aclass">Aクラス</div> <div class="Bclass">Bクラス</div> <div class="Aclass Bclass">AクラスとBクラス</div>
JavaScript のコードはこちら。
const elements = document.getElementsByClassName("Aclass Bclass");
for (let i = 0; i < elements.length; i++) {
console.log(elements[i]);
}
上記を実行すると、3行目のコンソールでは Aclass と Bclass が指定された要素である <div class="Aclass Bclass">AクラスとBクラス</div> のみが取得できました！
実装するコードは以上です！
しかし、サンプルを見てわかる通り、この方法では Class 名に Aclass かつ Bclass が設定された要素のみしか取得できません。
もし、Class 名に Aclass または Bclass が設定された要素を取得したい場合は、querySelectorAll() メソッドを使用してください。
サンプルコードは下記のとおりです。
const elements = document.querySelectorAll('.Aclass, .Bclass');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i]);
}
こちらを実行すると、Class名に Aclass または Bclass が指定された要素が全て取得できます。
つまり、今回のサンプルではすべての要素を取得できます。
実行したい条件によって、こちらのメソッドを使い分けてください。
なお、getElementsByClassName() メソッドと querySelectorAll() メソッドでは、引数の指定が若干異なるのでご注意ください。
getElementsByClassName() は半角スペース区切りですが、querySelectorAll() では、クラス名の前に .（ドット）が付き、区切り文字はカンマになります。
ちょっと紛らわしいですね…。
私も気をつけたいです。
以上、JavaScript で複数のクラス名を指定して要素を取得する方法でした。
ご参考になれば幸いです。
