【javascript】classList を使って class を操る

対象者

• javascript で class を追加したり削除したりなんのしたい方
• そもそも getElementById で null が返ってきて困っている方

動的に class を追加したり削除したりしたい時、
「getElementById とか classList を使うのは何となく覚えているけど、どう書くんだっけ…」
ってことがあったので、パッと見つけられるように簡単に備忘録。

javascript で class を追加・削除

例として、下記のようなHTMLがあって、
javascript で要素に class を 追加したり削除したりしたいとき、
classList を利用するとそれができる。

HTML

<div id="dog" class="chiwawa shiba">犬</div>

classに追加する

javascript

document.getElementById("dog").classList.add("Pomeranian")
// class="chiwawa shiba Pomeranian"

document.getElementById("dog")
→ id="dog" の要素を見つけてくれる。

classList.add("Pomeranian")
→ ここで、Pomeranian が class に追加される。

classから削除する

javascript

document.getElementById("dog").classList.remove("chiwawa")
// class="shiba Pomeranian" 

classList.remove("chiwawa")
→ chiwawa が class から削除される。
先ほど追加した Pomeranian と、もともと class にあった shiba だけが残る。

<便利> 指定したclass名があったら削除、なかったら追加

javascript

document.getElementById("dog").classList.toggle("Pomeranian")
// class="shiba" 

classList.toggle("Pomeranian")
→ class に Pomeranian があるため、削除される。

javascript

document.getElementById("dog").classList.toggle("poodle")
// class="shiba poodle" 

classList.toggle("poodle")
→ class に poodle がないため、追加される。

getElementById で null が返ってくる場合

console.log(document.getElementById("xxx"))
で、null が返ってくる場合の対処法。

解決方法

そもそも id があっているか確認する

例：HTML

<div id="dog" class="chiwawa shiba">犬</div>

例：javascript

document.getElementById("cat")

document.getElementById("cat") で、id="cat" を見つけ出せず null が返ってくるパターン。
document.getElementById("dog")にしてあげるか、
HTML側を id="cat" にして、id を合わせてあげることで解決できる。

ロード順を見直す

HTML を先に読み込んでから、javascript を読み込むようにすることで解決できるパターン。
これに関して、2つ方法がある。

①【JavaScript】getElementByIdでnullが返ってきたときに確認すること

HTML よりも先に javascript を読み込んでしまっていることで、
id を見つけ出せず、 null になってしまう。
そのため、HTML と javascript の読み込み順を入れ変えてあげれば解決。

② HTMLの読み込みが完了してから実行

javascript側で、HTMLの読み込みが終わってから実行するようにする方法。

javascript

window.onload = function () {
  document.getElementById("dog").classList.add("Pomeranian");
  // HTMLの読み込み後に実行されるため、id="dog"が見つけ出せる。
};

参考

Element.classList
　classList の使い方が詳しく載っている。

【JavaScript】classListの使い方まとめ(add.remove.contains.toggle)
　ボタンを押したら色が変わることを例に、実用的かつ分かりやすい。