1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.[気が付いたらJSスクラッチ界隈が便利になってた件3]
(http://qiita.com/Bong/items/bd434fd7209b9a457139)
4.気が付いたらJSスクラッチ界隈が便利になってた件4
#要素の操作が便利になっていた
まだまだ終わらないよ！
ここで、自分の中の固定概念を、一度ぶっ壊すよ！
##要素を取得する
もし、クマ好きのエンジニアが要素を取得したら、
今までのやり方だと、こんな感じ。
sample1.html
<p id="animal01" name="white" class="first animal">alpaca</p>
<p id="animal02" name="white" class="second animal">bear</p>
<p id="animal03" name="white" class="third animal">cat</p>
<p id="animal04" name="white" class="forth animal">dog</p>
sample1.js
// idで
var elm_id_1 = document.getElementById("animal02");
console.log(elm_id_1.innerHTML); // bear
// 名前で
var elms_name_1 = document.getElementsByName("white");
console.log(elms_name_1[1].innerHTML); // bear
// タグ名で
var elms_tagname_1 = document.getElementsByTagName("p");
console.log(elms_tagname_1[1].innerHTML); // bear
// クラス名で
var elms_classname_1 = document.getElementsByClassName("second animal");
console.log(elms_classname_1[0].innerHTML); // bear
そういえば、ひと昔前のIEには「document.all」っていうのがありましたね (^_^;
確か、パフォーマンス上の問題があって、禁じ手としていたような気がします。
##ところがどっこい
最近のお作法は以下の通り。
sample2.js
// idで
var elm_id_2 = document.querySelector("#animal02");
console.log(elm_id_2.innerHTML); // bear
// 名前で
var elms_name_2 = document.querySelectorAll("[name='white']");
console.log(elms_name_2[1].innerHTML); // bear
// タグ名で
var elms_tagname_2 = document.querySelectorAll("p");
console.log(elms_tagname_2[1].innerHTML); // bear
// クラス名で
var elms_classname_2 = document.querySelectorAll(".second.animal");
console.log(elms_classname_2[0].innerHTML); // bear
querySelectorは単一の要素を取得します。
もし複数あった場合は、最初の要素を取得します。
querySelectorAllは複数の要素を取得します。
##まとめ
いや～便利ですね。CSSセレクタで、要素を取得できる時代になってたんですね！
jQueryで便利だと思った機能が、どんどん標準機能化されてきて、とっても幸せです。