本家ブログ『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