実装したサンプル
タイトルの通り、JavaScriptのquerySelector()とclassListを使い、DOM要素にclassをつけたり外したりするスクリプトのサンプルを作ってみました。
See the Pen
class attach test by kouichi hoshi (@kouichi_hoshi)
on CodePen.
querySelector()
引数で渡した値にマッチするhtml要素の最初のひとつを取得します。
HTMLElementが返されます。
const foo = document.querySelector("p");
const bar = document.querySelector("#id");
const baz = document.querySelector(".class");
const bee = document.querySelector("div.user-panel.main input[name='login']");
querySelectorAll()
マッチする全ての要素を取得したい場合はdocument.querySelectorAll()を使います。
NodeListが返却されます。
const all = document.querySelectorAll("p");
jQueryライクに記述できて便利です。
classList
document.querySelector("p").classList.add("red");
のように記述すると、取得したhtml要素に対して引数で渡した値をclassとして付与することができます。
document.querySelector("p").classList.remove("red");
のように記述すると、引数の値にマッチするclassを除去します。
document.querySelector("p").classList.contains("red");
classの有無を判定し、真偽値を返します。
document.querySelector("p").classList.toggle("red");
とし、クリックイベントなどで発火させればclassの着脱が可能。
IEを気にすることはほとんど無くなったし、jQuery無しのDOM操作が面倒だった時代は終わったのかもしれませんね。