JavaScriptでセレクタを使って要素を取得する方法

セレクタを使ってDOM要素を取得する場合、jQueryを使うことがほとんどです。

ですが実はライブラリも何も入れていない純粋なJavaScriptでもセレクタは使えます。

ということでJavaScriptでセレクタを使って要素取得する方法について少し解説

このページの目次

JavaScriptでセレクタを使う方法

その方法とは次の２つのメソッドを使うこと

これらの関数にCSSで有効なセレクタを文字列として渡すことで要素の検索が可能です。

ではこの２つの使い方について具体的なコード例を使って説明していきます。

まず初めは Document.querySelectorAll というメソッド

こちらは与えられたセレクタに当てはまる要素全てを NodeList として返すメソッドです。

ちなみに何も見つからなかった場合の返り値は空のノード配列

例えばドキュメント内の全てのh2要素を取得したいなら次のように書けばOK

/** ドキュメント内の全てのh2要素取得 */
var h2s = document.querySelectorAll('h2');

1 2	/** ドキュメント内の全てのh2要素取得 */ var h2s = document.querySelectorAll('h2');

querySelectorAll('h2') のように本当にそのままセレクタを渡すだけです。

もちろん 'div > p' や 'input[type="text"]' のようにさらに絞り込みも可能

またこの関数はdocumentだけでなく、個別の要素 ( Element ) に対しても呼び出せます。

例えば次は #main のIDを持つ要素に対して querySelectorAll を使っているコード例

var main = document.getElementById('main');
var h2s = mainElem.querySelectorAll('h2');

1 2	var main = document.getElementById('main'); var h2s = mainElem.querySelectorAll('h2');

このように既にある要素オブジェクトから要素取得するのにも使えます。

ちなみにjQueryでもそうですが、セレクタには疑似要素は指定できません。

例えば次は div.hoge のafter疑似要素にアクセスしようとしているNG例

var matches = document.querySelectorAll("div.hoge::after");
console.log(matches);

1 2	var matches = document.querySelectorAll("div.hoge::after"); console.log(matches);

たとえ div.hoge にafter疑似要素が付いていても次のように空ノードが表示されます。

NodeList []

1	NodeList []

以上が Document,querySelectorAll を使った要素の取得方法

jQueryで要素を取得する時とまったく同じように使えます。

お次は Document.querySelector というメソッド

こちらは querySelectorAll と違って当てはまるノード配列の最初の要素を返すメソッドです。

ちなみに何も見つからない場合は null を返してくる模様

使い方ですが、例えば次のように書くとドキュメント内の最初のh2要素が取得可能

/** 最初のh2要素を取得 */
var firstH2 = document.querySelector('h2');

1 2	/** 最初のh2要素を取得 */ var firstH2 = document.querySelector('h2');

あるいは１つだけを返す特性を利用すると、IDを持つ要素の取得にも便利です。

/** IDを持つ要素を取得 */
var main = document.querySelector('#main');

1 2	/** IDを持つ要素を取得 */ var main = document.querySelector('#main');

以上が Document.querySelector を使ったセレクタの指定方法

最初の要素だけやID要素を取り出したいときに便利そうですね。

ということでJavaScriptでセレクタが扱えるメソッドまとめ

Document.querySelectorAll
セレクタに当てはまる要素をノード配列 ( NodeList ) として返してくる
もし当てはまるものがないなら空の配列
Document.querySelector
セレクタに当てはまる要素配列の最初を要素 ( Element ) として返してくる
もし当てはまるものがないなら null

jQueryが使えない場面というのは少なそうですが知っておくと役に立つかもしれません。

以上JavaScriptでセレクタを使って要素を取得する方法でした。

ではでは($・・)/~~~