JavaScript querySelectorAll method.
querySelectorAllメソッドとは、指定したセレクタに一致するすべての HTML要素(NodeList)を取得するメソッドです。
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]