JavaScript/DOM/querySelector
querySelector()
querySelector() はDocumentまたはElementオブジェクトのメソッドであり、指定したCSSセレクターに一致する最初の要素を返します。セレクターに一致する要素が存在しない場合はnull
を返します。
概要
querySelector()はDOMツリー内の要素をCSSセレクターを使用して取得する方法です。 同じセレクターに複数の要素が一致する場合、最初の要素のみが返されます。
構文
使用例
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以上 |