JavaScriptで要素に特定のclassがあるかどうか調べる

素の JavaScript (ライブラリ無し) で、特定の要素に対して特定の class が存在するかどうか、class の有無を調べる記述を3つ紹介します。
この内どれを使うかは、ターゲットとなるブラウザ次第になると思います。

  1. ユーザー定義関数 hasClass() を使う
  2. document.querySelector() を使う (IE8 以上)
  3. Element.classList.contains() を使う (IE10 以上)

ユーザー定義関数 hasClass() を使う

Element - Web API インターフェイス | MDN
element.className - Web API インターフェイス | MDN
String.prototype.replace() - JavaScript | MDN
正規表現 - JavaScript | MDN
String.prototype.indexOf() - JavaScript | MDN

 ちょっと面倒ですが、原始的に関数で済ませる方法です。
きっかけは英語サイトで見つけたコードですが、冗長な部分を自分なりに最適化しました。

まず、第一パラメータに Element (要素) をオブジェクトで、第二パラメータに探したい class 名を String (文字列) で渡します。

(' ' + element.className + ' ') で対象の要素の class をすべて取得し、前後をスペースで繋げます。(スペースを付け足す理由は、後ほど説明します。)
Element.className は要素の class="" 内の文字をひと繋ぎの文字列として取得しますが、改行文字やタブ文字もそのまま取得されてしまいます。
なので、この場合 .replace(/[\n\t]/g, ' ') で予め改行文字やタブ文字をスペースに置き換える必要があります。(\n は改行で、 \t はタブの意。)

その後、.indexOf() で文字列が含まれるかどうか検索します。
検索文字の両端にあるスペースは、検索対象の文字列を内包するクラス名 ('ref' を検索した時の 'Firefox' など) を回避するため、区切り文字として使っています。

見つからなかった場合は -1 が返ってくるので、比較演算子を使い true/false 判定を最後に行います。
このとき、-1 (見つからなかった場合) は false、それ以外の数字 (見つかった文字の位置を示す数字が返ってきた場合) は true と判定され、その結果が関数の return 値となります。

参考にしたコード
Pure js hasClass vs jQuery hasclass · jsPerf
(40 ほど Revisions があるので、興味のある方は追ってみてください。)

document.querySelector() を使う (IE8 以上)

document.querySelector - Web API インターフェイス | MDN

 少し強引ですが、IE8 以上ならこの方法でも判定することができます。
CSS セレクタ風に書くことができ、存在しない場合は null、存在する場合は該当した要素が返ってくるため、そのまま if 文の判定にも使うことができます。

ただしこの場合、再度要素を検索する必要があるのと、既に取得済みで変数に格納している要素や this を渡すことはできないため、必ずしも上位互換という訳ではありません。

Element.classList.contains() を使う (IE10 以上)

element.classList - DOM | MDN
//caniuse.com/#search=classList

HTML5 を使った、スマートな記述です。
Element.classList は先述の Element.className とは違い、class を配列で取得するので、非常に使い勝手が良くなっています。

HTML5 なので、IE10 から…となかなか厳しめですが、IE9 以下は CSS Animation もサポートしないため、その辺りを目安に判断すればよいかと思います。
また、Android 2.3 もサポートしていないのでお気をつけを。

Element.classList はクラスの追加・削除・トグルも容易にできるので、是非一度お試しください。

 

長々と説明しましたが、これにてお終いです。
やっぱりライブラリを使ったほうが楽ですが、最近は Pure JS も便利になり(かけて)いるようですね。
世の中が平和になる日を願って止みません。

 

ではではー