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

指定したセレクタの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を削除します。

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