HTML DOMを使用すると、JavaScriptはHTMLドキュメントのすべての要素にアクセスして変更できます。

HTML DOM(ドキュメント オブジェクト モデル)

Webページが読み込まれると、ブラウザはページのDOMを作成します。

HTML DOMモデルは、オブジェクトのツリーとして構築されます。

オブジェクトのHTML DOMツリー

オブジェクトモデルにより、JavaScriptは動的なHTMLを作成するために必要なすべての機能を取得します。

• JavaScriptは、ページ内のすべてのHTML要素を変更できます
• JavaScriptは、ページ内のすべてのHTML属性を変更できます
• JavaScriptは、ページ内のすべてのCSSスタイルを変更できます
• JavaScriptは、既存のHTML要素と属性を削除できます
• JavaScriptは、新しいHTML要素と属性を追加できます
• JavaScriptは、ページ内の既存のすべてのHTMLイベントに反応できます
• JavaScriptは、ページに新しいHTMLイベントを作成できます

学習内容

このチュートリアルの次の章では、次のことを学びます。

• HTML要素の内容を変更する方法
• HTML要素のスタイル(CSS)を変更する方法
• HTML DOMイベントに反応する方法
• HTML要素を追加および削除する方法

DOMとは

DOMはW3C(World Wide Web Consortium)標準規格です。

DOMは、ドキュメントにアクセスするための標準を定義します。

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

W3C DOM標準規格は、次の3つの部分に分かれています。

• Core DOM - すべてのドキュメントタイプの標準モデル
• XML DOM - XMLドキュメントの標準モデル
• HTML DOM - HTMLドキュメントの標準モデル

HTML DOMとは何ですか?

HTML DOMは、HTMLの標準オブジェクトモデルおよびプログラミングインターフェイスです。以下を定義します。

• オブジェクトとしてのHTML要素
• すべてのHTML要素のプロパティ
• すべてのHTML要素にアクセスするメソッド
• すべてのHTML要素のイベント

つまり、HTML DOMは、HTML要素を取得、変更、追加、削除するための標準です。