document.querySelector()

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

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

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

sample_querySelector.html

<div id="profile">
	<h2 class="name">桐生一馬</h2>
	<p class="org">堂島組</p>
</div>
<div id="profile2">
	<h2 class="name">真島吾朗</h2>
	<p class="org">真島組</p>
</div>
<input type="text" name="search" placeholder="検索">

sample_querySelector.js

// パターン1: IDセレクタで取得する
var profile = document.querySelector("#profile");
console.log(profile.textContent); // 『桐生一馬堂島組』と出力されます。

// パターン2: クラスセレクタで最初の要素を取得する
var firstName = document.querySelector(".name");
console.log(firstName.textContent); // 『桐生一馬』と出力されます（最初の1つだけ）。

// パターン3: 子孫セレクタで絞り込んで取得する
var org2 = document.querySelector("#profile2 .org");
console.log(org2.textContent); // 『真島組』と出力されます。

// パターン4: 属性セレクタで取得する
var input = document.querySelector("input[type='text']");
console.log(input.getAttribute("name")); // 『search』と出力されます。

// パターン5: nullチェックをしてから操作する
var el = document.querySelector(".nonexistent");
if (el) {
	el.textContent = "見つかりました。";
} else {
	console.log("要素が見つかりませんでした。"); // 存在しない場合はこちらが出力されます。
}

サンプルページはこちら

存在しない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セレクタの記法から要素を取得』で、より詳しく解説しています。良ければご覧下さい。