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以上

関連項目

外部リンク

カテゴリ:DOM カテゴリ:Web API カテゴリ:JavaScript
カテゴリ:DOM カテゴリ:JavaScript カテゴリ:Web API