[JavaScript] querySelector() の使い方

2020-06-12JavaScriptVanillaJS

querySelector() を使った要素取得やスタイルの変更など DOM (Document Object Model) 操作一覧。
querySelector() は、素の JavaScript (JS) で jQuery っぽく要素を取得することができる。これまでの JS では、getElementById() とかで要素を取得できたが、複雑な操作を簡単に記述するには向いていない。 jQuery に慣れていると、セレクタが使えるととても便利。

querySelector() とは

querySelector() とは、JavaScript の「セレクタ API 」と呼ばれる API の中のメソッド。

セレクタとセレクタ API については、以下の説明が分かりやすかった。

そこで昨今では、「セレクタ」と呼ばれる記法が活用される場が増えてきている。セレクタとは、HTML文書内部の要素を、階層構造やclass（クラス）や属性、順番などの条件で取得するためのクエリのこと。旧来からCSSでは利用されている記法だ。外部ライブラリにはなるが、jQueryでもセレクタを使用することで、classやIDなどを指定してシンプルに要素にアクセスできる。　

そしてHTML5でもいよいよ、標準の仕様としてセレクタAPIが定義された。セレクタAPIは「CSSセレクタにマッチした要素を取得するためのメソッド」だ。これを利用することで、jQueryに頼ることなく、標準的なJavaScriptのみでjQueryのような要素の取得ができるようになる。

https://www.atmarkit.co.jp/ait/articles/1110/07/news125.html

querySelector() と querySelectorAll() というメソッドがある。

querySelector()	指定した要素のうち、最初に見つかった要素 ( 1 つだけ)を返す。
querySelectorAll()	指定したすべての要素を NodeList 形式で返す。

処理速度は getElementsBy… の方が速いので、単に要素を取得するだけなら querySelector() より getElementsBy… を使った方がいい。

要素を取得

指定した要素が見つからなかった場合、 null が返る。

// ID で
document.querySelector("#hoge")

// クラスで
document.querySelector(".hoge")

// 要素 (p タグ) で
document.querySelector("p")

// 属性で
document.querySelector("input[type='number']")

// カンマ区切りで複数指定が可能
document.querySelector("#p1, #p3, .p")

input の値 value を取得

document.querySelector("input[type='number']").value

input の値 value を設定

document.querySelector("input[type='text']").value = "fugafuga"

テキストとかを取得

document.querySelector("p").innerHTML

テキストとかの設定

document.querySelector("p").innerHTML = "hogehoge"

ボタンをクリックしたとき

document.querySelector("#b1").onclick = function() {...}

Style の変更

.style.~ と書く。

// 背景
document.querySelector("body").style.background = "#C2EEFF";

// 非表示を表示
document.querySelector("#p1").style.visibility = "visible";
document.querySelector("#p1").style.display = "none";

// 表示を非表示
document.querySelector("#p1").style.visibility = "hidden";
document.querySelector("#p1").style.display = "block";

クラスの操作

classList を使う。.classList.~() と書く。
* 以降出てくる “hogeClass" はクラス名。

追加

add() を使う。

document.querySelector("#hoge").classList.add('hogeClass');

削除

remove() を使う。

document.querySelector("#hoge").classList.remove('hogeClass');

切り替え (トグル)

toggle() を使う。

document.querySelector("#hoge").classList.toggle('hogeClass');

// 第二引数に条件を入れることもできる。
document.querySelector("div").classList.toggle("hogeClass", cnt%3 == 0)

例えば下記で、自分が思っていた動きは、(クリックすると Num の数が増える。) Num が 3 になったとき “chgColor" クラスが追加され背景色が水色になり、Num が 5 まで水色で、 6 のときに白に戻るだった。しかし実際は、 3 の倍数でクラスが追加され、 3 の倍数でないときはクラスが外される。

See the Pen querySelector toggle by AgoPeanuts (@AgoPeanuts) on CodePen.

存在確認

contains() を使う。返り値は true / false 。

document.querySelector("div").classList.contains("hogeClass")

入れ換え

replace() を使う。"hogeClass" クラスが “fugaClass" クラスに入れ換わる。

document.querySelector("div").classList.replace("hogeClass", "fugaClass");

注意！

Firefox 26 以前のバージョンでは、 add/remove/toggle メソッドでいくつかの引数の使用方法を実装していません。

https://developer.mozilla.org/ja/docs/Web/API/Element/classList