JavaScript で要素にクラスが含まれているかどうかをチェックする
-
組み込みの
element.classList.contains()メソッドを使用して、要素に JavaScript のクラスが含まれているかどうかを確認する -
クエリセレクターと
Element.matches()メソッドを使用して、要素に JavaScript のクラスが含まれているかどうかを確認する -
indexOf()を使用して、要素に JavaScript のクラスが含まれているかどうかを確認する
HTML でクラスを使用すると、要素をグループ化し、スタイルや機能の観点からすべての要素に対して同じ操作を実行できます。そのため、1 行のコードでクラスを共有するすべての要素の動作を簡単に変更できます。
1つの要素を複数のクラスの一部にしたい場合があります。HTML を使用するとこれを行うことができますが、予期しない動作を回避するために従わなければならない特定のルールがあります。
さらに、JavaScript でクラスごとに要素を選択することは、それらが複数のクラスでタグ付けされている場合、少し注意が必要になります。心配しないでください。要素に特定のクラスが含まれているかどうかを確認できます。
組み込みの element.classList.contains() メソッドを使用して、要素に JavaScript のクラスが含まれているかどうかを確認する
当然のことながら、このユースケースは JavaScript でネイティブメソッドを使用するのに十分なほど一般的です。これは、他の特別な要件が含まれていない場合の最初のオプションです。
このメソッドの要点は、要素を取得し、その要素が属するすべてのクラスを反復処理してから、引数として指定したクラスが実際にリストの一部であるかどうかを確認することです。これが実際にどのように機能するかを次に示します。
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById('mydiv');
console.log(element.classList.contains('myclass1'));
出力：
true
上記の JavaScript コードは、最新のすべてのブラウザと互換性がありますが、非常に古いバージョンの Internet Explorer では問題が発生する可能性があります。
クエリセレクターと Element.matches() メソッドを使用して、要素に JavaScript のクラスが含まれているかどうかを確認する
クエリセレクターは非常に強力な JavaScript ツールです。特に、サードパーティのライブラリが必要ない場合を除いて、通常は jQuery が実行するすべてのことを実行できるためです。
この場合、クエリセレクターを使用すると、チェックを実行する要素を選択できます。一方、Element.matches() メソッドを使用すると、クラスが存在するかどうかをもう一度チェックできます。
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.querySelector('#mydiv');
console.log(element.matches('.myclass1'));
出力：
true
ご覧のとおり、これらのメソッドの両方に必要なコードは、複雑さと長さの点でほぼ同じです。ただし、クエリセレクタには、classList.contains() メソッドよりも新しいブラウザが必要なので、それにも注意してください。
indexOf() を使用して、要素に JavaScript のクラスが含まれているかどうかを確認する
最新のブラウザは上記の両方の方法をサポートしていますが、そのような贅沢はないかもしれません。したがって、コードが非常に古いバージョンのブラウザーと互換性がある必要がある場合は、indexOf()メソッドを使用して同じ結果を得ることができます。仕組みは次のとおりです。
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById('mydiv');
function containsClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}
console.log(containsClass(element, 'myclass1'));
出力：
true
当然、結果は同じですが、この方法はより複雑です。基本的に、containsClass というメソッドを作成します。このメソッドは、要素のクラスのリストを繰り返し処理します。
探しているクラスが見つかった場合、そのクラスのインデックスは 0 以上になり、メソッドは true を返します。