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

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

Web ページが読み込まれると、ブラウザはページのドキュメント オブジェクト モデル (Document OObject Model) を作成します。

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 つの部分に分かれています。

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

HTML DOM とは?

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

  • オブジェクトとしての HTML 要素
  • すべての HTML 要素の属性
  • すべての HTML 要素にアクセスするためのメソッド
  • すべての HTML 要素の イベント

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