JavaScript

JavaScript querySelectorAll method.

querySelectorAll

 querySelectorAllメソッドとは、指定したセレクタに一致するすべての HTML要素(NodeList)を取得するメソッドです。

querySelectorAllメソッドの使い方

 querySelectorと同じく、querySelectorAll(<selector>) のように、取得したい要素に合致するセレクタを引数として渡して使います。

 以下のHTMLで具体例を見てみましょう。


<input name="one" type="text">
<input name="two" type="text" class="my_class">
<input name="three" type="text" class="my_class three">
<ul>
	<li>one</li>
	<li class="my_class">two</li>
	<li class="my_class three">three</li>
</ul>

 input要素をすべて取得してみます。


const elements = document.querySelectorAll('input');
console.log(elements);
// => NodeList(4) [input, input.my_class, input.my_class.three]
クラスにmy_classを持つ要素をすべて取得してみます。
const elements = document.querySelectorAll('.my_class');
console.log(elements);
// => NodeList(4) [input.my_class, input.my_class.three, li.my_class, li.my_class.three]

 input, liのどちらも取得できてしまうので、liに限定したい場合は下記のようになります。


const elements = document.querySelectorAll('li.my_class');
console.log(elements);
// => NodeList(2) [li.my_class, li.my_class.three]