JavaScriptでは、Webページ上で行われる各アクションに対応する処理を追加したい時など、HTMLの要素を取得して操作するケースが多々あります。
要素を取得するためのメソッドは様々ありますが、その中でも便利なのが、CSSセレクターを使って要素を取得する querySelectorメソッドです。
今回は、JavaScriptで querySelectorメソッドを使用する方法について解説していきたいと思います。
目次
querySelectorメソッドとは？
querySelectorは、JavaScriptのDOM要素を取得する際に使用するメソッドです。
似たような役割を持つメソッドに、IDで取得する要素を指定する getElementByIdメソッドや、クラスで指定する getElementsByClassNameメソッドなどがありますが、querySelectorの場合は CSSセレクターを使って要素を指定します。
getElementByIdや getElementsByClassNameが、IDやクラスなど特定の属性の要素のみしか取得対象にならないのに対し、querySelectorは１つのメソッドで様々な属性の要素に対応できるため、他のメソッドよりも柔軟性が高いのが特徴です。
「セレクター」とは？
CSSセレクターとは、設定したスタイルをどの要素に適用するかを決めるために使用するパターン表記のことを言います。
HTMLタグやID、クラスなど、それぞれの属性ごとに決まったパターンで記述することで、各ブロック内で設定したスタイルを対象の要素に反映させることができます。
【例: クラス名 「sample」 の要素を指定】
|
1 2 3 |
<span class="line"><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">sample</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200px</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #89DDFF">}</span></span> |
querySelectorメソッドは、このCSSセレクターを使用して DOM要素を取得するため、同じメソッドで様々な属性の要素に対応することができます。
querySelectorの使い方
それでは早速、querySelectorメソッドの使用方法について見ていきましょう。
基本構文
querySelectorメソッドを使用する際の基本構文は、以下のとおりです。
JavaScript
|
1 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> 変数名 </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelector</span><span style="color: #EEFFFF">(セレクター)</span><span style="color: #89DDFF">;</span></span> |
引数に渡すセレクターは、CSSで指定する際と同様のパターンで、文字列として記述します。
以下の簡単な例を元に、基本のセレクターをいくつか紹介します。
HTML
|
1 2 3 4 5 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sample</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sampleText</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> |
タグセレクターを選択
|
1 2 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelector</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">p</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(item)</span><span style="color: #89DDFF">;</span></span> |
コンソール出力
|
1 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sampleText</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> |
クラスセレクターを選択
|
1 2 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelector</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">.sample</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(item)</span><span style="color: #89DDFF">;</span></span> |
コンソール出力
|
1 2 3 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sample</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sampleText</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span> |
IDセレクターを選択
|
1 2 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelector</span><span style="color: #EEFFFF">(“#sampleText”)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(item)</span><span style="color: #89DDFF">;</span></span> |
コンソール出力
|
1 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sampleText</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> |
一致する要素が見つからなかった場合は、nullが返されます。
また、様々な属性の要素に対応できる querySelectorメソッドですが、使用の際には気を付けるべき点が１つあります。
まずは、以下の例を見てみましょう。
HTML + JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sample</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample1</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample2</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample3</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span> <span class="line"></span> <span class="line"><span style="color: #89DDFF"> <</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> text </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelector</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">p</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF"> console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(text)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> |
上記の例では、メソッドの引数に渡したCSSセレクターに該当する要素が全部で3つ存在します。
ですが、メソッドの取得結果は以下のように、１つの要素のみしか取得されていません。
コンソール出力
|
1 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample1</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> |
このように、指定したセレクターに合致する要素が複数あった場合には、一番初めに一致したものしか取得することができないので注意が必要です。
querySelectorAllの使い方
上述したように、指定のCSSセレクターに該当する要素が複数あった場合でも、querySelectorメソッドで取得できるのは最初に一致した１つの要素のみです。
ですが、処理する内容によっては、対象の要素を全て取得したいケースもあるかと思います。
この場合に使用すると便利なのが、querySelectorAllメソッドです。
基本構文
querySelectorAllメソッドの基本構文は、先ほどとほとんど変わりません。
JavaScript
|
1 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelectorAll</span><span style="color: #EEFFFF">(セレクター)</span><span style="color: #89DDFF">;</span></span> |
このメソッドを使用すると、対象の要素全てを含む NodeListオブジェクトを戻り値として返します。
HTML + JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">sample</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample1</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample2</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample3</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span> <span class="line"></span> <span class="line"><span style="color: #89DDFF"> <</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelectorAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">p</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF"> console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(list)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">body</span><span style="color: #89DDFF">></span></span> |
コンソール出力
|
1 |
<span class="line"><span style="color: #EEFFFF">NodeList(3) [p, p, p] ...</span></span> |
結果を見ると、querySelectorでは１つのみしか取得できていなかった pタグの要素が、３つ全てリスト内に含まれているのが分かると思います。
このように、querySelectorAllメソッドを使用することで、指定のセレクターに一致する要素を一度に全て取得することができます。
forEachで取得した要素全てを操作する
querySelectorAllメソッドの戻り値である NodeListオブジェクトは、Arrayに似た構造をしているものの、データ型としては異なる別のオブジェクトとなっています。
ですが、NodeListオブジェクトも Arrayと同じように、forEachメソッドで反復処理を行うことができます。
先ほどのサンプルコードで取得した３つの要素を、実際に forEachメソッドを使用してリストから取り出してみましょう。
JavaScript
|
1 2 3 4 5 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelectorAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">p</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"></span> <span class="line"><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">forEach</span><span style="color: #EEFFFF">(</span><span style="color: #EEFFFF; font-style: italic">item</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span> <span class="line"><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">item</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> |
コンソール出力
|
1 2 3 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample1</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample2</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> <span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample3</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> |
メソッドによって、各要素の内容がコンソールに表示されているのが分かりますね。
このように、ループ処理によって NodeListオブジェクトの各要素にアクセスすることができます。
また、インデックスによる要素へのアクセスも、Arrayと同じように行うことができます。
JavaScript
|
1 2 3 |
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">querySelectorAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">p</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> list[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">;</span></span> <span class="line"><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(item)</span><span style="color: #89DDFF">;</span></span> |
コンソール出力
|
1 |
<span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">sample2</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></span> |
基本的な操作は Arrayと似た部分が多いオブジェクトのため、Arrayの扱いに慣れることで NodeListオブジェクトも問題なく扱うことができるかと思います。
また、型変換が必要な場合には、Array.fromメソッドを使用して NodeList から Array へと型変換することも可能です。
まとめ
いかがでしたか？今回は、JavaScriptで querySelectorメソッドを使用する方法について解説しました。
DOM要素を取得する際に使用する各メソッドは、それぞれメリットや対応可能な範囲が異なるので、それぞれの特徴を把握して使い分けるようにしていきましょう。
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
