classList(add.remove)って何？
特定のhtml要素にcssで記述したクラスを追加、削除するJavaScriptのメソッドです！
例えば下の要素に新しいクラスを付与したい時
html
<div id="demo">ピーマン</div>
js
<script>
const element = document.getElementById("id");
element.classList.add("green pepper");
<script>
classList.addした後
<div id="demo" class="green pepper">ピーマン</div>
ロジックとして
- div id="demo"をhtmlから取得
- 取得したdiv idにclassList.addでgreen pepperを付与
という流れになります
クラスを削除するとき
classList.removeする前
<div id="demo" class="greenpepper">ピーマン</div>
js
<script>
const element = document.getElementById("demo");
element.classList.remove("greenpepper");
</script>
class.List.removeした後
<div id="demo" class>ピーマン</div>
こちらのロジックは
- div id="demo"をhtmlから取得
- 取得したdiv idにclassList.removeでgreen pepperを削除
という流れになります
用途例
cssとの組み合わせでクリックした時に色を変えたり、要素を動かしたり様々な動きをつける事が可能になります！
最後に
簡単に要素の追加と削除が出来る便利なメソッドです！
さらにaddとremoveの動作を合わせたもっと便利なメソッドもあるのでどんどん使ってマスター出来るように一緒に頑張りましょう！
1/13 追記です。
いただいたコメントで知ったのですが使用したブラウザによってremove後の動作が異なるようです。知識不足でしたのでとても参考になりました。