Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。
その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。
DOMは便利な仕組みですが、慣れないと、数多くあるAPIのどれを使えばよいのか戸惑ってしまうかもしれません。しかし、いまどきのJavaScriptプログラミングでは、DOMを避けて通ることはできません。
本特集のPart1では、DOMについて、最低限これだけは知っておきたいという基本的な使い方を解説します。DOMに対する苦手意識を持っている方こそ、この機会に本気で取り組んでみてください。
DOM流「Hello World！」
リスト1を見てください。これは、DOMを使ってテキストや画像を表示する、基本的なコードです。いわばDOM流の「Hello World！」です。コードを読み込んだ直後のブラウザ画面は図1(a)の通りです。
リスト1の(3)のボタンのいずれかをクリックすることによって、それぞれのタグ内のonclick属性で指定したJavaScript関数を実行します(1)。その結果、図1(b)～(e)のように、テキストを書き換えたり、色を変えたり、テキストを画像に入れ替えたりします。
リスト1のコードを見ていきましょう。(1)に「document」から始まる記述がいくつかありますね。このdocumentこそが、DOMが提供するオブジェクトの中で最も重要なものです。documentオブジェクトを介することで、画像や段落といったWebページ上のあらゆる要素にアクセスして、情報を取得したり、書き換えたりできるからです。
documentの後に続く「.」はプロパティ演算子です。オブジェクト名とプロパティ演算子に続けて、そのオブジェクトが持つプロパティを記述することで、オブジェクトの要素やメソッドを参照したり、実行したりできます。
