ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

脱jQuery~JavaScriptに支配されないための真の思考法~ addClassメソッド

jQueryのaddClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

まずは、addClassメソッドを使って一つクラス名を設定する方法について。

// jQuery
$('#hoge').addClass('foo');

// JavaScript
document.querySelector('#hoge').classList.add('foo');

// jQuery
$('.hoge').addClass('foo');

// JavaScript
document.querySelectorAll('.hoge').forEach(function(currentValue){
  currentValue.classList.add('foo');
});

次にaddClassメソッドを使って複数のクラス名を設定する方法について。

// jQuery
$('#hoge').addClass('foo bar');

// JavaScript
'foo bar'.split(' ').forEach(function(currentValue){
  document.querySelector('#hoge').classList.add(currentValue);
});


// jQuery
$('.hoge').addClass('foo bar');

// JavaScript
document.querySelectorAll('.hoge').forEach(function(currentElement){
  'foo bar'.split(' ').forEach(function(currentValue){
    currentElement.classList.add(currentValue);
  });
});

addメソッドはクラス名を複数設定することができるみたいなのだが、IE11が対応していないのでループをまわした書き方にした。