BLOG

Selectors API

2015/4/24

Selectors APIとはW3Cで定義された仕様です。
http://www.w3.org/TR/selectors-api/

querySelector/querySelectorAllはCSSセレクタを指定して要素を取得できるメソッドです。
getElementById、getElementsByNameやgetElementsByClassNameに代わる重要なメソッドです。

jQueryのDOM操作の代わりに使うイメージです。

使用例）

document.querySelector("#test");
document.querySelectorAll(".test p");
document.querySelectorAll(".test > p");

1

2

3

document.querySelector("#test");

document.querySelectorAll(".test p");

document.querySelectorAll(".test > p");

querySelectorはDOMで指定した要素を1つ取得します。指定した要素が複数存在する場合、最初の要素を取得します。
querySelectorAllはDOMで指定した全ての要素を配列で取得します。

Internet Explorerも8から対応しています。

BLOG