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

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

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

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

目次

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の2つのファイルで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')
.classnameclass属性を指定して要素を取得document.querySelectorAll('.lead')
#idnameid属性を指定して要素を取得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構文

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

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

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

リスキリング 給付金が出るスクール紹介

最大70%の給付金が出るおすすめのプログラミングスクール!

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります!

興味のある方はすぐに確認しましょう。

この記事のまとめ

querySelector」と「querySelectorAll」の使い方を解説しました。

  • querySelectorとquerySelectorAllはHTML要素を取得するためのメソッドです。
  • querySelectorは最初に見つかった1つの要素、querySelectorAllはすべての要素を取得します。
  • セレクター式を使ってHTML要素を簡単に取得することができます。
  • querySelectorとquerySelectorAllの使い方には、id、class、タグ名などの指定方法があります。

querySelectorメソッドとquerySelectorAllメソッドは使いやすそうですね。早速試してみたいと思います!

セレクター式の指定方法を覚えておくと、今後HTML要素を取得する際に大変便利です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次