読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【DOMアクセスはquerySeletorよりもgetElementByが高速】

f:id:wp-lesson:20160808205548j:plain

スマホ用のメニューボタンをタップすると
横からヌルッとメニューが出てきますよね。
 
このようにウェブページを表示したままで
ページの一部をアニメーションさせたり
するとき、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
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!