JSのセレクターとは？
Webページは、HTMLと呼ばれるマークアップ言語を使って、様々な要素を組み合わせて作られています。これらの要素は、まるで木の枝のように階層構造を持って並んでおり、これを「DOMツリー」と呼びます。そして、このDOMツリーの中から特定の要素を見つけ出すための書式の事を、 **セレクター** と呼びます。
セレクターは、主にCSSなどのスタイルシートで、特定の要素にデザインを適用するために使われます。しかし、JavaScriptにおいても、このセレクターを使ってDOMツリーから要素を取得し、操作することができます。
セレクターの種類
セレクターには、様々な種類があります。代表的なものを、以下の表にまとめました。
| 種類 | 説明 | 例 |
|---|---|---|
| タグ名 | HTMLタグ名をそのまま指定する | p, div, h1 |
| クラス名 | 要素に指定されているクラス名を、ピリオド (.) を付けて指定する | .example, .button-primary |
| ID名 | 要素に指定されているID名を、シャープ (#) を付けて指定する | #header, #main-content |
| 属性セレクター | 要素の属性を指定する | [type="text"], [href^="https://"] |
JavaScriptでセレクターを使う方法
JavaScriptでセレクターを使って要素を取得するには、主に以下の３つのメソッドを使います。
document.querySelector(): 一致する最初の要素を返すdocument.querySelectorAll(): 一致する全ての要素を、NodeListとして返すelement.querySelector()/element.querySelectorAll(): 特定の要素の子孫から、一致する要素を返す
例
例えば、以下のようなHTMLがあるとします。
<div id="header">
<h1>タイトル</h1>
<p class="description">説明文です。</p>
</div>
このHTMLから、「説明文です。」というテキストを持つ段落要素を取得するには、以下のように記述します。
// クラス名で要素を取得
const description = document.querySelector('.description');
// 取得した要素のテキストコンテンツを出力
console.log(description.textContent); // "説明文です。"
まとめ
セレクターは、DOMツリーから特定の要素を取得するための強力な手段です。JavaScriptと組み合わせることで、Webページに動的な機能を追加することができます。 様々なセレクターを組み合わせることで、複雑な条件で要素を選択することも可能です。ぜひ、色々試して、Webページ制作に役立ててください。
参考文献
よくある質問
Q1: 複数のセレクターを同時に指定できますか？
A1: はい、可能です。カンマ(,)で区切ることで、複数のセレクターを指定できます。例えば、h1, h2, h3 と指定すると、h1, h2, h3 のいずれかのタグ名を持つ要素が選択されます。
Q2: セレクターで取得した要素に対して、どのような操作ができますか？
A2: テキストコンテンツの変更、スタイルの変更、属性の操作、要素の追加/削除など、様々な操作が可能です。JavaScriptのDOM APIを使って、要素を自由に操作できます。
Q3: querySelector() と querySelectorAll() の違いは何ですか？
A3: querySelector() は、条件に一致する最初の要素を返します。一方、querySelectorAll() は、条件に一致する全ての要素をNodeListとして返します。NodeListは、配列のようなオブジェクトなので、ループ処理などで個々の要素にアクセスできます。
その他の参考記事:jquery セレクタ 変数