【JavaScript 復習】querySelector()とclassListを使ってclassを着脱するサンプル

実装したサンプル

タイトルの通り、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']");

マッチする全ての要素を取得したい場合は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操作が面倒だった時代は終わったのかもしれませんね。

参考サイト

JavaScript classListでクラス属性を操作するゾ – かもメモ

コメントをどうぞ!