【初心者向け】そろそろしっかり理解したい！ JavaScriptの要素取得(前編)

みなさんこんにちは、ひょっとこエンジニアの橋本です。
JavaScriptは、WEB制作のシーンで使用率の高いプログラミング言語です。
今回は、JavaScript基本のおはなし。初心者さん向けです。
具体的には、htmlとcss書けるようになってきた！　サイトをリッチにしたいし、そろそろJavaScriptもしっかり分かりたい！　といった方向けです。

お題としては、【要素の取得】についてです。
基本と言えば基本なのですが…適当にコピペすれば取得出来てしまう反面、正直よく分かっていないと言った声をよく耳にします。
例えば、下記のような悩みを抱えた方で、根本解決が出来なかった方には特におすすめです。

• document.querySelector('.className')の戻り値がイマイチわからない…
• すべてクラス名で何となく要素を取得している
• 制作したサイトの動きがなんだかもっさりしてしまう。

この他にも、根本的に要素の取得が分からない方も読んでみてくださいね！

まずは基本から

基本的に、要素の取得って何？って方に。
これは、WEB制作の現場ではほとんどかと思いますが、【DOM操作】のために取得します。
要素の位置を確かめたり、要素の文言を変更したり、要素にクラスを付与したり…色々ですね。
jQueryを使っていたら$("#id")、Vanilla js(素のjs)であればgetElementById("id")が要素の取得に該当します。

document.getElementById("idName").classList.add("hoge")

このように、要素を取得して、.で次の処理に繋げるパターンがメインな使い方ですね。

正しい要素取得の方法って？

ここまでは出来ている方、もしくはなんとなくコピペで持ってきて、やりたい仕様の実現が出来ているケースもあるかと思います。
しかしながらなんとなくで出来てしまう故に、「基本」を損なってしまっているケースも少なくありません。
確かにコピペでなんとなくでも、WEB制作ができないわけではありません。ただ、ここを掴み取るだけで、ぐっとWEBサイト構築のスキルアップが可能です。

初心者向けの要素取得4選

document.getElementById("idName")

idから要素を取得する方法です。返り値としてHTMLElementが返ります。単一です。高速取得できます。

document.getElementsByClassName("className")

classから要素を取得します。返り値としてHTMLElementが返ります。クラスを探すので、要素の戻りは複数の可能性があります。

document.querySelector("#idName")

これはcssのセレクタを用いる方法で、マッチした最初の要素を取得します。
jQueryになじみのある方は、cssセレクタでの指定は覚えやすいかもしれませんね。
返り値としてHTMLElementが返ります。最初の要素マッチなので、こちらも単一です。ちなみにdocument.getElementById()も複数の該当要素がある場合は、最初の要素を取ります。

document.querySelectorAll(".className")

これはcssのセレクタを対象に用いる取得方法で、すべての要素を取得します。
jQueryになじみのある方は、こちらが最も近い取得感覚かと考えています。
返り値としてNodeListが返ります。
classすべてに付与したい、といった需要をかなえるにはこれがおすすめです。

戻り値：HTMLElementとNodeListについて

二つとも、要素取得の戻り値としてメジャーな要素です。
まず、これらの小難しい要素の種類が、初心者の方にはつらいポイントです。
もしつらいなぁなんだろうなぁと考えている方は、配列っぽい要素という認識でOKです。配列っぽいというのも、要素の数を示すlengthを持つので、要素の中身をfor文でループさせることが可能という意味です。
詳細は後述。ループするという特徴が実務レベルで特に使いますので、理解が必要になります。がんばっていきましょう！

また、HTMLElementは、取得後に何か加工するとリアルタイムで中身が変わります。
NodeListは基本的には静的なオブジェクトです(例外もありますが、詰め込みすぎは良くないのでいったん割愛します)
NodeListが戻り値のものに対しては、ループ処理としてforEachしている点は、参考サイト上でよく見るポイントかと考えています。
これが実務レベルで使うループ処理です。
詳しく解説すると、NodeList.prototype.forEachというループ方法(forEach)が実装されているので、配列のような処理ができ、よく使われています。（現状IEは非対応です）
forやforEachがごっちゃになりますが、後編でループ処理については改めて解説しますので、その際に。

ちなみにjQuery編

ここまではVanilla jsメインでしたが、jQueryでは$("#idNmae")や$(".className")のような取得方法があります。
これらの戻り値はjQueryオブジェクトです。
jQueryオブジェクトなので、addClassからfadeInから、数多くのjQueryの恩恵を受けられるわけですね。
しかしながら弱点としては、上記のgetElementByIdやquerySelectorAllと比較すると10倍近く遅くなることもあります。
実際にどれくらいなの？　と問われると、ミリ秒の世界ではあります。
…が、積み重ねで大きな差が生まれてしまうこともあります。特にscrollを代表する頻発イベントに対し、複雑な取得方法を入れてしまうと、全体的な動作がもっさりしてしまう恐れもあります。
jQueryが遅いと巷で耳にすることがありますが、WEB制作の現場においてはものすごい障壁になるとは考えづらく、基本的な書き方に問題があるケースが大半です。
これもjQueryが初心者にも愛されている故ですね。

まとめ

ということで、今回は前編として、JavaScriptにおける要素取得についてでした！
とっても基本的なことでしたが、改めて向き合ってみると大事にしたいなぁと考えさせられました。
完璧で美しいjavascriptを常に書くことは困難かもしれませんが、こちらの基本を抑えておくだけで、サイトの表示速度を改善できたり問題に直面した際に解決の糸口が見つけやすくなります。
もちろん、要素を取得する方法はこれだけではありません。
ご自身で調べてみて、ぜひぜひJavaScript賢者になってみてくださいね！

次回、後編では要素取得実践編のコツについて書かせていただこうと思います。
それではまた。