document.querySelector() 対応: Selectors API（2008）

CSSセレクタを使用して、ドキュメント内から条件に一致する最初のHTML要素を1つ取得します。HTML要素が見つからなかった場合は『null』が返されます。

構文

// ドキュメント全体から取得します。
var element = document.querySelector("セレクタ");

// 特定のHTML要素内から取得します。
var element = 親要素.querySelector("セレクタ");

引数

引数	概要
セレクタ	CSSセレクタの文字列を指定します。CSSで使用できるセレクタであればどのような書式でも指定可能です。

戻り値

条件に一致する最初のHTML要素（Elementオブジェクト）を返します。一致するHTML要素が存在しない場合は『null』を返します。

サンプルコード

<div id="container">
	<p class="message">こんにちは</p>
	<p class="message">さようなら</p>
</div>

// IDで取得します。
var container = document.querySelector("#container");

// 該当するクラス名を持つ最初のひとつだけを取得します。
var msg = document.querySelector(".message");
console.log(msg.textContent); // 『こんにちは』と出力されます。

// 子孫セレクタで取得します。
var child = document.querySelector("#container .message");

HTML要素が見つからない場合

存在しないHTML要素を取得しようとすると『null』が返されます。『null』のまま操作しようとするとエラーになるため、必ずチェックしてから操作してください。

// 存在しないHTML要素を取得します。
var el = document.querySelector("#nothing");
console.log(el); // 『null』が返されます。

// nullのまま操作するとエラーになります。
el.innerHTML = "<p>テスト</p>"; // TypeError: Cannot set properties of null

// nullチェックをしてから操作するのが正しい書き方です。
var el = document.querySelector("#btn");
if (el) {
	el.innerHTML = "<p>クリック！</p>";
}

概要

『document.querySelector()』はCSSセレクタの書式を使ってHTML要素を取得するメソッドです。『document.getElementById()』がID名のみで検索するのに対し、『document.querySelector()』はクラス名、属性、子孫セレクタなど、CSSで使えるあらゆるセレクタを指定できるため、より柔軟なHTML要素の取得が可能です。

ただし、条件に一致するHTML要素が複数あった場合でも、返されるのは最初の1つだけです。条件に一致するすべてのHTML要素を取得したい場合は『document.querySelectorAll()』を使用してください。

『document.querySelector()』は『document』だけでなく、任意のHTML要素に対しても呼び出すことができ、その場合は検索範囲がそのHTML要素の子孫に限定されます。

<div id="section1">
	<p class="message">セクション1のメッセージ</p>
</div>
<div id="section2">
	<p class="message">セクション2のメッセージ</p>
</div>

// document全体から取得します。最初に見つかったHTML要素が返されます。
var msg = document.querySelector(".message");
console.log(msg.textContent); // 『セクション1のメッセージ』と出力されます。

// 特定のHTML要素内から取得します。検索範囲がその子孫に限定されます。
var section2 = document.querySelector("#section2");
var msg2 = section2.querySelector(".message");
console.log(msg2.textContent); // 『セクション2のメッセージ』と出力されます。

『document.querySelector()』はチュートリアル記事『querySelector() CSSセレクタの記法から要素を取得』で、より詳しく解説しています。良ければご覧下さい。