指定したセレクタの1つの要素を取得

指定したセレクタの1つの要素を取得には、document.querySelectorメソッドを使用します。
また、ある要素の子孫要素で指定したセレクタの1つの要素を取得には、element.querySelectorメソッドを使用します。

  • ※ IE7以下は対応していません。

構文

全要素中の要素(セレクタ指定)

var element = document.querySelector(selector);

特定の要素中の要素(セレクタ指定)

var element = element.querySelector(selector);
引数名 説明
第一引数
必須
selector string 取得するセレクタ

戻り値

取得した要素を返します。

サンプルコード

JavaScript

// 全要素中の要素(セレクタ指定)
var element = document.querySelector('.sample-selector');

// 特定の要素中の要素(セレクタ指定)
var baseElem = document.getElementById('sample-base'),
    element  = baseElem.querySelector('.sample-selector');

IE7以下について

ポリフィルを作ることで、IE7以下でもdocument.querySelectorAll(document.querySelector)使用することができます。

document.querySelectorAll(document.querySelector)のポリフィルについて

JavaScript逆引きリファレンス一覧へ戻る