PR

そろそろ本気で学びませんか?

2008年5月13日(火)
須田 超一

DOMを制御してコンテンツを動的に変更

JavaScriptを使って、HTMLにアクセスするには、DOM(Document Object Model)というアプリケーションインターフェース(API)を利用します。HTMLは、図1に示すようにDOMツリーと呼ばれる構造で表現することができます。このツリー構造で構成されてHTMLの各要素に、JavaScriptでアクセス可能になっています。

図1:DOMのツリー構造とindex1.htmlの解説

例えば、リスト1のHTMLの中の「

タイトル表示領域
」にJavaScriptでアクセスするためには、リスト2の(1)に記載しているように「document.getElementById("articleTitle")」という方法で記述します。つまり、「document.getElementById("ID名")」という書式でアクセス可能になります。

リスト2の(1)では、これから内容を変更しようとしているHTM内の場所「articleTitle」「contents」「ref」を、上記の方法で指定して、それぞれ短く表現できるように「titleId」「contentsId」「refId」という名前(変数)にしています。正確には、変数に代入すると言います。

難しいことは考えず、現時点では、html内にidを設定して、そのidへのJavaScriptでアクセスするには、getElementByIdを使うと覚えればOKです。

ここで、HTML内のタグ(今回は、divタグ)のidにアクセスする方法は分かりました。このidで指定されたdivタグで囲まれたテキスト文字を変更したい場合は、innerHTMLというプロパティを使います。

プロパティとは、部品だと思ってください。divで囲まれたタグの中身を指し示す部品がinnerHTML(プロパティ)です。

リスト2の(2)では、titleという変数に、「JavaScriptとは」という文字列を代入しています。そして、リスト2の(3)では、titleIdで指定した場所に、titleに入れた文字を代入するために、innerHTMLを使って、「titleId.innerHTML= title」という式を使って値を代入しています。

これで、HTMLの「"タイトル表示領域"(id="articleTitle")」が、「"JavaScriptとは"」という文字に置き換わります。同様に、「id="contents", "ref"」の部分も書き換えることが可能になります。

関数に一連の流れを登録して、イベントで呼び出し

イベントが発生すると、イベントハンドラで指定したJavaScriptが動作することを紹介しました。通常、イベントハンドラで指定したところに長いJavaScriptを書くことはしないので、関数というものを利用します。

関数は、あるまとまった機能を1つにして、簡単に呼び出したり、再利用するために使います。index1.htmlでは、リスト3に記載しましたように2種類のイベントを受け取ってJavaScript関数を動作させるように設定しています。

1つ目は、onloadイベントハンドラを使って、body要素全体が読み終わったら、init()関数を呼び出すようにしています。JavaScriptで関数を作成する場合は、「function 関数名(引数一覧) { 一連の処理 }」という形式で記述していきます。

onloadで呼び出すinit()関数(名前はなんでも良い)は、body要素を読み終わった時にJavaScriptを自動で実行したい時に使います。ここでは、前にも説明しましたように、テキスト内容を変更したい部分のdivタグへのアクセスを簡単にするために、ショートカットに使う変数を作成しています。

2つ目は、onclickイベントハンドラで、showText()関数を呼び出すように設定しています。showText()関数では、DOMにアクセスして、テキストの書き換えをするために、innerHTMLプロパティに値をセットしています。

株式会社ITコア R&Dグループリーダー/有限会社グローバルイーネットワーク 代表取締役

有限会社グローバルイーネットワーク代表取締役。ITコアでは、クラウドサービスやオープンソースの研究開発に従事。株式会社東芝で半導体メモリの開発やシステム開発を経験後、南カリフォルニア大学やボンド大学のビジネススクールで経営学を学びMBA取得。
ITと経営戦略を武器にして、多方面で事業活動を展開中。 2011年は、バルーンアート事業を立ち上げます。デジタルハリウッド講師(PHP/Ajax)。 アメブロはこちら

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています