読み方：クエリセレクタ

querySelector

querySelectorとは？

JavaScriptでWebページ内の特定の要素を取得するためのメソッド。ブラウザはHTMLで書かれた文書をDOM（Document Object Model）というツリー構造として管理しており、querySelectorはそこから条件に合う要素を見つけ出す。

基本的な記法は「document.querySelector（"セレクタ"）」で、引数に渡すセレクタには、CSSでスタイルを当てる際に使う記法をそのまま利用できる。「#main」のようにIDを指定したり、「.button」のようにクラスを指定したりするほか、「特定のクラスを持つ要素の中の最初の段落」といった複合条件も一行で表現できる。CSSの書き方に慣れている人であれば、そのまま応用できるため学習コストが低い。

querySelectorが登場する以前は、IDで要素を取得する「getElementById」、タグ名で取得する「getElementsByTagName」というように、目的ごとに異なるメソッドを使い分ける必要があった。querySelectorはこれらを一本化し、CSS セレクタという共通の記法で様々な要素にアクセスできる。

条件に一致する要素が複数あった場合、querySelectorが返すのはページ内で最初に見つかった一つだけである。複数の要素をまとめて取得したい場合は「querySelectorAll」を使う。こちらは一致したすべての要素を「NodeList」と呼ばれるリスト形式で返す。

条件に合う要素が存在しない場合、querySelectorはエラーを発生させずに「null」を返す。取得した値をそのまま操作しようとすると、nullに対する処理としてエラーが起きる場合があるため、実用的なコードでは取得結果がnullでないことを確認してから次の処理に進むように記述するのが一般的である。