◆ elem.classList.add でクラスの追加ができる
◆ 同様に remove, toggle, contains で削除などもできる
◆ ただ 空文字列を入れるとエラーになるので注意 
最近 classList というのを知りました


すごく　便利です

classListとは

JavaScript でクラス操作つらい

jQuery なんかではクラスを楽に扱えますが ただの JavaScript ではすごく面倒なものです
クラスを追加するときに
var re = new RegExp("(^|[^a-zA-Z0-9\-\_])" + add_cls + "([^a-zA-Z0-9\-\_]|$)")
if(!elem.className.match(re)){
elem.className = (elem.className + " " + add_cls).trim()
}
クラスを外すときに
var re = new RegExp("(^|[^a-zA-Z0-9\-\_])" + rm_cls + "([^a-zA-Z0-9\-\_]|$)", "g")
elem.className = elem.className.replace(re, " ").replace(/\s+/g, " ").trim()
クラスがあるか確認するときに
var re = new RegExp("(^|[^a-zA-Z0-9\-\_])" + check_cls + "([^a-zA-Z0-9\-\_]|$)")
return elem.className.match(re)
もうちょっと楽しても
return [].indexOf.call(elem.parentElement.getElementsByClassName(check_cls), elem) >= 0
とすごく大変です

あったらなくして なければつける ということをするなら もっと複雑になります
私の場合 1要素1クラスで elem.className を完全に置き換えるか === で比較すればいい作りが多いので そこまで苦労してませんが 複数クラスをしないといけなくなると辛いです

クラス一覧を配列で持っていて add や remove みたいなメソッドで追加や除去が簡単にできて has とか contain みたいなメソッドで指定したクラスをもってるか見れるといいなー と思います

そこで classList です

まさにその 配列でもっていて 追加・削除・含むかどうか・切り替え が簡単にできます

なにそれ 便利すぎる　神ですか？？

知った時の衝撃は大きかったです

使い方は簡単

追加
elem.classList.add(add_cls)

削除
elem.classList.remove(rm_cls)

クラスを持っているか
elem.classList.contains(check_cls)

クラスを持っているかを切り替える
elem.classList.toggle(switch_cls)

クラス名それぞれに対して何かする
elem.classList.forEach(function(e){
console.log(e) // とりあえずクラス名を出力
})

HTML属性の並びで n番目のクラス名を取り出す
elem.classList.item(n)


便利すぎです！

他にも
keys, values, entries というイテレータを返すメソッドもあります
配列などのにあるのと同じです
イテレータに対して .next() をすると 0, 1, 2 と キーが1つずつ返ってくるか 値（クラス名）が返ってくるか 両方が [key, classname] の形の配列で返ってくるか の違いです

これのおかげで やっぱり jQuery なんていらなかったんだ と言えますね


ただ 注意点があって こんなコードはエラーになります
elem.classList.add(flag ? "class-01" : "")
add に限らずですが 引数に空文字列は許可されていません
条件によって なにもしないということはできないようです

メソッドチェーンでやりたいときに不便……と思いましたが まずこれらのメソッドはチェーン非対応なので気にする必要はないですね
チェーン用にラップメソッド作るならそのときに 空文字なら ネイティブの add メソッドを呼ばないように作りましょう