documentオブジェクト
はじめに
HTMLファイルをブラウザにロードすると，自動的にJavaScriptのオブジェクトが生
成されます。これらのオブジェクトには，ロードされたファイルに関するさまざま
なデータが，そのフィールド(プロパティ)の値として格納されています。
生成されるオブジェクトには次のようなものがあります。
- navigator
- 使用されているブラウザに関するデータをもつオブジェクト。
- window
- ブラウザウィンドウに関するデータをもつオブジェクト。
- document
- 表示されているページの内容に関するデータをもつオブジェクト。
- location
- 現在のURLに関するデータをもつオブジェクト。
これらオブジェクトは，フィールド(プロパティ)の値の他に，オブジェクトを
操作するためのメソッドをもっています。
documentオブジェクト
doucumentオブジェクトのプロパティやメソッドを使うことで，ブラウザに表示されている内容を操作することができます。
doucumentオブジェクトには次のようなプロパティが定義されています。
|
|---|
| プロパティ | 意味 |
|---|
|
|---|
| alinkColor | マウスが載ったリンク文字の色(文字列) |
| bgColor | ページの背景色(文字列) |
| fgColor | ページの描画色(文字列) |
| forms | HTMLファイル中の<form>要素が順に格納された配列 |
| images | HTMLファイル中の<img>要素(画像)が順に格納された配列 |
| linkColor | リンク文字の色(文字列) |
| links | HTMLファイル中の<a>要素(リンク)が順に格納された配列 |
| vlinkColor | 一度参照したリンク文字の色(文字列) |
|
|---|
doucumentオブジェクトは次のようなメソッドをもちます。
|
|---|
| メソッド | 機能 |
|---|
|
|---|
| write(文字列) | 引数の文字列をHTMLとして解釈して、結果をブラウザ上に表示する。 |
| writeln(文字列) | 引数の文字列をHTMLとして解釈して、その結果の後ろに新しい行を入れて、ブラウザ上に表示する。 |
|
|---|
プロパティやメソッドを使うには，次のように記述します。
- doucumentオブジェクトのプロパティの値を変更する
例 document.bgColor="#ffffff";
- documentオブジェクトのメソッドを実行する
例 document.write("年月日");
引数に指定された文字列が，ページの内容に書き出されます。
ページに固有のプロパティ
documentオブジェクトには，あらかじめ定義されたプロパティの他に，HTMLファイルの内容に応じて，自動的に作られるプロパティがあります。
タグの中には，name属性を指定できるものがあります。name属性で定義された名前は自動的にdocumentオブジェクトのプロパティになります。たとえば，imgタグにname属性を指定したとしましょう。
<img src="hiru.jpg" name=hiru>
<img src="yugata.jpg" name=yugata>
<img src="yoru.jpg" name=yoru>
すると，Imageオブジェクトを値とするhiru，yugata，yoruという名前のプロパティができます。そのsrcは次のように参照できます。
document.hiru.src
document.hugata.src
document.yoru.src
imgタグでページ内に指定された画像は，imagesプロパティを使っても参照できます。imagesプロパティは，documentオブジェクトにもともと定義されているプロパティで，その値は，Imageオブジェクトの配列です。imgタグの出現順に配列の先頭から指定された画像のImageオブジェクトが入ります。
変数はひとつのデータを格納するものでしたが、複数のデータをまとめて扱うときに，便利なのが配列です。複数の値をひとまとまりとして名前(配列名)をつけ、1つの変数のようにして扱えます。配列中の個々のデータのことを配列の要素と呼びます。
配列のそれぞれの要素は、配列名と添字を使って表します。添字とは配列の要素に番号をつけたもので、先頭が0で順にふられます。配列名に続いて[ ]を書き、その中に添字を書きます。たとえば、10個の要素を持つ配列hhの場合、
配列hhの最初の要素はhh[0]と表し、
配列hhの最後の要素はhh[9]と表します。
配列hh 添字 [0] [1] [2] [3] [4] [5] [6] [7] [8] [9]
┏━━┳━━┳━━┳━━┳━━┳━━┳━━┳━━┳━━┳━━┓
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┗━━┻━━┻━━┻━━┻━━┻━━┻━━┻━━┻━━┻━━┛
hh[3]のように配列名と添字で表した配列の要素は、変数と同じように扱え、値を参照したり、演算の対象にしたり、値を代入したりできます。
document.images[0].src
document.images[1].src
document.images[2].src
次に，HTMLファイルの中に次のようになformタグがある場合を考えてみましょう。
10文字分の幅をもったテキスト入力域が横に2つ並んでいるフォームです。
<form name="userinput" action="input.cgi" method="get">
<input type="text" name="data1" value="aaa" size=10>
<input type="text" name="data2" value="bbb" size=10>
</form>
documentドキュメントには、Formオブジェクトを値とするプロパティuserinputが作られ，それぞれのテキストフィールドの値は，次のように参照できます。
document.userinput.data1.value
document.userinput.data2.value
画像の場合と同様に，formタグで指定されたフォーム要素は，name属性でつけた名前を使わないでformsプロパティから参照できます。formsプロパティの値は，Formオブジェクトの配列ですので、もし上のformタグがHTMLファイルに現れる最初のformタグであるなら、次のように書きます。
document.forms[0].data1.value
document.forms[0].data2.value
さらに、別の参照の方法もあります。Formオブジェクトにはelementsプロパティが自動的に定義されます。これはformタグ中の<input>要素が順に格納された配列です。
document.forms[0].elements[0].value
document.forms[0].elements[1].value
連想配列によるプロパティへのアクセス
オブジェクトのプロパティにアクセスするには，ピリオド(.)を使うほかに，連想配列を使う方法もあります。imgタグで次のように記述すると，hiruという名前のプロパティが，documentオブジェクトにできます(その値はImageオブジェクト)。
<img src="hiru.jpg" name=hiru>
次のいずれの式も，hiruプロパティへアクセスします。
document.hiru
document["hiru"]
2つめの書き方を連想配列といいます。連想配列は，文字列とデータ値とを関連づけたものです。ピリオドを使う1つめの書き方では，hiruはプロパティ名で識別子であるのに対し、連想配列の[ ]の中は文字列であるという点がポイントです。プログラムの中で，アクセスするプロパティを動的に変化させるような場合には，文字列を指定する連想配列の書き方を使う方が都合がいいことがあります。
arigatアットマークacm.org
Last modified: Dec. 2014