JavaScript - querySelectorAll()の使い方

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

querySelectorAll()も戻り値はNodeListオブジェクトです。

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

querySelectorAll()の構文

document.querySelectorAll(セレクター)

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

サンプルコード

HTML

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

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

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

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

JavaScript

セレクターに「p要素」を指定して、全てのp要素を取得します。

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

for (var i = 0; i < nodes.length; i++){
	console.log(nodes[i].textContent);
}

console.log(nodes);

// 実行結果 ------

コンテンツ1
コンテンツ2
コンテンツ3

NodeList(3)

実行結果からわかるように、NodeListオブジェクトを戻り値として戻します。

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

上記のHTMLを利用して、存在していない要素「div要素」をセレクターに指定してみます。

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

for (var i = 0; i < nodes.length; i++){
	console.log(nodes[i].textContent);
}

console.log(nodes);

// 実行結果 -----

NodeList []

このように、該当要素がない場合は空のLodeListオブジェクトが返ってきます。