DOMによるフォーム・コントロールの操作 (1/6)
作成:2010-04-02 11:50
更新:2010-05-11 17:30
更新:2010-05-11 17:30
■documentとElement
WebページはHTMLによって記述されています。HTMLのソースコードをブラウザで読み込み、そこに書かれているタグをレンダリングして表示しているわけですね。
このWebブラウザには「DOM(Document Object Model)」というものが組み込まれています。これは、HTMLに記述されている要素をオブジェクトとして扱うための機能です。DOMは、HTMLの各要素（タグ）に対応するオブジェクトを生成し、そのオブジェクトを操作することで、Webページに表示されているその要素の表示を操作することができるようになっています。
JavaScriptからも、このDOMのオブジェクトは利用することができます。Webページを操作するということは、イコール「DOMオブジェクトを操作する」ことだと考えてよいでしょう。
このDOMオブジェクトは、非常に綺麗な階層構造になっています。まずは、その基本的な構造を頭に入れておきましょう。
・documentオブジェクト
Webページとしてブラウザに表示されている内容（要するに<html>タグ部分に相当するもの）は「ドキュメント」として扱われます。これは「document」というオブジェクトとして用意されます。
・bodyプロパティ（HTMLBodyElementオブジェクト）
その中にボディ（<body>タグ部分）に相当する「body」というプロパティがあります。これは、HTMLBodyElementというオブジェクトなのですが、通常はdocument.bodyというようにdocumentのプロパティとして扱います。
・Elementオブジェクト
docuent.bodyの中には、実際に<body>タグ内に書かれているタグに相当するものが「Element」というオブジェクト（または、それを継承したオブジェクト）として用意されています。これらは、HTMLのタグの構造に従って、きれいに階層的に収められています。documentやbodyに用意されているプロパティを利用してそれらを操作することもできますし、documentに用意されている、特定のオブジェクトを検索して取得するためのメソッドを利用して必要なものを取り出し操作することもできます。
document内にあるさまざまなオブジェクトを操作する場合、まず「どうやって、必要なオブジェクトを取得するか」を知らないといけません。これにはいくつか方法がありますが、もっとも基本となるのは、documentオブジェクトに用意されている「getElementById」というメソッドでしょう。これは、タグのIDを指定して、そのタグに相当するオブジェクトを取得するものです。例えば、
例として、<div>タグの表示を操作する簡単な例を下のリスト部分に掲載しておきましょう。ここでは、３つの<div>タグを用意し、それぞれをdocument.getElementByIdで取得して、そのタグの中に記述されている内容を変更しています。
・innerHTMLについて
<div>タグのように、開始タグと終了タグの間に表示する内容を挟んで記述するタイプのものでは、その内容を「innerHTML」というプロパティとして取り出すことができます。この値を変更すれば、タグの間に用意された内容を書き換えることもできるのです。
・スクリプトの記述位置について
ここでは、<script>タグが<head>内ではなく、<body>の一番最後に書かれていますね。なぜこんなところに書いているのか？というと、<head>部分に書いてしまうと「操作するDOMオブジェクトがまだないから」なのです。
Webブラウザは、HTMLのソースコードを最初から順に読み込んでいきます。そして読み込む順番に従って、それぞれのタグに相当するDOMオブジェクトを作成し、記述されているスクリプトは実行していきます。つまり、操作するタグより前にスクリプトが書いてあると、スクリプトが実行されるときには「まだ、操作するタグが読み込まれていない」という状態になってしまうのです。
そこで、操作するタグの後に<script>タグを書いておいた、というわけです。もちろん、これにはちゃんとした回避法があります。（それについては次のページで……）
このWebブラウザには「DOM(Document Object Model)」というものが組み込まれています。これは、HTMLに記述されている要素をオブジェクトとして扱うための機能です。DOMは、HTMLの各要素（タグ）に対応するオブジェクトを生成し、そのオブジェクトを操作することで、Webページに表示されているその要素の表示を操作することができるようになっています。
JavaScriptからも、このDOMのオブジェクトは利用することができます。Webページを操作するということは、イコール「DOMオブジェクトを操作する」ことだと考えてよいでしょう。
このDOMオブジェクトは、非常に綺麗な階層構造になっています。まずは、その基本的な構造を頭に入れておきましょう。
・documentオブジェクト
Webページとしてブラウザに表示されている内容（要するに<html>タグ部分に相当するもの）は「ドキュメント」として扱われます。これは「document」というオブジェクトとして用意されます。
・bodyプロパティ（HTMLBodyElementオブジェクト）
その中にボディ（<body>タグ部分）に相当する「body」というプロパティがあります。これは、HTMLBodyElementというオブジェクトなのですが、通常はdocument.bodyというようにdocumentのプロパティとして扱います。
・Elementオブジェクト
docuent.bodyの中には、実際に<body>タグ内に書かれているタグに相当するものが「Element」というオブジェクト（または、それを継承したオブジェクト）として用意されています。これらは、HTMLのタグの構造に従って、きれいに階層的に収められています。documentやbodyに用意されているプロパティを利用してそれらを操作することもできますし、documentに用意されている、特定のオブジェクトを検索して取得するためのメソッドを利用して必要なものを取り出し操作することもできます。
○getElementByIdメソッドについて○
document内にあるさまざまなオブジェクトを操作する場合、まず「どうやって、必要なオブジェクトを取得するか」を知らないといけません。これにはいくつか方法がありますが、もっとも基本となるのは、documentオブジェクトに用意されている「getElementById」というメソッドでしょう。これは、タグのIDを指定して、そのタグに相当するオブジェクトを取得するものです。例えば、
<div id="helo">Hello!</div>こんなタグがあったとしましょう。このタグに相当するDOMオブジェクトを取得したい場合には、こんな具合にします。
var div = document.getElementById("helo");これで、変数divに上記の<div>タグのDOMオブジェクトが取得できます。HTMLのタグに書かれるID属性は、必ず「同じものがページ内に存在しない」ようにしないといけません。同じIDが複数あるとうまく機能しないので注意してください。○利用例○
例として、<div>タグの表示を操作する簡単な例を下のリスト部分に掲載しておきましょう。ここでは、３つの<div>タグを用意し、それぞれをdocument.getElementByIdで取得して、そのタグの中に記述されている内容を変更しています。
・innerHTMLについて
<div>タグのように、開始タグと終了タグの間に表示する内容を挟んで記述するタイプのものでは、その内容を「innerHTML」というプロパティとして取り出すことができます。この値を変更すれば、タグの間に用意された内容を書き換えることもできるのです。
・スクリプトの記述位置について
ここでは、<script>タグが<head>内ではなく、<body>の一番最後に書かれていますね。なぜこんなところに書いているのか？というと、<head>部分に書いてしまうと「操作するDOMオブジェクトがまだないから」なのです。
Webブラウザは、HTMLのソースコードを最初から順に読み込んでいきます。そして読み込む順番に従って、それぞれのタグに相当するDOMオブジェクトを作成し、記述されているスクリプトは実行していきます。つまり、操作するタグより前にスクリプトが書いてあると、スクリプトが実行されるときには「まだ、操作するタグが読み込まれていない」という状態になってしまうのです。
そこで、操作するタグの後に<script>タグを書いておいた、というわけです。もちろん、これにはちゃんとした回避法があります。（それについては次のページで……）
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
</head>
<body>
<H1>TEST.</H1>
<div id="one">TEST</div>
<div id="two">TEST</div>
<div id="three">TEST</div>
<script type="text/javascript">
<!--
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
one.innerHTML = "第１のDIVタグです。";
two.innerHTML = "第２のDIVタグです。";
three.innerHTML = "第３のDIVタグです。";
//-->
</script>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る