【DOMアクセスはquerySeletorよりもgetElementByが高速】
スマホ用のメニューボタンをタップすると
横からヌルッとメニューが出てきますよね。
このようにウェブページを表示したままで
ページの一部をアニメーションさせたり
するとき、JavaScriptを使ってHTMLタグの
階層構造（DOMといいます）にアクセスを
します。
そのために使うJavaScriptの文法に
getElementByID()
querySelector()
があります。
どちらもアクセスしたいHTMLタグに
付いているIDなどの目印を指定します。
getElementByID("contents")
querySelector("#contents")
こんな感じです。
どちらを使ってもアクセスできますが、
両者は内部的な動作の仕組みにおいて
大きな違いがあります。
getElementByIDは動的なノードを返し、
querySelectorは静的なノードを返します。
静的なノードとは、HTMLのファイルに
最初から書いてある通りのタグ構造の
ことです。
動的なノードとは、いったんブラウザに
読み込まれて表示されたHTMLに対して
JavaScript等のプログラムを使って中身
を変更したあとのタグ構造のことです。
スマホ用のメニューなど動きのある
ウェブページは、JavaScript等によって
ノードが動的に組み換わることがある
ので、getElementByIDを使わないと、
アクセスしたいタグにアクセスできない
ケースが出てくる可能性があります。
JavaScriptを勉強する方は、
「何となくquerySelectorが今風だし
カッコ良さそう」
とか
「getElementByIDって初心者向けの
古い書籍で見かけた」
という理由で、使い分けを判断しない
ほうが良いでしょう。
まずは基本構文としてgetElementByID
を使えるようになってから、jQueryや
querySelectorでも同じことを書き換え
できるのだということを体験することを
お勧めします。
ちなみに、getElementByIDはブラウザが
動的にノードを探索してくれるので、
静的にノードを探索するquerySelector
より高速に動くとされています。
＊添付のページに明記してありました。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
