HTML DOM API
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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 クラスはサブクラス化されて必要なプロパティやメソッドが追加されています。例えば、 <canvas> 要素は HTMLCanvasElement 型のオブジェクトで表現されます。 HTMLCanvasElement は HTMLElement 型に height などのプロパティと getContext() などのメソッドを追加して拡張し、キャンバス固有の機能を提供しています。
HTML の要素クラスの全体的な継承は次のようになります。
このように、要素はそのすべての祖先のプロパティとメソッドを継承します。例えば、 <a> 要素が DOM 内で HTMLAnchorElement という型のオブジェクトで表現されているとします。この要素は、そのクラスのドキュメントで説明されているアンカー固有のプロパティとメソッドを含んでいますが、 HTMLElement と Element で定義されているもの、さらに Node や、さらには EventTarget からのものも含まれています。
それぞれのレベルは、要素の実用性に関する重要な側面を定義します。 Node からは、その要素が他の要素に含まれたり、他の要素を含んだりすることができる機能に関する概念を継承しています。特に重要なのは、 EventTarget を継承することで得られるものであり、マウスのクリックや再生・一時停止イベントなどのイベントを受信して処理することができるようになります。
共通点を持つ要素があり、そのために追加の中間型を持つことがあります。例えば、 <audio> と <video> 要素は共にオーディオビジュアルメディアを提示します。対応する型である HTMLAudioElement と HTMLVideoElement は共に共通の型 HTMLMediaElement に基づいており、それが HTMLElement などに基づいています。 HTMLMediaElement は、 audio 要素と video 要素の間で共通に保持されるメソッドとプロパティを定義しています。
これらの要素固有のインターフェイスは HTML DOM API の大部分を構成しており、この記事の焦点となっています。 DOM の実際の構造については DOM の紹介を参照してください。
HTML DOM の対象読者
HTML DOM が公開する機能は、ウェブ開発者のツールキットの中で最もよく使われる API の一つです。最も単純なウェブアプリケーションを除いて、すべて HTML DOM のいくつかの機能を使用します。
HTML DOM API インターフェイス
HTML DOM API を構成するインターフェイスの大部分は、個々の HTML 要素、または類似の機能を持つ小さな要素群にほぼ一対一で対応します。さらに、 HTML DOM API には、 HTML 要素のインターフェイスを対応するためのいくつかのインターフェイスと型が含まれています。
HTML 要素インターフェイス
これらのインターフェイスは、特定の HTML 要素（または、同じプロパティとメソッドを関連付けた関連要素のセット）を表します。
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement