JavaScript だけで hasClassをする方法

背景

jQuery のhasClass()は、要素に指定されたクラス名が割り当てられているかどうかを判定するために便利な関数である。しかし、jQuery の依存性を避けるため JavaScript だけでhasClassを実装したい。

jQuery のhasClass()

jQuery のhasClass()は、以下のように要素が指定されたクラス名を持っているかどうかを判定する。

$("#example").hasClass("className");

指定のクラスが存在する場合はtrue、存在しない場合はfalseを返す。

JavaScript の場合

ES6 からは classList.contains が利用できる。containsは jQuery のhasClass()と同様に指定のクラスが存在する場合はtrue、存在しない場合はfalseを返す。

const element = document.querySelector("#element");
element.classList.contains("className");