JavaScriptでHTMLのclassの追加、削除をする

問題

jQueryで、addClass、removeClass、toggleClass しているのを、

素のJavaScriptで書きたいのですが、

難しいですか？

答え

昔はやりづらくてjQueryが便利だったが、

今となってはブラウザのJavaScriptでもclassの追加、削除、トグルが簡単にできるようになっている。

classの追加

$('セレクタ').addClass('xxxx')

document.querySelector('セレクタ').classList.add('xxxx')

classの削除

$('セレクタ').removeClass('xxxx')

document.querySelector('セレクタ').classList.remove('xxxx')

classのON/OFF

$('セレクタ').toggleClass('xxxx')

document.querySelector('セレクタ').classList.toggle('xxxx')

classの有無の確認

$('セレクタ').hasClass('xxxx')

document.querySelector('セレクタ').classList.contains('xxxx')

-----

jQueryだと、要素に対してclassを追加削除する雰囲気。

JavaScriptでは要素のclassListに対して操作する形。

既に存在するclassをaddしても何もしません。なので同じclassが何個も追加されたりはしません。

存在しないclassをremoveしても何もしません。何度もremoveしてもエラーになりません。