ドキュメントの制御

DOM (Document Object Model)とは、ドキュメントを構成するオブジェクトにアクセスする方法を定義したAPIです。

オブジェクトの参照

HTMLCollectionオブジェクトからは、HTML要素にさまざまな方法でアクセスできます。

HTMLCollectionオブジェクトを返すHTMLDocumentのプロパティには、次のようなものがあります。

anchors
applets
forms
images
links

HTMLCollectionのメソッド
メソッド		説明
item	Node item( `index` )	コレクションから指定された位置の要素を返す
item	Node elements[ `index` ]	コレクションから指定された位置の要素を返す
namedItem	Node namedItem( '`elementName`' )	コレクションから指定された名前をid属性かname属性に持つ要素を返す
	Node elements[ '`elementName`' ]
	Node `elementName`

次の2つのコードは、同一のオブジェクトを参照します。

var object = document.forms[ 'form1' ].elements[ 'text1' ];

var object = document.form1.text1;

サンプル

左のテキストボックスへの入力を参照して、右のテキストボックスへコピーします。

コード

<form name="form1">
    <input type="text" name="text1" onkeyup="TextChanged()" />
    <input type="text" name="result" />
</form>

<script type="text/javascript">
  function TextChanged()
  {
      var elements = document.forms[ 'form1' ].elements;

      elements[ 'result' ].value = elements[ 'text1' ].value;
  }
</script>