document.querySelector()は、JavaScriptでDOM操作を行う際に非常に便利なメソッドです。CSSセレクターを使用して、文書内の最初に一致した要素を取得することができます。今回は、基本的な使い方から注意点までをまとめていきたいと思います。
querySelector()は、CSSセレクターの形式を用いて要素を取得するメソッドです。次のような特徴があります。
- 役割: 指定されたセレクターに一致する最初の要素を取得します。
- 戻り値: 一致する最初の要素。該当する要素が存在しない場合は
nullを返します。 - 柔軟性: CSSセレクターを使用できるため、クラスやID、属性セレクター、階層セレクターなどを組み合わせて要素を特定できます。
以下にquerySelector()の基本的な使い方です。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
document.querySelector('.changeText').addEventListener('click', () => {
const titleElement = document.querySelector('.title');
if (titleElement) {
titleElement.textContent = 'タイトルが変更されました！';
} else {
console.error('指定されたセレクターの要素が見つかりませんでした。');
}
});<h1 class="title">タイトル</h1>
<button class="changeText">テキストを変更</button>この例では、クラス名.titleを持つ<h1>要素のテキストを、クラス名.changeTextを持つボタンをクリックすることで変更します。
次は、属性セレクターを使った例です。
See the Pen querySelector by tones (@tonescodedesign) on CodePen.
// ボタンをクリックして入力欄を強調する
document.querySelector('.highlight').addEventListener('click', () => {
const inputField = document.querySelector('input[placeholder]');
if (inputField) {
inputField.style.border = '2px solid red';
} else {
console.warn('該当する入力フィールドが見つかりませんでした。');
}
});<input type="text" placeholder="名前を入力してください" class="input-field">
<button class="highlight">入力欄を強調</button>このコードでは、placeholder属性を持つ<input>要素に赤枠を適用します。
querySelector()は、複数の要素が一致する場合でも最初の1つだけを取得します。すべての一致する要素を取得したい場合はquerySelectorAll()を使用してください。
一致する要素が存在しない場合、nullを返します。そのため、取得結果がnullでないことを確認してから操作を行いましょう。
const element = document.querySelector('.nonexistent');
if (element) {
// 要素が存在する場合の処理
} else {
console.warn('指定されたセレクターの要素が見つかりませんでした。');
}- 動的に操作する要素に対して、必要に応じて
aria-*属性やroleを適切に設定しましょう。 - 例えば、状態の変更を視覚的にだけでなく、スクリーンリーダーでも伝えるために、
aria-liveを活用できます。
<div class="status" aria-live="polite">初期状態です。</div>querySelector()はDOM全体を対象に検索を行うため、セレクターが複雑になるとパフォーマンスに影響を与える可能性があります。可能であれば、検索範囲を限定するために特定のコンテナ要素内で検索することを検討してください。
const container = document.querySelector('.container');
const element = container.querySelector('.target');querySelector()は、柔軟なCSSセレクターを用いて要素を取得できる便利なメソッドです。基本的な使い方を押さえつつ、nullチェックやアクセシビリティの配慮を怠らないようにしましょう。また、パフォーマンスやコードの可読性も考慮し、適切なセレクターを選ぶことが重要です。
