【JavaScript入門】querySelector()の使い方をまとめてみた

「JavaScript のquerySelector()の使い方を知りたい。getElementById()との違いや最近の業務での使われ方も知りたいなあ」

記事の信頼性

この記事は現役エンジニアのしのが執筆しております。JavaScriptが主戦場です。

querySelector()とは

早速ですがquerySelector()についてのご説明をします。

querySelector()はDOM(Document Object Model)と呼ばれる、HTMLの要素をJavaScriptで操作する仕組みの中で使われるメソッド(動作)になります。

querySelector()を使う事で取得したい任意のid名、class名、タグなどを取得する事が出来ます。

getElementByIdとの違いとは

同じく、要素を取得する方法にgetElementById()というメソッドがありますが、こちらは名前の通りid名を取得するメソッドとなります。

querySelector()がclass名、id名、タグ名など幅広く取得できるメソッドなのに対し、getElementById()はid名のみ取得するメソッドのため使用する際は注意しましょう。

querySelector()の使い方

次にquerySelector()の使い方です。

コードで実際に見てみましょう

HTML

<div id ="hoge"></div>

JavaScript

const hoge = document.querySelector('#hoge');
console.log(hoge);

結果

<div id ="hoge"></div>

このように指定した要素を取得することが出来ます。

こちらが基本的な使い方になります。

上記はid名の取得でしたが、id名と同じく、class名も取得できます。

HTML

<div class="hogehoge">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

JavaScript

//クラス名の取得
const hoge = document.querySelector('.hogehoge')
console.log(hoge);

//タグ名の取得
const ul = document.querySelector('ul')
console.log(ul);

結果

//クラス名の取得結果
<div class="hogehoge"></div>

//タグ名の取得結果
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

上記の違いは

document.querySelector()

上記のquerySlector()の()の部分が「#」、「.」、「タグ名」で取得する対象を切り替えることが出来ます。

全ての要素を取得するにはquerySelectorAll()

querySelectorはDOMツリーの一番上から該当の要素を探して一番最初に見つけた要素を取得する、という特性があります。

なので例えば、

<div class="hogehoge">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

上記のようなHTMLの<li>タグを取得する場合は、

const li = document.querySelector('li');
console.log(li);

このように書きますが、これでは結果は以下のように一つの<li>しか取得することが出来ません。

<li></li>

そのため、該当する全ての要素を取得した場合は、以下のようにquerySelectorAll()というメソッドを使います。

const li = document.querySelectorAll('li')
console.log(li);

すると結果は以下のようにNodeListという配列に近い形で取得されます。

//結果
NodeList(3) [li, li, li]
0: li
1: li
2: li
length: 3
__proto__: NodeList

最近のWEB制作ではquerySelector()一択

getElementByIdはid名のみ取得できるメソッドですが、querysSelectorは先述の通りid名、class名、タグ名などどれでも取得できるため、最近のWEB制作の業務ではquerySelector一択となっています。

getElementById()は最近はほとんど使わないのが現状です。

同じくタグのみを取得できるgetElementByTagNameなどのメソッドも使用することはほとんどありません。

このようにquerySelector()の登場により、メソッドを切り替えて取得する必要がなくなったのです。

とても便利な存在であることがお分かりいただけましたでしょうか。

まとめ

というわけで今回はJavaScirptでHTMLの要素を取得するためのメソッドであるquerySelector()について見てきました。

querySelector()についてのまとめ

でしたね。

javaScriptを使うためには必須となるメソッドとなるため、是非覚えておきましょう。

それでは本日の記事は以上となります。

おしまい♪