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

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

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

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

JavaScriptでセレクタを使う方法

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

  • Document.querySelectorAll
  • Document.querySelector

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

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

Document.querySelectorAll

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

Document.querySelector

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

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

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

 

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

 

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

 

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

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

ここまでのまとめ

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

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

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

 

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

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