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の２つのファイルで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') |
| 構文 | 概要 | 例 |
|---|---|---|
| element element | 子孫を指定して要素を取得 | document.querySelectorAll('header h1') |
| element > element | 直接の子を指定して要素を取得 | document.querySelectorAll('.navbar > ul > li') |
| element ~ element | 兄弟を指定して要素を取得 | document.querySelectorAll('.lead ~ footer') |
| 構文 | 概要 | 例 |
|---|---|---|
| 最初の子要素を選択する | 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 |
| 構文 | 概要 | 例 |
|---|---|---|
| [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'] |
| 構文 | 概要 | 例 |
|---|---|---|
| :enabled | 有効なフォーム要素を選択 | <input>:enabled |
| :disabled | 無効なフォーム要素を選択 | <input>:disabled |
| :checked | 選択されたチェックボックス・ラジオボタンを選択 | <input type="checkbox">:checked |
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
この記事のまとめ
「querySelector」と「querySelectorAll」の使い方を解説しました。
- querySelectorとquerySelectorAllはHTML要素を取得するためのメソッドです。
- querySelectorは最初に見つかった1つの要素、querySelectorAllはすべての要素を取得します。
- セレクター式を使ってHTML要素を簡単に取得することができます。
- querySelectorとquerySelectorAllの使い方には、id、class、タグ名などの指定方法があります。
querySelectorメソッドとquerySelectorAllメソッドは使いやすそうですね。早速試してみたいと思います！
セレクター式の指定方法を覚えておくと、今後HTML要素を取得する際に大変便利です。
コメント