Selectors API の querySelector/querySelectorAll を使ってみよう

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

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&#91;i&#93;.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 について書きます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT