お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

Ajax をマスターする: 第 6 回 DOM ベース Web アプリケーションの作成

Ajax の完璧な相棒、DOM と JacaScript を組み合わせて、ページをリロードせずに Web ページのユーザー・インターフェースを変える

Brett D. McLaughlin, Sr., Author and Editor, O'Reilly Media, Inc.

Brett McLaughlin氏は、Logo (小さな三角形を覚えていますか?) の時代からコンピューターの仕事をしています。現在の専門は、JavaおよびJava関連のテクノロジーを使ったアプリケーション・インフラストラクチャーの構築です。ここ数年は、Nextel Communications and Allegiance Telecom, Inc. でこれらのインフラストラクチャーの実装に携わっています。Brett氏は、Javaサーブレットを使ってWebアプリケーション開発のための再利用可能なコンポーネント・アーキテクチャーを構築するJava ApacheプロジェクトTurbineの共同設立者の1人です。同氏はまた、オープン・ソースのEJBアプリケーション・サーバーであるEJBossプロジェクトと、オープン・ソースのXML Web公開エンジンであるCocoonにも貢献しています。

概要： DOM (Document Object Model) と JavaScript コードを組み合わせて、対話式 Ajax アプリケーションを構築します。この連載の前回までの記事で、DOM プログラミングに関するコンセプト (Web ブラウザーが Web ページをツリーとして表示する方法) を説明してきたので、DOM でのプログラミング構造については理解できているはずです。今回は、すべての知識を実践に生かして、しゃれた効果のある単純な Web ページを作成します。ページが持つ効果はいずれも JavaScript で DOM を操作して作成するため、ページのリロードやリフレッシュは一切行いません。

このシリーズの他の記事を見る

タグを付ける!

日付: 2006年 9月 12日
レベル: 中級
この記事の原文: 英語
アクティビティー： 6008 ビュー
お気軽にご意見・ご感想をお寄せください：

この連載では今まで 2 回にわたって、Document Object Model (DOM) を詳しく説明したので、DOM の機能についてはかなり理解できているはずです (第 1 回と第 2 回の DOM についての記事、および Ajax シリーズの前回までの記事のリンクについては、｢参考文献」を参照してください)。今回は、そこで理解したことを実践に移し、ユーザーの操作に応じて変更するユーザー・インターフェースを備えた基本的な Web アプリケーションを開発します。インターフェースの変更を操作するのはもちろん、DOM です。この記事を読み終える頃には、今まで学んできた DOM の手法とコンセプトのほとんどを実践することになります。

この記事では、前回と前々回の記事を理解していることを前提します。そうでない場合は、もう一度読み返して、DOM について、そして Web ブラウザーがどのように HTML および CSS を Web ページを表す 1 つのツリー構造に変換するかについて、しっかりと理解してください。この記事では今まで説明した DOM の原理をすべて使って、機能的な (しかも単純な) DOM ベースの動的 Web ページを作成します。記事を読んでいてわからないことがでてきたら、いつでも前の 2 回の記事を参照してください。

サンプル・アプリケーションに取り掛かる

コードについての注意

DOM と JavaScript コードに話題を絞るため、HTML は少々手を抜いてインライン・スタイルで作成しました(例えば、h1 や p 要素の align 属性など)。いろいろ試すには有効な方法ですが、実動アプリケーションを開発する際には、しっかり時間をかけて、すべてのスタイルを外部CSS スタイル・シートに書き込むことをお勧めします。

それではまず始めに、極めて基本的なアプリケーションを組み立て、それからちょっとした DOM の魔法を加えていきましょう。DOM では、フォームを送信しなくても Web ページ上でものを移動させることができるということを念頭に置いた上で (それが、DOM を Ajax の完璧な相棒としているゆえんです)、昔ながらのシルクハットと Hocus Pocus! というラベルの付いたボタンだけを表示する単純なページを作成します。この後どうなるか予想できますか?

初期 HTML

リスト 1 に、このページの HTML を示します。本体は、見出しとフォーム、そして 1 つの単純なイメージとクリック可能なボタンが 1 つあるだけのシンプルなものです。

リスト 1. サンプル・アプリケーションの HTML

                
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

この HTML をはじめ、ここで使用するすべてのイメージは、この記事の終わりにある「ダウンロード」セクションからダウンロードできます。とはいえ、ダウンロードするのはイメージだけにして、この記事でアプリケーションをビルドするのに従って HTML を自分で入力することをお勧めします。ただ記事を読んで完成済みのアプリケーションを開始するよりも、はるかに確実に DOM コードを理解できるはずです。

サンプル Web ページを表示する

この段階では特に注目することは何もありません。ページを開くと図 1 のような表示になるはずです。

図 1. 何の変哲もないシルクハット

HTML についての最終ポイント

注意しなければならない重要な点が 1 つだけあります。それは、リスト 1 のフォームと図 1 に示されたボタンのタイプは button であるため、送信ボタンではないということです。送信ボタンを使用した場合、ボタンをクリックするとブラウザーがフォームを送信しようとしますが、フォームにはもちろんアクション属性がないため(完全に意図的に)、アクティビティーのない無限ループという結果になってしまいます(何が起こるか、ご自分の環境で試してみてください)。送信ボタンではなく通常の入力ボタンを使用することで、JavaScript関数をボタンに結び付け、フォームを送信することなくブラウザーを操作することができます。

上に戻る

サンプル・アプリケーションに内容を追加する

それでは、JavaScrip、DOM 操作、そしてちょっとした画像の魔法を使って、この Web ページの見映えを整えていきましょう。

getElementById() 関数の使用

魔法の帽子は、ウサギなしではあまり意味がありません。それにはまず、既存のページに表示された画像(図 1 を参照) をウサギの画像に置き換えて、図 2 のようにします。

図 2. 今度はウサギが加わったシルクハット

DOM のこのトリックを実現する最初のステップは、Web ページ内の img 要素を表すDOM ノードをルックアップすることです。通常は、getElementById() メソッドを使用するのがもっとも簡単な方法で、これは Web ページを表す document オブジェクトで使用できます。ご存知のように、このメソッドは以下のように機能します。

var elementNode = document.getElementById("id-of-element");

HTML への id 属性の追加

これはかなり基本的な JavaScript ですが、HTML を多少操作する必要があります。それは、アクセス対象の要素の id 属性を追加することです。ウサギが含まれる新しい画像に置き換えたいのは img 要素なので、リスト 2 のように HTML を変更します。

リスト 2. id 属性の追加

                
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

ページをリロード (再表示) しても、何の変化もないはずです。id 属性を追加しても、Web ページ上の表示には影響しません。ただしこれによって、要素をJavaScript と DOM を使って操作しやすくなります。

img 要素の取得

これで、getElementById() を簡単に使うことができます。必要な要素の ID (topHat) が用意できたので、これを新しい JavaScript 変数として保管します。リスト3 に示すコードを HTML ページに追加してください。

リスト 3. img 要素へのアクセス

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

この時点でもう一度 Web ページをロードまたはリロードしても、注目に値する変化は見られません。画像にアクセスできるようになりましたが、まだ何も行っていないからです。

上に戻る

画像を変更する (難しい方法)

変更するには、2 通りの方法があります。つまり、難しい方法と簡単な方法です。優秀なプログラマーたちと同じく、普段は私も簡単な方法を選びますが、困難な道のりを辿ることも DOM を演習する上では大いに役立つため、時間を費やす価値があります。まず、困難な方法ではどのように画像を変更するかを見てください。後で同じ変更を簡単な方法で行うときに、このステップをもう一度検討します。

既存の画像を、ウサギを組み込んだ新しい画像に置き換えるために必要なステップは以下のとおりです。

新規 img 要素を作成する。
現在の img 要素の親要素 (つまり、コンテナー) にアクセスする。
既存の img 要素のすぐ前に、新しい img 要素をコンテナーの子として挿入する。
古い img 要素を除去する。
ユーザーが Hocus Pocus! ボタンをクリックすると、作成した JavaScript 関数が呼び出されるように設定する。

新規 img 要素の作成

前の 2 回の記事で説明したように、DOM でほとんどすべての鍵となるのは文書オブジェクトです。文書オブジェクトはWeb ページ全体を表すもので、これを使って getElementById() などの大いに役立つメソッドにアクセスしたり、新しいノードを作成することができます。このプロパティーは、この困難な方法では極力使用しないようにします。

具体的には、新しい img 要素を作成する必要があります。DOM ではすべてのものがノードになりますが、これらのノードはさらに以下の3 つの基本グループに分かれることを思い出してください。

要素
属性
テキスト・ノード

上記の他にもグループがありますが、この 3 つのグループがほとんどすべての場合、プログラミング上のニーズを満たします。この例では、img タイプの新しい要素が必要なので、JavaScript 内のコードは以下のようになります。

var newImage = document.createElement("img");

上記のコードによってimg という要素名を持つ、element タイプの新しいノードが作成されます。HTML では、これは当然以下のようになります。

<img />

DOM は、開始タグと終了タグを持ち、要素が現在空であることを明確に示す HTML を作成することを思い出してください。そのため、ここで行う必要があるのは、この要素にコンテンツまたは属性を追加して、Web ページに挿入することだけとなります。

img 要素のコンテンツは空ですが、属性を追加する必要があります。つまり、ロードする画像を指定するsrc 属性を追加します。ここでは addAttribute() のようなメソッドを使用しなければならないと思うかもしれませんが、違います。DOM仕様の作成者はプログラマーの立場から、私たちがショートカットを使いたがることを見越して(実際、その通りです)、単一のメソッドで新しい属性を追加すると同時に既存の属性も変更するsetAttribute() を作成しています。

setAttribute() を呼び出して既存の属性を指定すると、その値は指定した値に変更されます。一方、setAttribute() を呼び出し、存在していない属性を指定すると、DOM は提供された値を使って自動的に属性を追加します。つまり、1つのメソッドで 2 つの目的が達成できるというわけです。このため、JavaScriptには以下を追加します。

var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");

これによって画像が作成され、そのソースが適切に設定されます。この時点で、HTML はリスト 4 のようになっているはずです。

リスト 4. DOM による新規画像の作成

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

このページはロードすることができますが、何のアクションも期待しないでください。実際の Web ページにはまだ何も行っていないからです。また、必要な実行内容リストのステップ 5 で説明している JavaScript 関数の呼び出しがまだ残っています。

オリジナルの画像の親の取得

画像を挿入する準備ができたので、今度はこれを挿入する場所が必要です。ただし、この画像は既存の画像に挿入するのではなく、既存の画像の前に配置してから既存の画像を除去します。そのためには既存の画像の親が必要で、この親が、挿入と除去操作の鍵となります。

今までの記事を思い出してください。DOM ではWeb ページをノードの階層ツリーとみなします。すべてのノードには親 (ツリーのなかで、そのノードを子とする高位のノード) があり、子を持つこともあります。この画像には子はありませんが (覚えていますか、画像は空の要素です)、もちろん親はあります。親が何であるかは気にせず、単にアクセスするだけで構いません。

これには、すべての DOM ノードが持つ parentNode プロパティーを使用して、以下のようにします。

var imgParent = hatImage.parentNode;

実に単純明快です。画像には古い画像という子がすでにあるため、親が子を持つことが可能であることが分かります。さらに、親が div であるか、p であるか、あるいはページの本体であるかを知る必要はありません。何であるかはまったく関係ないからです。

新規画像の挿入

古い画像の親ができました。これで、新しい画像を挿入できます。子を追加するのは至って簡単で、以下のようなメソッドを使用します。

insertBefore(newNode, oldNode)
appendChild(newNode)

新しい画像を古い画像とまったく同じ場所に表示させるには、insertBefore() が必要です (および removeChild() メソッドも使う必要があります)。以下の JavaScript の行を使って、新しい要素を既存の画像の直前に挿入します。

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);

この時点で、古い画像の親には 2 つの子の画像があることになります。1 つは新しい画像、そしてもう 1 つはその直後に続く古い画像です。この 2 つの画像の回りにあるコンテンツには変更がないこと、そしてコンテンツの順序は挿入前とまったく同じであることに注意してください。親には古い画像の直前に新しい画像という子が追加されただけのことです。

古い画像の除去

ここで必要なのは古い画像を除去することだけで、新しい画像のみを Web ページに表示させます。古い画像要素の親があるため、画像は簡単に除去できます。以下のように、removeChild() を呼び出して、除去するノードを渡すだけです。

var imgParent = hatImage.parentNode;imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);

これによって当然、古い画像は新しい画像に置き換わります。HTML はリスト 5 のようになっているはずです。

リスト 5. 古い画像と新しい画像の置換

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.insertBefore(newImage, hatImage);
      imgParent.removeChild(hatImage);
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

JavaScript の接続

最後の (そして、おそらくもっとも簡単な) ステップは、作成した JavaScript 関数に HTML フォームを結合することです。単純な onClick イベント・ハンドラーを HTML に追加するだけで、ユーザーが Hocus Pocus! ボタンをクリックするたびに showRabbit() 関数が実行されるようにできます。

<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />

JavaScript プログラミングはこの段階で、お決まりの作業になります。上記を HTML に追加してページを保管し、ページを Web ブラウザーにロードしてください。最初は図 1 のように表示されていたページは、Hocus Pocus! をクリックすると図 3 のような結果となります。

図 3. 姿を現したウサギ

上に戻る

画像を変更する (やや簡単な方法)

画像を変更するために今まで行ってきたステップを振り返り、ノードで使用できるメソッドをいろいろ検討してみると、replaceNode() というメソッドに気づくはずです。このメソッドは、ノードを置換することができます。前のステップを復習してみましょう。

新規 img 要素を作成する。
現在の img 要素の親要素 (つまり、コンテナー) にアクセスする。
既存の img 要素の直前に、新しい img 要素をコンテナーの子として挿入する。
古い iimg 要素を除去する。
ユーザーが Hocus Pocus! ボタンをクリックすると、作成した JavaScript 関数が呼び出されるように設定する。

replaceNode() を使うと、ステップ 3 と 4 を組み合わせて必要なステップ数を減らすことができるため、プロセスは以下のようになります。

新規 img 要素を作成する。
現在の img 要素の親要素 (つまり、コンテナー) にアクセスする。
古い img 要素を新しく作成したイメージに置き換える。
ユーザーが Hocus Pocus! ボタンをクリックすると、作成した JavaScript 関数が呼び出されるように設定する。

大した違いはないように見えますが、コードが単純化されることは確かです。リスト 6 に、insertBefore() および removeChild() メソッド呼び出しを省いて変更を行う方法を示します。

リスト 6. 古いイメージと新しいイメージの置換 (ワン・ステップ)

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.replaceChild(newImage, hatImage);
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>
</html>

これは大幅な変更ではありませんが、DOM コーディングでの重要な点を説明しています。それは、特定のタスクを実行するには通常、何通りかの方法があるという点です。使用可能な DOM メソッドを慎重に検討して、タスクを達成する近道があるかどうかを調べると、大抵の場合は、4 つや 5 つのステップで行うことを 2 つや 3 つのステップに減らすことができます。

上に戻る

イメージを変更する (非常に簡単な方法)

タスクの実行方法にはほとんど言っていいほど簡単なバージョンがあることを指摘したので、ここではシルクハットのイメージをウサギのイメージに置き換える、ずっと簡単な方法を紹介しましょう。この記事をここまで読んで、その方法が何であるかが分かったかもしれませんが、そのヒントは属性です。

イメージ・要素は大部分が、その src 属性によって制御されることを思い出してください。この属性は、ローカル URI や外部 URL の、どこかしらの場所を参照します。これまではイメージ・ノードを新しいイメージに置き換えてきましたが、既存のイメージの src 属性を変更するだけのほうが遥かに簡単です。以下では、新規ノードの作成、親の検索、そして古いノードの置換をすべて単一のステップにまとめています。

hatImage.setAttribute("src", "rabbit-hat.gif");

これですべてです。リスト 7 では、Web ページ全体のコンテキストに上記のソリューションを示しています。

リスト 7. src 属性の変更

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>
</html>

DOM で最高に素晴らしいことの 1 つは、属性を更新すると、Web ページも同時に変更されるということです。イメージが新しいファイルを指定すると同時にブラウザーがそのファイルをロードするため、ページが更新されます。リロードは一切不要で、新しいイメージ・要素を作成する必要もありません。結果は図 3 とまったく同じで、異なる点といえば、コードが極めて単純になっているということだけです。

上に戻る

ウサギを非表示にする

Web ページはだいぶ洗練されてきましたが、未熟さがまだ少し残っています。ウサギはシルクハットから飛び出しますが、画面下にあるボタンはウサギが表示されてもまだHocus Pocus! となっていて、いまだに showRabbit() を呼び出します。つまり、ウサギが表示された後にボタンをクリックすると、処理時間を無駄にするということです。それにも増して問題なのは、このボタンは明らかに無用であるということです。無用なボタンがいい結果をもたらすことは決してありません。そのためここでは、DOMを使って変更を追加し、ウサギがシルクハットの中にいようと外にいようとボタンを有益なものにする方法を検討してみましょう。

ボタン・ラベルの変更

もっとも簡単なのは、ユーザーがボタンをクリックした後に、そのラベルを変更することです。こうすれば、ボタンをクリックすることによって別の魔法が起こるようには見えなくなります。Web ページの最悪の例は、誤ったことをユーザーにほのめかすことに他なりません。ボタンのラベルを変更するには、まずこのノードにアクセスする必要があり、それにはボタンを参照するための ID が必要になります。この作業は、もう手馴れたものですよね。ボタンに id 属性を追加する方法は、リスト 8 のとおりです。

リスト 8. id 属性の追加

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

これで、JavaScript で簡単にボタンにアクセスできます。

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
}

ボタン・ラベルの値を変更する JavaScript の次の行はすでにご存知かもしれませんが、当然、setAttribute() を使用します。

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Get back in that hat!");
}

}

この簡単な DOM 操作で、ウサギが飛び出すと同時にボタンのラベルが変更されることになります。この時点で、HTMLおよび完成した関数は showRabbit() リスト 9 のようになっているはずです。

リスト 9. ここまでで完成した Web ページ

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      button.setAttribute("value", "Get back in that hat!");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

ウサギの再表示

新しいボタン・ラベルから想像できると思いますが、今度はウサギを帽子に戻す番です。当然、ウサギを飛び出させたプロセスとは逆のプロセスで、イメージの src 属性を古いイメージに戻します。そのための新しい JabaScript を作成します。

function hideRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "topHat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Hocus Pocus!");
}

上記は、showRabbit() 関数の実行内容をすべて逆にしただけです。つまり、イメージを古いウサギ抜きのシルクハットに設定し、ボタンをグラブしてラベルをHocus Pocus! に戻します。

上に戻る

イベント・ハンドラーを操作する

addEventHandler() は使用しないでください

onclick プロパティーの他、 onclick や onBlur などのイベント・ハンドラーを追加する用途を持つ、addEventHandler() というメソッドがあります。残念ながら、 Microsoft™ Internet Explorer™ ではこのメソッドをサポートしていないため、JavaScript で使用すると何百万人もの Internet Explorer ユーザーがエラーを受け取ることになります (苦情の種になる可能性があります)。ですから、このメソッドは使わないようにしてください。この記事で紹介する方法を使えば同じ結果を得ることができ、しかもこの場合は Internet Explorer でも機能します。

この時点で、サンプル・アプリケーションには 1 つの大きな問題があります。その問題とは、ボタンのラベルが変わっても、そのボタンをクリックして行われるアクションは変わらないということです。幸いDOM では、ユーザーがボタンをクリックしたときのイベント (行われるアクション)を変更することができます。ボタンが Get back in that hat! に変わった場合、ボタンをクリックすると hideRabbit() が実行されるように設定できます。逆に、ウサギが隠れると同時に、ボタンが再びshowRabbit() を実行するように設定できます。

HTML を見ると、操作対象のイベントは onclick であることが分かります。JavaScript では、ボタンの onclick プロパティーを使用してこのイベントを参照します (このプロパティーは通常、HTMLでは C が大文字の onClick、JavaScript では C が小文字の onclick として表記されます)。onclick プロパティーに関数を割り当てるだけで、ボタンで実行されるイベントを変更できます。

ただし onclick プロパティーには多少の特異性があります。それは、関数のストリング名ではなく、関数自体の参照を指定しなければならないという点です。JavaScriptで関数を参照するには、括弧なしの関数名を使用します。ボタンがクリックされたときに実行される関数を変更するには、例えば以下のようにします。

button.onclick = myFunction;

HTML でこの変更を行うのはとても簡単です。リスト 10 を見てください。このリストでは、ボタンが実行する関数をトグルしています。

リスト 10. ボタンの onClick 関数の変更

                
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Get back in that hat!");
      button.onclick = hideRabbit;
    }

    function hideRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "topHat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Hocus Pocus!");
      button.onclick = showRabbit;                                           
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

これは完全に実用的な DOM アプリケーションです。ぜひ、ご自分でも試してみてください。

上に戻る

まとめ

ここまで読み終えた時点で、DOM の使用方法にかなり慣れてきたことでしょう。今までの記事では、DOM の操作に関する基本コンセプトと、API の詳細を紹介してきましたが、今回は単純な DOM ベースのアプリケーションを実際に操作しました。この記事を参考にして、オンラインで実際に試してみてください。

Document Object Model に焦点を当てた記事は、この連載ではこれが最後になりますが、今後も DOM が登場します。事実、Ajax と JavaScript の世界では、ある程度 DOM を使わないと苦労することになります。複雑な強調表示や動きの効果を作成する場合も、テキスト・ブロックやイメージを操作するだけの場合も、DOM を使用すると実に簡単な方法で Web ページにアクセスできます。

DOM の使い方がまだよくわからないという方は、この一連の 3 回の記事を読みなおしてください。この連載では今後、詳細をあまり説明せずに DOM を使うことになるので、DOM の詳細、そしてXML や JSON などのその他のコンセプトに関する重要な情報をしっかり理解しておかなければなりません。DOM の使い方をしっかり理解して、独自の DOM ベース・アプリケーションの作成を練習しておけば、今後数ヶ月にわたって説明するデータ・フォーマットの課題に対応できるようになるはずです。

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
Example graphics only	wa-ajaxintro6/ajax_6-images_download.zip	91KB	HTTP
Complete example, including HTML and graphics	wa-ajaxintro6/ajax_6-complete_examples.zip	93KB	HTTP

ダウンロード形式について

参考文献

学ぶために

Exploiting DOM for Web response および Advanced requests and responses in Ajax: Dom プログラミングについての連載第 1 回、および第 2 回の記事です。連載「Ajax をマスターする」のすべての記事も参照できます。
「Build dynamic Java applications」(Philip McCarthy 著、developerWorks、2005 年 9 月): Java™ パースペクティブを使って、サーバー・サイドからの視点で Ajax を説明しています。
「Java object serialization for Ajax」(Philip McCarthy 著、developerWorks、2005 年 10 月): Java パースペクティブから、ネットワークでオブジェクトを送信する方法、およびAjax を操作する方法を説明しています。
「Call SOAP Web services with Ajax」(James Snell 著、developerWorks、2005 年 10 月): この非常に高度な記事で、Ajax を既存の SOAP ベース Web サービスに統合する方法を詳細に検討してください。この記事では、Ajax 設計パターンを使用して Web ブラウザー・ベースの SOAP Web サービス・クライアントをインプリメントする方法を紹介しています。
World Wide Web Consortium の DOM ホーム・ページ: すべての DOM 関連情報は、ここから探してください。
The DOM Level 3 Core Specification: 使用可能なタイプとプロパティーから DOM の使用方法まで、各種言語でコアDocument Object Model を定義しています。
DOM 用 ECMAScript 言語バインディング: JavaScript プログラマーが独自のコードから DOM を使用する際には、このLevel 3 Document Object Model Core 定義の付録を参考にできます。
「Ajax: A new approach to Web applications」(Jesse James Garrett 著、Adaptive Path、2005 年 2 月): Ajax の名前を作り出した記事です。すべての Ajax 開発者の必読書です。
developerWorks Web architecture ゾーン: Web 作成技術を磨くための記事、チュートリアル、フォーラムなどが豊富に用意されています。
developerWorks technical events and Webcasts: 技術開発者を対象としてソフトウェア・ブリーフィングで最新情報を入手してください。

製品や技術を入手するために

『Head Rush Ajax』(Brett McLaughlin 著、O'Reilly Media、2006 年): ここに記載された Head Firstスタイルのアイデアを吸収してください。
『Java and XML, Second Edition』(Brett McLaughlin 著、O'Reilly Media, Inc.、2001 年):著者の XHTML およびXML 変換についての著者の考察を読んでください。
『JavaScript: The Definitive Guide』(David Flanagan 著、O'Reilly Media, Inc.、2001 年): JavaScript と動的 Webページの操作について広範に説明しています。次回の改版では、Ajax についての2 つの章が追加されます。
『Head First HTML with CSS & XHTML』(Elizabeth Freeman、Eric Freeman 共著、O'Reilly Media, Inc.、2005 年): 標準 HTML および XHTML と、CSS の HTML への適用方法について詳しく説明しています。
IBM トライアル・ソフトウェア: developerWorks から直接ダウンロードできるソフトウェアで、次の開発プロジェクトを構築してください。