便利だなと思ったquerySelector()を使いこなせるようにいくつか使い方をgetElementById() や getElemetnsByClassName()と比較してまとめてみます。
querySelector()とは？
querySelector()を使うとCSSのセレクタを使用して要素を取得することができます。
一致する最初の要素を取得します。全ての要素を取得する場合はquerySelectorAll()を使用します。
DOM(Document Object Model)のAPIの1つなので簡単にhtmlの要素を取得することが可能です。
例えばjQuery感覚で使えて便利だったり、WebデザイナーさんなどCSSでセレクタを駆使されてる方も扱い安いメソッドかと思います。
最近ではjQueryを使用せず、Javascriptだけで全て対応するという時代の流れもあるため覚えておく必要のあるメソッドと言えると思います。
構文
document.querySelector(cssセレクタ);
例 : document.querySelector(“p”);
例の場合だと一番最初のpタグの要素を取得します。
なぜquerySelector()が超便利？
普段から要素を取得する際に getElementById() や getElemetnsByClassName() なんかを使っていませんか？
この覚えづらいメソッドたちをquerySelector()で代用することができます。
querySelector()で置き換え早見表
| getElementById()など | querySelector() | 備考 |
|---|---|---|
| getElementById(‘id’) | querySelector(‘#id’) | idは一意のためquerySelector()を使用 |
| getElementsByClassName(‘class’) | querySelector(‘.class’) querySelectorAll(‘.class’) | 対象のclass全て取得する場合はquerySelectorAll()を使用 |
| getElementsByName(“name”) | querySelector(“タグ名[name=’name’]”) querySelectorAll(“タグ名[name=’name’]”) | nameは「 タグ名[name=’name’] 」 |
querySelector()だとidだから getElementById() クラスだから…のようにメソッドを気にすることなく使うことができます。
サンプルコード inputタグのvalueをquerySelector()で取得する
See the Pen querySelector test by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
上記のコードを貼り付けただけです。比較でgetElementsById()などのコードをコメントアウトして書いています。
// inputに入力された値をalertで返す
function blurFunctionID() {
let id = document.querySelector(“#id1”);
alert(id.value);
//getElementsById()の場合
//let id = document.getElementById(‘id1’);
// alert(id.value);
}
function blurFunctionClass() {
let class1 = document.querySelector(“.class1”);
alert(class1.value);
//getElementsByClassName()の場合
// let class1 = document.getElementsByClassName(‘class1’);
// alert(class1[0].value);
}
function blurFunctionNmae() {
let name = document.querySelector(“input[name=’name1′]”);
alert(name.value);
//getElementsByName()の場合
//let date_str1 = document.getElementsByName(“name1”);
//console.log(name[0].value);
}
.getElementsとなっているクラスなどは配列で値が取得されるためquerySelectorAll()で取得している場合と動きが似ています。
querySelectorAll()は以下記事のおまけで使っています。
使い慣れるまでは少し動きに戸惑いますが、感覚的に値を取得することができました。
おわり
getElementById() や getElemetnsByClassName() を覚えられなくていつも調べて書いていたので、もう調べる必要ないのかと感動しました。今まで書いていた記事でgetElementById()などを使っていたのを全て書き換えたいくらいです。知らなかったことすら恥ずかしく感じてきました。もっと良いコードに触れていかないとダメですね。
参考サイト
https://www.w3schools.com/jsref/met_document_queryselector.asp
