DOM Scripting
DOMを利用する上での必須記事

JavascriptとCSSを組み合わせたDOM Scriptingを実施するにあたって、必ず理解しておかなければいけないことが2つあります。
それは「DOMの特徴」と「外部JS処理の実行タイミングについて」です。

「DOMの特徴」と「外部JS処理の実行タイミングについて」

DOM Scriptingでは、たとえば「ページ内の画像ありの<a>タグをすべて抽出し、<a>タグがロールオーバーした場合、画像をロールオーバー用の画像に置き換える」というように、ドキュメント内の情報を取得し操作します。
つまりDOMを実行するには、htmlファイルが読み込まれた後に処理する必要があります。

ところが、外部JSは<head>タグの<script>タグで呼ぶので、htmlファイルが読み込まれるより前に読み込まれます。

この問題を解決するためには、外部JSファイルに書かれたJavascriptをhtmlファイルが読み込まれた後に処理する「onload」を利用します。

すでにご承知であれば、次の節「onload」は読み飛ばして、さらにその次の節「使い方」から読み進めてください。

onload

さて、「onload」の扱い方は非常に重要なことですので、しっかり理解しておく必要があります。
順序立てて理解できるように、サンプルを用意しました。

まずは、サンプル1からご参照ください。

使い方

当Webサイト「tk1975」で紹介するフレームワークでは、ファイルを読み込んだ後に処理をする関数には、prepareOnloadFunction()を使います。

Javascript
function test(){
window.alert("これはテストです");
}
prepareOnloadFunction(test);

たとえば、関数testをhtmlファイルを読み込んだ後に処理する場合は、prepareOnloadFunction()を使い、その引数値に関数testを記述します。

既存のWebサイトに「tk1975フレームワーク」をご利用いただく際は、まず以下のことを確認してください。

  1. htmlファイルの<body>タグ内にonload属性がないか？
  2. 外部JSファイル内に「window.onload」と書かれた記述がないか？

htmlファイルの<body>タグ内にonload属性がある場合は、onload属性に書いてある内容はJS外部化し、prepareOnloadFunction()を使用することを強く勧めます

すでに外部JSにhtmlファイルを読み込んだ後に処理をする関数がある場合は、prepareOnloadFunction()に書き換えるか、当Webサイトで使用しているprepareOnloadFunctionをその関数に書き換えてご利用ください。

思考回路 〜prepareOnloadFunctionで実行していること〜

  1. 既存のwindow.onloadをoldonloadという変数に保存
  2. それに関数が関連づけられていなければ、新しい関数を追加する
  3. すでに関数が関連づけられていれば、新しい関数を既存の命令の最後に追加する

解説

ファイルを読み込んだ際に処理をする関数「prepareOnloadFunction」
  1. function prepareOnloadFunction(func){
  2. var oldonload = window.onload;
  3. if(typeof window.onload != 'function'){
  4. window.onload = func;
  5. }else{
  6. window.onload = function(){
  7. oldonload();
  8. func();
  9. }
  10. }
  11. }

同様の考えで、onloadの場合だけでなく、onresizeでも実現できます。

リサイズした際に処理をする関数「prepareOnresizeFunction」
  1. function prepareOnresizeFunction(func){
  2. var oldonresize = window.onresize;
  3. if(typeof window.onresize != 'function'){
  4. window.onresize = func;
  5. }else{
  6. window.onresize = function(){
  7. oldonresize();
  8. func();
  9. }
  10. }
  11. }

今回紹介した、prepareOnloadFunction(func)は、Simon Willson（http://simon.incutio.com/）によってaddLoadEvent(func)という関数名で書かれたもので、prepareOnresizeFunction(func)は、これを改良したものです。

参考

  • DOM Scripting 標準ガイドブック 〜やさしく学ぶ、JavaScriptとDOMによるWebデザイン〜
  • http://simon.incutio.com/

関連記事

本文はここまでです。

インフォメーション
インフォメーション

コンテンツ一覧

インフォメーション

おススメ

DOM Scripting 標準ガイドブック 〜やさしく学ぶ、JavaScriptとDOMによるWebデザイン〜

この一冊の本との出会いが、CSSとJavascriptを活用したDOM Scriptingへぼくを導いてくれました。