[JavaScript] cssセレクタでDOMを取得できるquerySelector, querySelectorAll

jQueryみたいなライブラリでは当たり前の機能になってますが、cssセレクタみたいな指定方法でDOMを取得できるのはとても楽。

実はjQueryライブラリを使わなくても同じ方法でDOM取得できるらしい

document.querySelector("#id div");
document.querySelectorAll(".class");


スマートフォンサイトつくるのに、jQuery使わずにやってみる予定なので、コレは便利
getElementsByTagNameとか親要素の兄弟要素のliなんて指定せずに済むのはありがたい

■スピード比較してみたところ…
firefox5.0で試したところ、getElementsByTagNameの方が15倍以上速かった。
36個のliを取得する処理を10000回繰り返した結果
document.querySelectorAll("li") // 170ms
document.getElementsByTagName("li") //10ms


IDの場合(こっちも1000回)
document.querySelector("#id"); //47ms
document.getElementById("id"); //13ms

cssセレクタ式で指定できるのが便利な時だけ使うほうがいいかも


参考
IE8 で実装された Selectors API とは何か？IT戦記

このブログ書き終わったところでこんなページを見つけてしまった
getElementsByTagName()がquerySelectorAll()より高速な理由