HTML DOM API
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
HTML DOM API は、HTML の各要素の機能を定義するインターフェイスと、それらが依存する補助的な型やインターフェイスから構成されています。
HTML DOM API に含まれる機能領域には、以下のようなものがあります。
HTML DOM の概念と利用方法
この記事では、HTML DOM の中で HTML 要素に関係する部分に焦点を当てます。ドラッグアンドドロップ、ウェブソケット、ウェブストレージなどの他の分野についての議論は、それらの API のドキュメントを参照してください。
HTML 文書の構造
ドキュメントオブジェクトモデル (DOM) は、文書 (document) の構造を記述する構造で、それぞれの文書は Document インターフェイスのインスタンスで表現されます。文書はノードの階層ツリーで構成され、ノードは文書内の単一のオブジェクト（要素やテキストノードなど）を表す基本的なレコードです。
ノードは厳密に組織化することができ、他のノードをグループ化する手段を提供したり、階層構造を構築するためのポイントを提供したりします。各ノードは、そのノードに関する情報を取得するためのプロパティと、DOM 内でノードを作成、削除、整理するためのメソッドを提供する Node インターフェイスに基づいています。
ノードには、実際に文書に表示されるコンテンツを含むという概念はありません。これは空っぽの器です。視覚的な内容を表現できるノードの基本的な概念は Element インターフェイスで紹介されています。 Element オブジェクトのインスタンスは、 HTML または XML の語彙（SVG など）を用いて作成された文書内の 1 つの要素を表します。
例えば、 2 つの要素を持つ文書があり、そのうちの 1 つの要素の中にさらに 2 つの要素がネストされている場合を考えてみましょう。
Document インターフェイスは DOM 仕様の一部として定義されていますが、 HTML 仕様ではこれを大幅に拡張してウェブブラウザーのコンテキストで DOM を使うための固有の情報と HTML 文書を表すための固有の情報が追加されています。
HTML 標準によって Document に追加されたものには、次のようなものがあります。
- ページを読み込む際に、 HTTP ヘッダーが提供する様々な情報へのアクセスに対応すること。例えば location から文書を読み込んだ場所、Cookie、最終更新日時、リファラーサイトなどです。
- 文書の
<head>ブロックや本文に含まれている要素リストへのアクセス、また文書に含まれている画像やリンクのリストへのアクセス。 - 編集可能なコンテンツの focus 検査やコマンドの実行によるユーザーとの対話への対応。
- HTML 標準で定義されている文書のイベントハンドラーで、マウスやキーボードイベント、ドラッグ＆ドロップやメディア制御などのイベントにアクセスできるようにすること。
- 要素と文書の両方に配信できるイベントのイベントハンドラー。現在のところ、コピー、切り取り、貼り付け操作のみが含まれています。
HTML 要素インターフェイス
Element インターフェイスは、さらに HTML 要素の具体的な表現に適応するため、さらに HTMLElement インターフェイスが導入されており、これがもっと具体的な HTML 要素のクラスすべてから継承されています。これにより Element クラスが拡張され、要素ノードに HTML 固有の全般的な機能が追加できるようになりました。 HTMLElement によって追加されているプロパティには、例えば hidden や innerText があります。
HTML 文書は DOM ツリーで、その中の各ノードは HTML 要素であり、 HTMLElement インターフェイスで表されています。 HTMLElement クラスは Node を実装しているので、すべての要素はノードでもあります（逆は成立しません）。すなわち、 Node インターフェイスが実装している構造的な機能は HTML 要素でも利用可能で、要素間を入れ子にしたり、生成と削除、移動などを行ったりすることができます。
しかし、 HTMLElement インターフェイスは汎用的であり、要素の ID、座標、要素を構成する HTML、スクロール位置に関する情報など、すべての HTML 要素に共通する機能のみを提供します。
コアの HTMLElement インターフェイスの機能を拡張して、具体的な要素に必要な機能を提供するよう拡張するために、 HTMLElement クラスはサブクラス化されて必要なプロパティやメソッドが追加されています。例えば、