指定したセレクタの全ての要素を取得
指定したセレクタの1つの要素を取得には、document.querySelectorAllメソッドを使用します。
また、ある要素の子孫要素で指定したセレクタの1つの要素を取得には、element.querySelectorAllメソッドを使用します。
- ※ IE7以下は対応していません。
構文
全要素中の要素（セレクタ指定）
var elements = document.querySelectorAll(selector);特定の要素中の要素（セレクタ指定）
var elements = element.querySelectorAll(selector);| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
selector | string | 取得するセレクタ |
戻り値
取得した要素をNodeListで返します。
サンプルコード
JavaScript
// 全要素中の要素（セレクタ指定）
var elements = document.querySelectorAll('.sample-selector');
// 特定の要素中の要素（セレクタ指定）
var baseElem = document.getElementById('sample-base'),
elements = baseElem.querySelectorAll('.sample-selector');IE7以下について
次のようにポリフィルを作ることで、IE7以下でもdocument.querySelectorAll（document.querySelector）使用することができます。
ただし、ハック的な扱いなのでパフォーマンスは低下します。
【参考】IE document.querySelector() polyfill ・ GitHub
JavaScript
if (!document.querySelectorAll) {
document.querySelectorAll = function(selectors) {
var style = document.createElement('style'), elements = [], element;
document.documentElement.firstChild.appendChild(style);
document._qsa = [];
style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
window.scrollBy(0, 0);
style.parentNode.removeChild(style);
while (document._qsa.length) {
element = document._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}
document._qsa = null;
return elements;
};
}
if (!document.querySelector) {
document.querySelector = function(selectors) {
var elements = document.querySelectorAll(selectors);
return (elements.length) ? elements[0] : null;
};
}簡単な説明
JavaScript
style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';引数で指定したセレクタ―に対して、CSSで仮のx-qsaプロパティにexpression関数を使用し自身の要素を配列document._qsaに代入していきます。
JavaScript
while (document._qsa.length) {
element = document._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}取得した要素を1つずつ抜き出して配列elementsに代入していきます。
この際、取得用で使用して不要になったCCSプロパティx-qsaを削除します。