JavaScript/DOM/querySelector

querySelector()

querySelector() はDocumentまたはElementオブジェクトのメソッドであり、指定したCSSセレクターに一致する最初の要素を返します。セレクターに一致する要素が存在しない場合はnullを返します。

概要

querySelector()はDOMツリー内の要素をCSSセレクターを使用して取得する方法です。同じセレクターに複数の要素が一致する場合、最初の要素のみが返されます。

構文

element = document.querySelector(selectors);

selectors - CSSセレクター文字列（例：要素、クラス、ID）
戻り値: セレクターに一致する最初のElement。一致する要素がない場合はnull。

使用例

ID、クラス、要素の取得

// IDを指定して要素を取得
const elementById = document.querySelector('#my-id');

// クラスを指定して要素を取得
const elementByClass = document.querySelector('.my-class');

// 要素名を指定して最初の<p>タグを取得
const firstParagraph = document.querySelector('p');

console.log(elementById, elementByClass, firstParagraph);

複雑なセレクター

// 特定の親要素内の子要素を取得
const childElement = document.querySelector('div.container > ul > li.item');

// 複数のクラスを持つ要素の取得
const multiClassElement = document.querySelector('.class1.class2');

// 属性セレクターを使用
const dataAttribute = document.querySelector('[data-id="123"]');

console.log(childElement, multiClassElement, dataAttribute);

存在しない要素の処理

const element = document.querySelector('.non-existent');

if (element === null) {
  console.log('要素が見つかりませんでした');
}

注意点

一致する複数の要素が存在する場合、最初の要素のみが返されます。
一致する要素がない場合はnullが返されるため、取得後の確認が必要です。
複数の要素を取得する場合はquerySelectorAll()を使用してください。

比較: querySelector() と querySelectorAll()

メソッド	返り値	概要
`querySelector()`	最初に一致した要素	1つの要素のみ取得
`querySelectorAll()`	すべての一致した要素のNodeList	複数要素を取得

ブラウザ対応

querySelector()はすべての主要ブラウザでサポートされています。

ブラウザ	対応バージョン
Google Chrome	1以上
Firefox	3.5以上
Safari	3.2以上
Edge	12以上
Opera	10以上

外部リンク

Document.querySelector() - MDN Web Docs