JavaScript - querySelector()とquerySelectorAll()の違い

JavaScriptでは、セレクターを使った要素取得方法として、 querySelector()、querySelectorAll()メソッドがあります。

ここでは、この2つのメソッドの共通点と違いについて紹介します。

共通点: セレクター式で指定する

どちらもCSSで使用するセレクター式を指定します。

ですから、getElementById()などのget○○系では、 検索できない複雑な条件を指定できます。

違い: 戻り値の種類と数が違う

querySelector()の戻り値はElementオブジェクトで、 単一の要素が返ってきます。

一方、querySelectorAll()の戻り値はNodeListオブジェクトで、 複数の要素が返ってきます。

取得する要素が1つとわかっている場合や、最初の1つだけを取得したい場合は querySelector()を使い、それ以外はquerySelectorAll()を使います。

次のように、p要素が2つあるHTMLで、２つのメソッドの取得結果の違いをみてみます。

HTML

<p class="cls1">コンテンツ1</p>

<p class="cls2">コンテンツ2</p>

JavaScript

var elem = document.querySelector('p');

console.log(elem); // <p class="cls1">コンテンツ1</p>

var nodes = document.querySelectorAll('p');

console.log(nodes); // NodeList(2) [p.cls1, p.cls2]

このように、querySelector()はElementオブジェクト、 querySelectorAll()はNodeListオブジェクトを返します。

違い: 該当要素がない場合の戻り値が違う

該当要素がない場合、querySelector()の戻り値は「null」です。

一方、querySelectorAll()の戻り値は空のNodeListオブジェクトです。

サンプルコードとして、存在しない要素を指定した場合の戻り値を表示します。

「div要素」が存在しない場合、

var elem = document.querySelector('div');

console.log(elem); // null

var nodes = document.querySelectorAll('div');

console.log(nodes); // NodeList []

まとめ

・どちらのメソッドも、セレクター式で検索する点は同じです。

・querySelector()の戻り値はElementオブジェクトで、 querySelectorAll()の戻り値はNodeListオブジェクトです。

・該当要素がない場合、querySelector()は「null」を戻し、 querySelectorAll()は空のNodeListオブジェクトを戻します。