JavaScript - querySelector()の使い方

JavaScriptでセレクターに一致する最初の要素を取得する場合は、 querySelector()メソッドを使います。

最初の要素だけでなく、すべての要素を取得したい場合は、 querySelectorAll()メソッドを使います。

querySelector()の戻り値はElementオブジェクトで、 該当要素がない場合は、nullを返します。

querySelector()の構文


document.querySelector(セレクター);

セレクター = CSSで使われている記法

サンプルコード

HTML

次のように、p要素を3つ用意します。


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

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

<p class="cls3">コンテンツ3</p>

JavaScript

セレクターに「p要素」を指定します。


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

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

console.log(elem.textContent); // コンテンツ1

表示結果からわかるように、 取得できるのはセレクターに一致する最初の要素のみで、 Elementオブジェクト(単一要素)です。

セレクターに一致する要素がない場合

上のHTMLを利用して、存在しないdiv要素を指定してみます。


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

console.log(elem); // null

該当要素がない場合は、nullを返します。