Selectors API の querySelector/querySelectorAll を使ってみよう
Selectors API の querySelector/querySelectorAll を使ってみよう.
querySelector/querySelectorAll とは, CSS セレクタを指定して要素を取得できるメソッドです. 今後, getElementById や getElementsByClassName に代わる重要なメソッドとなるでしょう.
とても便利なのになかなか普及しないんだよなぁ~. 知名度も低くいみたいなのでざっくりまとめてみました.
About
querySelector/querySelectorAll とは CSS セレクタがマッチする要素をチャチャっと取得する便利な API です.
例)
document.querySelector("#hoge"); // id が hoge の要素を取得 document.querySelector("section>h2"); // section 直下の h2 を取得 document.querySelector("input[type='submit]"); // type が submit の要素を取得 document.querySelector(".foo"); // class が foo の最初の要素を取得 document.querySelectorAll(".foo"); // class が foo の要素を配列として全て取得 document.querySelectorAll(".foo, .bar"); // class が foo もしくは bar の要素を配列として全て取得
見ての通り使い方はほとんど jQuery と同じです.
Chrome はもちろん, Safari, Firefox でも使用可能です. なんとあの IE でも version 8 から対応しています.
ちなみに jQuery でも version 1.3~1.4 あたりから存在チェックを行いあれば使ってるみたいです.
Sample
今回制作したサンプルはこちらです.
Code
今回制作したサンプルのコードです.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> pre { margin: 5px; padding: 5px; border: 1px solid black; } </style> <script> window.onload = function() { // ヘッダー取得 var eH2 = document.querySelector("h2.header"); log("【" + eH2.innerHTML + "】"); // class に blood-type がある要素ををすべて取得 var eBloodTypeList = document.querySelectorAll(".blood-type"); var bloodTypeList = []; for (var i=0,len=eBloodTypeList.length; i<len; ++i) { bloodTypeList.push( "'" + eBloodTypeList[i].innerHTML + "'" ); } log("赤血球の遺伝子に応じて" + bloodTypeList.join(",") + "に分類する方法."); // blood-type-list の子供で my class がついている要素を取得 var eMyBloodType = document.querySelector("#blood-type-list .my"); log("ちなみに私の血液型は '" + eMyBloodType.innerHTML + "' です."); // id で取得 var eBType = document.querySelector("#B-type"); log("学生時代の友人は '" + eBType.innerHTML + "' が多かったです."); var eOType = document.querySelector("#O-type"); log("職場の同僚は'" + eOType.innerHTML + "' が多いです."); }; // ログ出力 var log = function(str) { var eConsole = document.getElementById("console"); eConsole.innerHTML += str; eConsole.innerHTML += '\n'; }; </script> </head> <body> <h1>Selectors API の querySelector/querySelectorAll を使ってみよう.</h1> <section> <h2 class="header">AOB式血液型</h2> <ul id="blood-type-list"> <li id="A-type" class="blood-type">A 型</li> <li id="B-type" class="blood-type">B 型</li> <li id="O-type" class="blood-type my">O 型</li> <li id="AB-type" class="blood-type">AB 型</li> </ul> </section> <section> <h2>Console</h2> <pre id="console"></pre> </section> </body> </html>
Tips
jQuery っぽく使う
下記のコードのように $ に querySelector のラッパーを定義すれば, より jQuery っぽく使えます.
if (window.$ === undefined) { window.$ = function(q) { return document.querySelector(q); } } // id が hoge の要素を取得 $("#hoge");
Reference
次回も, もうすこしだけ querySelector/querySelectorAll について書きます.
jQuery っぽく使えるよん♪♪
『Selectors API の querySelector/querySelectorAll を使ってみよう』
http://t.co/PQQyEMD3
#html #javascript
[…] Web 前回, 『Selectors API の querySelector/querySelectorAll を使ってみよう』というエントリーを書きましたが, […]
Selectors API の querySelector/querySelectorAll を使ってみよう | TM Life http://t.co/XfcVFlq9
Selectors APIが便利らしいので、使ってみます。
Selectors API document.querySelector document.querySelectorAll
Selectors API の querySelector/querySelectorAll を使ってみよう http://t.co/Lk9Vlxi1
document.querySelector、なんだIE8でも使えるのか! http://t.co/BaFGC6tq
jsのSelectors API 、 CSSセレクタライクでgetElementByIdよりめっちゃ使いやすいじゃん。知らんかった。。
http://t.co/B8dAYLZT
“Selectors API の querySelector/querySelectorAll を使ってみよう | TM Life” http://t.co/2JzoD7bmdM