JavaScript豆知識2　window.loadイベントとDOM

JavaScriptは読み込まれた時点で上から順に関数を実行していきますが、ページのロードが完了してから実行させたい、という場合は多いかと思います。

特にデザインを調整する関数などは、ページの描写が完了してから実行しないとうまく動かないことも多いです。

そこでよく使われるのが、以下の書き方です。このイベントはDOM、画像、スタイルシートなどのすべての依存するリソースを含めて読み込まれた時に発生します。

window.addEventListener('load',function);

書いてある通りなのですが、これを初めて見た時、僕は「DOM？ジェットストリームアタックをかけるアレか？」と思ってしまいました。DOMの詳細な説明は他を見て頂くとして、この「DOM」について初心者にも分かりやすく解説してみようと思います。

これがエディタで見る「htmlドキュメント」。ブラウザで解釈しなければただの文字列の塊です。

＜div class='impClass' onclick='impFunction' style='display: block;'＞
  テキスト
＜/div＞

そして、DOM要素というのは地の文で表示されているテキスト...「htmlドキュメント」をブラウザが解釈して、人間が読みやすいように整えたオブジェクトです。JavaScriptで言うと、下のコードで取得してくるオブジェクトです。

document.getElementById('impHtmlElement');

つまり、このイベントは、ブラウザがhtmlコードを解釈して、DOMを生成して、他のコンテンツのロードも終わって、デザインを構成し終えた時に発生するのです。なので、html要素の座標や文字色などの情報をJavaScriptで正しく取得することができるのです。

window.addEventListener('load',function);

BLOG.IMPLUS