LoginSignup
22

More than 5 years have passed since last update.

気が付いたらJSスクラッチ界隈が便利になってた件4

Posted at

1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.気が付いたらJSスクラッチ界隈が便利になってた件3
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で便利だと思った機能が、どんどん標準機能化されてきて、とっても幸せです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22