JavaScriptのquerySelectorAllメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのquerySelectorAllメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

セレクタについて

querySelector, querySelectorAll メソッドの前に、セレクタについて簡単に確認しておきましょう。

セレクタ(CSS セレクタ) は、ページ中のHTML要素を選択するための指定方法(書き方)のようなものです。

主なものをいくつか挙げておきます。

• 要素型セレクタ: input などのタグ名を指定
• クラスセレクタ: 要素に設定されているクラス名を .classname のように「.」始まりで指定
• ID セレクタ: 要素に設定されている ID を #id のように「#」始まりで指定
• 属性セレクタ: 要素に設定されている属性を [name] のように「[]」で囲って指定

他にもありますが、詳しくはMDNや、検索して出てきたページにてご確認ください。

querySelectorメソッドとは

querySelectorメソッドとは、指定したセレクタに一致する最初のHTML要素(Element)を取得するメソッドです。

[PR] フロントエンドで副業する学習方法を動画で公開中

querySelectorメソッドの使い方

querySelector(<selector>) のように、取得したい要素に合致するセレクタを引数として渡して使います。
以下の HTML で具体例を見てみましょう。

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

先頭の input 要素を取得したい場合は、単純に input を引数として渡せば良いです。

const element = document.querySelector('input');
console.log(element);
// => <input name="one" type="text">

2番目の input 要素を取得したい場合は、いくつかの方法があります。
先ほどのHTMLをよく見ると、2番目のinput要素は「クラスとしてmy_classを持つ最初の要素」となっています。
クラス指定で取得してみましょう。

const element = document.querySelector('.my_class');
console.log(element);

// => <input name=”two” type=”text” class=”my_class”>

上記でも問題ないのですが、<input name=”one” type=”text”> が <input name=”one” type=”text” class=”my_class”> に変更されてしまうと、上手く動作しなくなります。

※例えば、コーディングミスで設定が漏れていた分が修正された、などのケースです。

そのため、一意に取得できる指定方法を考えてみましょう。今回はそれぞれにname属性が設定されているので、そちらを使いましょう。

const element = document.querySelector('input[name="two"]');
console.log(element);
// => <input name="two" type="text" class="my_class">

 

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]

 

筆者プロフィール

メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。