javascriptでclassを操作するclassListの使い方【脱jQuery】
皆さんこんにちは、最近サバゲーを始めたフロントエンドエンジニアのアツシです。
さて、今回は脱jQueryの第二弾
classを操作するclassListの使い方について解説していこうと思います。
脱jQuery第一弾はこちら
ネイティブjavascriptでHTMLの要素を取得する！脱jQueryはじめの一歩
classListでclassを取得する
「DOMTokenList」と言う形式で取得されます。
HTML
- <div id="foo" class="bar baz"> </div>
javascript
- var foo = document.getElementById('foo');
- var classes = foo.classList;
- console.log(classes);
console
- ▼DOMTokenList {
- 0: "bar"
- 1: "baz"
- length: 2
- value: "bar baz"
- ▶︎DOMTokenListプロトタイプ }
DOMTokenListは配列になっていて使いやすいです。
ただしclassListは読み取り専用の為書き込みは出来ません。
classを操作する方法は次から紹介して行きます。
classList.add()でclassを追加する
jQueryのaddClass()
要素にquuxというclassを追加してみます。
javascript
- foo.classList.add('quux')
- foo.classList.add('quux','quuux') // 複数追加もできる
実行結果は次の様になります。
HTML
- <div id="foo" class="bar baz quux quuux"> </div>
classList.remove()でclassを削除する
jQueryのremoveClass()
上の結果からclassを削除してみる
javascript
- foo.classList.remove(' bar')
- foo.classList.remove(' bar','baz') // 複数削除もできる
実行結果は次の様になります。
HTML
- <div id="foo" class="quux quuux"> </div>
classList.toggle()で特定のclassを切り替える
jQueryのtoggleClass()
classがあると削除
classがないと追加する
javascript
- foo.classList.toggle(' bar')
- foo.classList.toggle(' bar','baz') // 複数もできる
classList.contains()で特定のclassを含むか確認する
jQueryのhasClass()
classがあればtrue
無ければfalse
javascript
- foo.classList.contains(' bar')
- foo.classList.contains(' bar','baz') // 複数もできる
複数の指定をした場合はどれか一つでも含んでいればtrueになります。
まとめ
どうでしたでしょうか
jQueryと同じ感覚で扱えると思います。
jQueryでできる事を置き換えていけば
比較的簡単にネイティブjavascriptを扱える様になれると思います。
一気には難しいかもしれませんが少しづつでも前進して行きましょう！
ではでは！