JavaScript だけで hasClassをする方法

背景

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

jQuery の`hasClass()`

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

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

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

jQuery（hasClass）の内部実装

内部実装は以下のような実装になっている。

// https://github.com/jquery/jquery/blob/main/src/attributes/classes.js#L142
hasClass = function (className) {
  var className,
    elem,
    i = 0;

  className = ' ' + selector + ' ';
  while ((elem = this[i++])) {
    if (elem.nodeType === 1 && (' ' + stripAndCollapse(getClass(elem)) + ' ').indexOf(className) > -1) {
      return true;
    }
  }

  return false;
};

// https://github.com/jquery/jquery/blob/main/src/core/stripAndCollapse.js#L5
function stripAndCollapse(value) {
  var tokens = value.match(/[^\x20\t\r\n\f]+/g) || [];
  return tokens.join(' ');
}

JavaScript の場合

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

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

背景

jQuery のhasClass()

JavaScript の場合

jQuery の`hasClass()`