logo

ドキュメントオブジェクトモデル

  1. ドキュメントオブジェクト
  2. ドキュメントオブジェクトのプロパティ
  3. ドキュメントオブジェクトのメソッド
  4. ドキュメントオブジェクトの例

ドキュメントオブジェクト HTML ドキュメント全体を表します。

HTML ドキュメントがブラウザに読み込まれると、ドキュメント オブジェクトになります。それは ルート要素 HTMLドキュメントを表します。プロパティとメソッドがあります。ドキュメント オブジェクトを利用すると、Web ページに動的なコンテンツを追加できます。

前述したように、これはウィンドウのオブジェクトです。それで

グローバル変数js
 window.document 

と同じです

 document 

W3C によると - 「W3C Document Object Model (DOM) は、プログラムやスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにする、プラットフォームと言語に依存しないインターフェイスです。」


ドキュメントオブジェクトのプロパティ

ドキュメント オブジェクトによってアクセスおよび変更できるドキュメント オブジェクトのプロパティを見てみましょう。


ドキュメントオブジェクトのメソッド

メソッドを使用してドキュメントの内容にアクセスし、変更することができます。

document オブジェクトの重要なメソッドは次のとおりです。

方法説明
write('文字列')指定された文字列をドキュメントに書き込みます。
writeln('文字列')指定された文字列を末尾に改行文字を付けてドキュメントに書き込みます。
getElementById()指定された ID 値を持つ要素を返します。
getElementsByName()指定された名前の値を持つすべての要素を返します。
getElementsByTagName()指定されたタグ名を持つすべての要素を返します。
getElementsByClassName()指定されたクラス名を持つすべての要素を返します。

ドキュメントオブジェクトによるフィールド値へのアクセス

この例では、ユーザーごとに入力テキストの値を取得します。ここで使用しているのは、 document.form1.name.value name フィールドの値を取得します。

ここ、 書類 HTML ドキュメントを表すルート要素です。

フォーム1 フォームの名前です。

名前 入力テキストの属性名です。

価値 は入力テキストの値を返すプロパティです。

ウェルカム メッセージとともに名前を出力するドキュメント オブジェクトの簡単な例を見てみましょう。

 function printvalue(){ var name=document.form1.name.value; alert('Welcome: '+name); } Enter Name: 

上記の例の出力

名前を入力: