JavaScript　querySelector/querySelectorAllの使い方：セレクター式で要素を取得する方法

JavaScriptでHTMLドキュメントから要素を取得する際に使用する、「querySelector」と「querySelectorAll」の使い方を詳しく解説します。

HTMLドキュメントから要素を取得する方法で何かオススメはありますか？

それなら「querySelector」「querySelectorAll」を使ってみてはどうでしょうか？
セレクター式を使ってHTML要素を簡単に取得することができますよ。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

querySelector/querySelectorAllとは？その使い方

querySelectorメソッドとquerySelectorAllメソッドは、HTMLドキュメントから要素を取得するためのメソッドです。

　querySelectorメソッドは最初に見つかった1つの要素を取得とします。
また、querySelectorAllメソッドは見つかったすべての要素を配列として取得します。

セレクター式を指定することで、簡単にHTML要素を取得することができます。

querySelectorメソッドを使って「id=”myId”」の要素を取得する場合は以下のように記述します。

let element = document.querySelector("#myId");
console.log(element);

また、querySelectorAllメソッドを使って「.myClass」の要素を取得する場合は以下のように記述します。

let elements = document.querySelectorAll(".myClass");
console.log(elements);

querySelector と querySelectorAllのサンプルプログラムを使った解説

　以下のサンプルでは、index.htmlとtest.jsの２つのファイルでquerySelectorメソッドと querySelectorAllメソッドを使うサンプルです。

<!DOCTYPE html>
<html>
  <head>
    <title>querySelector/querySelectorAll Example</title>
  </head>
  <body>
    <header id="header">
      <h1>Header Title</h1>
    </header>
    <nav class="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <main>
      <p class="lead">Welcome to my website!</p>
    </main>
    <footer id="footer">
      <p>Copyright © 2023</p>
    </footer>

    <script src="test.js"></script>
  </body>
</html>

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

// querySelectorAll 
const links = document.querySelectorAll('.navbar a');
console.log(links);

　上記のサンプルでは、index.htmlファイルでは、header要素にid属性「header」、nav要素にclass属性「navbar」、p要素にclass属性「lead」が設定されています。

　test.jsファイルでは、querySelectorメソッドを使ってheader要素を取得しています。「#header」というセレクター式はid属性「header」を指定しています。取得した要素は変数headerに代入され、console.logメソッドで表示されます。

　また、querySelectorAllメソッドを使ってclass属性「navbar」内にあるa要素を取得しています。「.navbar a」というセレクター式はclass属性「navbar」内にあるa要素を指定しています。取得した要素は変数linksに代入され、console.logメソッドで表示されます。

このような形式で実装することで、「querySelector」と「querySelectorAll」を使ってHTML要素を簡単に取得することができます。

引数のselectorでよく利用される構文

　セレクター式には、複数の分類があります。

　以下はCSS構文を列挙した表で、基本、階層、フィルタ(基本)、フィルタ(属性)、フィルタ(子要素)、フィルタ(フォーム状態) の分類ごとにまとめましたので参考にしてみて下さい。

構文	概要	例
tagname	タグ名を指定して要素を取得	`document.querySelectorAll('p')`
.classname	class属性を指定して要素を取得	`document.querySelectorAll('.lead')`
#idname	id属性を指定して要素を取得	`document.querySelector('#header')`

基本のCSS構文

構文	概要	例
element element	子孫を指定して要素を取得	`document.querySelectorAll('header h1')`
element > element	直接の子を指定して要素を取得	`document.querySelectorAll('.navbar > ul > li')`
element ~ element	兄弟を指定して要素を取得	`document.querySelectorAll('.lead ~ footer')`

階層のCSS構文

構文	概要	例
:first-child	最初の子要素を選択する	`p:first-child`
:last-child	最後の子要素を選択する	`p:last-child`
:nth-child(n)	n番目の子要素を選択する	`p:nth-child(2)`
:nth-last-child(n)	後ろから数えてn番目の子要素を選択する	`p:nth-last-child(2)`
:only-child	唯一の子要素を選択する	`p:only-child`

フィルタ(基本)のCSS構文

構文	概要	例
[attribute]	属性を持つ要素を選択する	`input[type='text']`
[attribute=value]	属性と値が一致する要素を選択する	`input[type='text']`
[attribute~=value]	属性の値にvalueが含まれている要素を選択する	`input[type~='text']`
[attribute\|=value]	属性の値がvalueまたはvalue-で始まる要素を選択する	`input[type\|='text']`
[attribute^=value]	属性の値がvalueで始まる要素を選択する	`input[type^='text']`
[attribute$=value]	属性の値がvalueで終わる要素を選択する	`input[type$='text']`
[attribute*=value]	属性の値にvalueを含む要素を選択する	`input[type*='text']`

フィルタ(属性)のCSS構文

構文	概要	例
:enabled	有効なフォーム要素を選択	`<input>:enabled`
:disabled	無効なフォーム要素を選択	`<input>:disabled`
:checked	選択されたチェックボックス・ラジオボタンを選択	`<input type="checkbox">:checked`

フィルタ(フォーム状態)のCSS構文

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。