DOMによるエレメントの操作

このドキュメントの前半を、『DOMによるエレメントの発見』、後半を『DOMにより、エレメントを変化（へんげ）させる』というコンテンツで新しく書き直しました。

DOM4で追加されたインターフェイスに関しても記載しています。ぜひご覧ください。

DOMとJavaScript

DOMとは、W3Cによって策定された、プログラムからxml(html)ドキュメントに、アクセスするためのインターフェイスです。このインターフェイスは、特定のベンダーに依存することはありません。また、プログラム言語から、独立した形で仕様が決められているため、どのような言語にでも実装できるようになっています。

DOMが、プログラム言語からは、独立した形で仕様が決められていると書きましたが、DOMの仕様には、JavaとECMAScriptのAPIが、付録という形で載っています(ECMAScriptとは、JavaScriptの現時点の標準仕様のことで、一般的なWebブラウザはこの仕様に則って、JavaScriptを実装しています)。

2007年現在、一般的に使用されているWebブラウザのほとんどが、実用レベルでサポートしているので、互換性の不安無く（無くはないか）DOMを使える環境が整いつつあります。

DOMの守備範囲は、あくまでもxml(html)へのアクセスです。特定のIDが設定されているエレメント（要するにタグのことです）を取得したり、エレメントの表示スタイルを変更したりすることは、仕様の範囲内ですが、新しいウィンドウを開いたり、マウスカーソルを移動したりといった、xml(html)ドキュメントへのアクセス以外のことは、仕様の範囲外となります。

JavaScriptでDOM

JavaScriptでDOMを使う場合、何はともあれdocmentオブジェクトを取得する必要があります。但し、DOMの仕様では、docmentオブジェクトを取得する方法は、定められてはいません。これは各実装者(例えば、Webブラウザの作成者)が、勝手に決めることを意味しています。幸いにも、htmlの中に記述またはリンクされたJavaScriptでは、docmentオブジェクトは、すでに用意されているので、特に取得する必要はありません。

以下の例では、ドキュメントに、"Hello World"と表示します。

document.writeln('Hello World');

見つける、ほしい物を

DOMで何かをする場合、対象となる要素を見つけなければなりません。このためのメソッドが、docmentオブジェクトにはいくつか用意されています。代表的な物を以下にあげます。

Element  getElementById(in DOMString elementId);
NodeList getElementsByName(in DOMString elementName);
NodeList getElementsByTagName(in DOMString tagname);

getElementByIdは、ドキュメント内から、特定の id が設定してあるエレメントを探します。html4 の仕様上、id はドキュメント内でユニークであることから、このメソッドは、単一のエレメントを返します。

getElementsByNameは、ドキュメント内から、特定の name が設定してあるエレメントを探します。html4 の仕様上、複数のタグに同一の name が設定できることから、このメソッドは、複数のエレメントを含むリスト（配列）を返します。

getElementsByTagNameは、ドキュメント内から、特定の名前のタグ探します。このメソッドは、複数のエレメントを含むリスト（配列）を返します。

<!-- 1行目1列目 -->
<input type="text" name="column0" size="20" id="row0column0">
<!-- 1行目2列目 -->
<input type="text" name="column1" size="3"  id="row0column1">
<!-- 1行目3列目 -->
<input type="text" name="column2" size="10" id="row0column2"><br>
<!-- 2行目1列目 -->
<input type="text" name="column0" size="20" id="row1column0">
<!-- 2行目2列目 -->
<input type="text" name="column1" size="3"  id="row1column1">
<!-- 2行目3列目 -->
<input type="text" name="column2" size="10" id="row1column2"><br>
<!-- 3行目1列目 -->
<input type="text" name="column0" size="20" id="row2column0">
<!-- 3行目2列目 -->
<input type="text" name="column1" size="3"  id="row2column1">
<!-- 3行目3列目 -->
<input type="text" name="column2" size="10" id="row2column2"><br>
<!-- 4行目1列目 -->
<input type="text" name="column0" size="20" id="row3column0">
<!-- 4行目2列目 -->
<input type="text" name="column1" size="3"  id="row3column1">
<!-- 4行目3列目 -->
<input type="text" name="column2" size="10" id="row3column2"><br>

上記のようなhtmlドキュメントに対し、下記のコードを実行すると、itemには、2行目3列目のinputエレメントが格納されます。

var item = document.getElementById('row1column2');

同様に、下記のコードを実行すると、itemsには、2列目のinputエレメントが4つ格納されます。

var items = document.getElementsByName('column1');

下記のコードの場合は、itemsには、全てのinputエレメントが格納されます。

var items = document.getElementsByTagName('input');

スタイルが気になる？

エレメントさえ見つけてしまえば、後は好きなように料理できます。サイズ・色・表示／非表示なども、簡単に変更できます。そう、スタイルを変えてしまえば良いのです。

下記の例では、name というIDを持ったエレメントの背景を、赤に変更します。

document.getElementById('id').style.backgroundColor = 'red';

変更したスタイルを元に戻すには、次のようにします。但し、html上でインラインスタイルが指定してある場合、それが上書きされてしまうので、正しく元に戻らない可能性もあります。DOMで処理したいドキュメントには、インラインスタイルを使わない方が、幸せになれます(笑)。

document.getElementById('id').style.backgroundColor = '';

エレメントオブジェクトのstyle属性は、"DOM Level 2 Style Specification" で定義された、CSSStyleDeclarationオブジェクトです。アプリケーションからは、このオブジェクトを通して、各エレメントの、インラインスタイルにアクセスすることができます。

CSSStyleDeclarationオブジェクトからアクセスできるスタイルは、CSS2Propertiesに定義されている項目のうち、該当エレメントに設定可能なものだけです。スタイルを設定できないエレメント（例えばtitleエレメント）のスタイルを変更したり、CSS2Propertiesに定義されていない項目を変更しようとすると、エラーになります。

ご参考までに、CSS2PropertiesのIDL定義...（w3cのサイトへのリンクです。）

いくつかの例

非表示にする

document.getElementById('id').style.display = 'none';

サイズを変更する

document.getElementById('id').style.width = '4em';
document.getElementById('id').style.height = '20px';

カーソルを変更する

document.getElementById('id').style.cursor = 'wait';

位置を変更する

対象エレメントのposition（ポジション）に、absoluteを指定する必要があります。

document.getElementById('id').style.top = '100px';