【JavaScript】jQueryを使わずにclass属性を操作する処理を書く

例えば、

<div id="main" class="foo bar">
</div>

こんな感じのHTMLに対して処理を書くとき。

// クラスを追加
document.getElementById('main').classList.add('piyo');
// document.querySelector('.foo').classList.add('piyo'); でも同じ処理になる
// 以下同様

// クラスを削除
document.getElementById('main').classList.remove('piyo');

// クラスがなければ追加、あれば削除
document.getElementById('main').classList.toggle('hoge');

// クラスが存在すればtrue、なければfalseを取得
document.querySelector('.foo').classList.contains('bar');