指定したセレクタの全ての要素を取得

指定したセレクタの1つの要素を取得には、document.querySelectorAllメソッドを使用します。
また、ある要素の子孫要素で指定したセレクタの1つの要素を取得には、element.querySelectorAllメソッドを使用します。

  • ※ IE7以下は対応していません。

構文

第一引数 selector 取得するセレクタ
戻り値 getElement 取得した要素
基準要素 element 取得基準となる要素

サンプルコード

IE7以下について

以下のようにポリフィルを作ることで、IE7以下でもdocument.querySelectorAll(document.querySelector)使用することができます。
ただし、ハック的な扱いなのでパフォーマンスは低下します。

【参考】IE document.querySelector() polyfill ・ GitHub

簡単な説明

引数で指定したセレクタ―に対して、CSSで仮のx-qsaプロパティにexpression関数を使用し自身の要素を配列document._qsaに代入していきます。

取得した要素を1つずつ抜き出して配列elementsに代入していきます。
この際、取得用で使用して不要になったCCSプロパティx-qsaを削除します。

JavaScript逆引きリファレンス一覧へ戻る