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

phi phi on javascript

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

このメソッドを使えば getElementByIdgetElementsByClassName の代わりに使えて 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 の要素を取得
var html = $("#hoge").inerHTML; // #hoge の中身を取得