JavaScriptの querySelector
は、CSSセレクタを使ってHTML要素を取得できる非常に便利なメソッドです。DOM操作の際に頻繁に使われるため、しっかりと理解しておくと、開発効率が向上します。この記事では、基本的な使い方から応用までをまとめて紹介します。
querySelector
の基本
querySelector
は、HTMLドキュメント内で指定したCSSセレクタに一致する最初の要素を返します。これは、CSSセレクタを使ってDOMの特定の要素を簡単に取得できる便利なメソッドです。
基本的な構文:
let element = document.querySelector(selector);
引数 selector
querySelector
の引数として指定する selector
は、CSSセレクタと同じ形式で記述します。例えば、クラス名、ID、タグ名などを指定できます。
- クラスを選択する場合:
let element = document.querySelector('.classname');
- IDを選択する場合:
let element = document.querySelector('#idname');
- タグ名を選択する場合:
let element = document.querySelector('div');
例:特定の要素を取得する
<div id="container">
<p class="text">最初の段落</p>
<p class="text">2番目の段落</p>
</div>
// IDが 'container' の要素を取得
let container = document.querySelector('#container');
// クラスが 'text' の最初の段落要素を取得
let firstParagraph = document.querySelector('.text');
console.log(firstParagraph.textContent); // "最初の段落"
このように、 querySelector
はCSSのセレクタと同じ形式で指定するため、CSSの知識があれば簡単に理解できます。
応用:複数のセレクタを使用する
querySelector
は、複数のCSSセレクタをカンマで区切って指定することもできます。この場合、いずれかのセレクタに一致する最初の要素が返されます。
let element = document.querySelector('p.text, .highlight, #unique');
上記の例では、最初に一致した段落、ハイライトされた要素、またはIDが unique
の要素が取得されます。
要素が存在しない場合の処理
querySelector
が一致する要素を見つけられない場合、null
が返されます。そのため、要素が存在するかどうかを確認するために、null
チェックを行う必要があります。
let element = document.querySelector('.not-exist');
if (element) {
console.log('要素が存在します。');
} else {
console.log('要素が存在しません。');
}
querySelectorAll
との違い
querySelector
は最初に一致した1つの要素のみを返しますが、複数の要素を取得したい場合は querySelectorAll
を使います。querySelectorAll
は、指定したセレクタに一致するすべての要素を返し、返り値は NodeList
という配列のようなオブジェクトです。
let allParagraphs = document.querySelectorAll('p.text');
allParagraphs.forEach(paragraph => {
console.log(paragraph.textContent);
});
結論
querySelector
は、シンプルでパワフルなDOM要素選択メソッドです。CSSセレクタと同じ構文を使うため、CSSの知識があればスムーズに利用できます。さらに、複数の要素を取得したい場合は、 querySelectorAll
を活用することで、効率的にDOM操作を行うことができます。