[phiary] jQuery の代わりに Selectors API の querySelector/querySelectorAll を使うと良いかもよ♪

本家ブログ『phiary』からの転載になります
もしよければこちらからご覧ください -> http://phiary.me/jquery-selector-api-query-selector-all/

今回は Selectors API の querySelector/querySelectorAll についてサクッとメモ.

このメソッドを使えば getElementById や getElementsByClassName の代わりに使えて
CSS セレクタでマッチした要素を取得することができます.

jQuery を使うまでもないけど DOM 操作したいなぁなんて時に使えます.

Usage

document のメンバメソッドです.

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 の要素を配列として全て取得

Tips

jQuery っぽく使う

if (window.$ === undefined) {
    window.$ = function(q) {
        return document.querySelector(q);
    }
}

// id が hoge の要素を取得
$("#hoge");

Reference

自分のエントリーw

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