querySelector() - CSSセレクタで1つの要素を取得する方法

querySelector()は、スタイルシートのセレクタと同じ方法で指定して、最初の要素だけを取得するメソッドです。取得できる値は、単体のノードです。条件に合う全ての要素を取得するには、querySelectorAll()を利用して下さい。

説明

クラス名parentの中にある、クラス名childの要素を取得して、elementに代入する例です。

HTML

<p class="child">こんにちは、SYNCERです。</p>
<div class="parent">
	<p class="child">おはよう、SYNCERです。</p>
</div>
<p class="child">こんばんは、SYNCERです。</p>

JavaScript

var element = document.querySelector( ".parent .child" ) ;

// element : <p class="child">おはよう、SYNCERです。</p>

取得できる要素は1つだけ

たとえ、条件に合う要素が複数あろうとも、取得できる要素は1つだけです。

HTML

<p class="syncer">こんにちは、SYNCERです。</p>
<p class="syncer">おはよう、SYNCERです。</p>
<p class="syncer">こんばんは、SYNCERです。</p>

JavaScript

var element = document.querySelector( ".syncer" ) ;

// element : <p class="syncer">こんにちは、SYNCERです。</p>

要素が存在しない場合はnull

条件に合う要素が存在しない場合、nullが返ります。

HTML

<p class="syncer">こんにちは、SYNCERです。</p>
<p class="syncer">おはよう、SYNCERです。</p>
<p class="syncer">こんばんは、SYNCERです。</p>

JavaScript

var element = document.querySelector( "#syncer" ) ;

// [id="syncer"]は存在しないので、[null]が代入される
// element : null

複数の条件を指定できる

カンマ(,)で区切って、複数の条件を指定することができます。取得できるのは、条件のどれかに合う、最初の要素だけです。指定の順番は関係ありません。

HTML

<p class="syncer1">こんにちは、SYNCERです。</p>
<p class="syncer2">おはよう、SYNCERです。</p>
<p class="syncer3">こんばんは、SYNCERです。</p>

JavaScript

var element = document.querySelector( ".syncer3, .syncer2" ) ;

// 一番最初の[syncer2]が代入される
// element : <p class="syncer2">おはよう、SYNCERです。</p>