導入：なぜDocument.querySelectorが重要なのか
Web開発において、JavaScriptでHTML要素を操作することは避けて通れません。以前はgetElementByIdやgetElementsByClassNameなどを使い分けていましたが、これらは「IDしか取れない」「HTMLCollectionという配列に似た特殊なオブジェクトが返るため、forEachが使えない」といった不便さがありました。Document.querySelectorは、CSSのセレクタ記法を使って自由度の高い要素取得を実現し、現代のフロントエンド開発における標準的な手法となっています。
基礎知識：DOMとセレクタの仕組み
DOM（Document Object Model）とは、HTMLをプログラムから操作できるようにツリー構造として表現したものです。Document.querySelectorは、このツリーの中から「指定したCSSセレクタに一致する最初の要素」を返します。CSSを書くときと同じ感覚で、ID（#）やクラス（.）、属性、擬似クラスなどを指定できるため、直感的かつ強力な検索が可能です。
実装：querySelectorの使い方
使い方は非常にシンプルです。引数にCSSセレクタを文字列として渡すだけです。もし要素が見つからない場合は「null」を返すため、エラーを避けるために「取得できたかどうかの確認」を行うのが安全なコーディングの秘訣です。
サンプルプログラム
以下のコードは、ボタンをクリックした際に特定のリスト項目を操作する例です。そのままコピーしてHTMLファイルで動かしてみてください。
// HTMLの読み込みが完了してから実行
document.addEventListener('DOMContentLoaded', () => {
// IDが 'target-button' の要素を取得
const button = document.querySelector('#target-button');
// クラスが 'list-item' の最初の要素を取得
const firstItem = document.querySelector('.list-item');
button.addEventListener('click', () => {
// 取得した要素が存在するかチェック（バグ回避の鉄則）
if (firstItem) {
firstItem.style.backgroundColor = 'yellow';
console.log('要素の色を変更しました');
} else {
console.error('対象の要素が見つかりません');
}
});
});
応用・注意点：現場で役立つTips
1. 複数取得したい場合：
querySelectorは「最初の一つ」しか返しません。もしページ内の全てのクラス要素を取得したい場合は、querySelectorAllを使用してください。こちらはNodeListが返るため、forEachでループ処理が可能です。
2. パフォーマンスの考慮：
ループの中で何度もquerySelectorを実行すると、そのたびにDOMツリーを探索するため負荷がかかります。繰り返し処理の中で使う場合は、一度変数に格納してから利用するようにしましょう。
3. IDの指定：
IDが既に分かっている場合はgetElementByIdの方がわずかに高速ですが、モダンな開発ではコードの統一感や柔軟性の観点から、querySelectorに統一するチームも増えています。プロジェクトの規模や規約に合わせて使い分けましょう。