Javascript querySelector、querySelectorAll
2013.02.07
この記事は最終更新日から1年以上が経過しています。
document.querySelector
概要
与えられたクラスの最初の要素を返します。
element = document.querySelector( selectors );
element は element オブジェクトを表します。
例：
var el = document.querySelector(".myClass");
複数同じクラスが存在しても返ってくる要素は最初の要素となります。
よく間違えるのが querySelecterと記述してしまいます。。。正しくは querySelector となります。（間違えない？）
単発でクラスを取得する場合はgetElementsByClassName()を利用した方が高速と記されます。
また、一つしかない場合はクラスの指定ではなくidを用いてgetElementsById()を利用し取得した方がより処理が高速と言われています。
参考URL
https://developer.mozilla.org/ja/docs/DOM/Document.querySelector
対応ブラウザ
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
| 1 | 3.5 (1.9.1) | 8 | 10 | 3.2 (525.3) |
document.querySelectorAll
概要
セレクターの指定されたグループと一致するドキュメント内の要素のリストを返します。
返されたオブジェクトはNodeListとなります。
elementList = document.querySelectorAll(selectors);
返されたオブジェクトはNodeListとなります。
例：
var matches = document.querySelectorAll( "div.hoge, div.text");
querySelectorとの違いは、返されたオブジェクトはNodeListとなることです。
取得に関しては、CSSで利用しているセレクタによる指定もおこなえます。
例：
elements = document.querySelectorAll("div > p.hoge > a");
また、配列として格納されますので、指定する場合は
matches[0].addEventListener("click",hoge,false);
など配列での指定となります。
参考URL
https://developer.mozilla.org/ja/docs/DOM/Document.querySelectorAll
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
| 1 | 3.5 (1.9.1) | 9 | 10 | 3.2 (525.3) |
