レベル: 中級 Brett D. McLaughlin, Sr. (brett@newInstance.com), Author and Editor, O'Reilly Media, Inc.
2006年 9月 12日 DOM (Document Object Model) と JavaScript コードを組み合わせて、対話式 Ajax アプリケーションを構築します。この連載の前回までの記事で、DOM プログラミングに関するコンセプト (Web ブラウザーが Web ページをツリーとして表示する方法) を説明してきたので、DOM でのプログラミング構造については理解できているはずです。今回は、すべての知識を実践に生かして、しゃれた効果のある単純な Web ページを作成します。ページが持つ効果はいずれも JavaScript で DOM を操作して作成するため、ページのリロードやリフレッシュは一切行いません。
この連載では今まで 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 では、これは当然以下のようになります。
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 要素をコンテナーの子として挿入する。
- 古い i
img 要素を除去する。
- ユーザーが 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 |
|---|
参考文献 学ぶために
製品や技術を入手するために
議論するために
著者について | 
| | Brett McLaughlin氏は、Logo (小さな三角形を覚えていますか?) の時代からコンピューターの仕事をしています。現在の専門は、JavaおよびJava関連のテクノロジーを使ったアプリケーション・インフラストラクチャーの構築です。ここ数年は、Nextel Communications and Allegiance Telecom, Inc. でこれらのインフラストラクチャーの実装に携わっています。Brett氏は、Javaサーブレットを使ってWebアプリケーション開発のための再利用可能なコンポーネント・アーキテクチャーを構築するJava ApacheプロジェクトTurbineの共同設立者の1人です。同氏はまた、オープン・ソースのEJBアプリケーション・サーバーであるEJBossプロジェクトと、オープン・ソースのXML Web公開エンジンであるCocoonにも貢献しています。Brettの連絡先は、brett@oreilly.com です。 |
記事の評価
| 
