HTML DOM API
============

**HTML DOM API** は、HTML の各要素の機能を定義するインターフェイスと、それらが依存する補助的な型やインターフェイスから構成されています。

HTML DOM API に含まれる機能領域には、以下のようなものがあります。

* DOM を介した HTML 要素へのアクセスと制御。
* フォームデータへのアクセスと操作。
* 二次元画像の内容と HTML の `<canvas>` のコンテキストとの相互作用、例えば、それらの上に描画すること。
* HTML のメディア要素 (`<audio>` と `<video>` に接続されたメディアの管理。
* ウェブページ上のコンテンツのドラッグ＆ドロップ。
* ブラウザーのナビゲーション履歴へのアクセス。
* ウェブコンポーネント、ウェブストレージ、ウェブワーカー、ウェブソケット、サーバー側イベント などの他の API のサポートおよび接続インターフェイス。
HTML DOM の概念と利用方法
-----------------

この記事では、HTML DOM の中で HTML 要素に関係する部分に焦点を当てます。ドラッグアンドドロップ、ウェブソケット、ウェブストレージなどの他の分野についての議論は、それらの API のドキュメントを参照してください。

### HTML 文書の構造

ドキュメントオブジェクトモデル (DOM) は、文書 (`document`) の構造を記述する構造で、それぞれの文書は `Document` インターフェイスのインスタンスで表現されます。文書は**ノード**の階層ツリーで構成され、ノードは文書内の単一のオブジェクト（要素やテキストノードなど）を表す基本的なレコードです。

ノードは厳密に組織化することができ、他のノードをグループ化する手段を提供したり、階層構造を構築するためのポイントを提供したりします。各ノードは、そのノードに関する情報を取得するためのプロパティと、DOM 内でノードを作成、削除、整理するためのメソッドを提供する `Node` インタフェースに基づいています。

ノードには、実際に文書に表示されるコンテンツを含むという概念はありません。これは空っぽの器です。視覚的な内容を表現できるノードの基本的な概念は `Element` インターフェイスで紹介されています。 `Element` オブジェクトのインスタンスは、 HTML または XML の語彙（SVG など）を用いて作成された文書内の 1 つの要素を表します。

例えば、 2 つの要素を持つ文書があり、そのうちの 1 つの要素の中にさらに 2 つの要素がネストされている場合を考えてみましょう。

![ウィンドウ内の文書に要素を持たせた構造](/ja/docs/Web/API/HTML_DOM_API/dom-structure.svg)

`Document` インターフェイスは DOM 仕様の一部として定義されていますが、 HTML 仕様ではこれを大幅に拡張して Web ブラウザのコンテキストで 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 の要素クラスの全体的な継承は次のようになります。

![HTML要素のインターフェイスの階層](/ja/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg)

このように、要素はそのすべての祖先のプロパティとメソッドを継承します。例えば、 `<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 要素（または、同じプロパティとメソッドを関連付けた関連要素のセット）を表します。

* `HTMLAnchorElement`
* `HTMLAreaElement`
* `HTMLAudioElement`
* `HTMLBaseElement`
* `HTMLBodyElement`
* `HTMLBRElement`
* `HTMLButtonElement`
* `HTMLCanvasElement`
* `HTMLDataElement`
* `HTMLDataListElement`
* `HTMLDetailsElement`
* `HTMLDialogElement`
* `HTMLDirectoryElement`
* `HTMLDivElement`
* `HTMLDListElement`
* `HTMLElement`
* `HTMLEmbedElement`
* `HTMLFieldSetElement`
* `HTMLFormElement`
* `HTMLHRElement`
* `HTMLHeadElement`
* `HTMLHeadingElement`
* `HTMLHtmlElement`
* `HTMLIFrameElement`
* `HTMLImageElement`
* `HTMLInputElement`
* `HTMLLabelElement`
* `HTMLLegendElement`
* `HTMLLIElement`
* `HTMLLinkElement`
* `HTMLMapElement`
* `HTMLMediaElement`
* `HTMLMenuElement`
* `HTMLMetaElement`
* `HTMLMeterElement`
* `HTMLModElement`
* `HTMLObjectElement`
* `HTMLOListElement`
* `HTMLOptGroupElement`
* `HTMLOptionElement`
* `HTMLOutputElement`
* `HTMLParagraphElement`
* `HTMLPictureElement`
* `HTMLPreElement`
* `HTMLProgressElement`
* `HTMLQuoteElement`
* `HTMLScriptElement`
* `HTMLSelectElement`
* `HTMLSlotElement`
* `HTMLSourceElement`
* `HTMLSpanElement`
* `HTMLStyleElement`
* `HTMLTableCaptionElement`
* `HTMLTableCellElement`
* `HTMLTableColElement`
* `HTMLTableElement`
* `HTMLTableRowElement`
* `HTMLTableSectionElement`
* `HTMLTemplateElement`
* `HTMLTextAreaElement`
* `HTMLTimeElement`
* `HTMLTitleElement`
* `HTMLTrackElement`
* `HTMLUListElement`
* `HTMLUnknownElement`
* `HTMLVideoElement`

#### 非推奨の HTML Element インターフェイス

* `HTMLMarqueeElement` (en-US) 
非推奨

#### 廃止された HTML Element インターフェイス

* `HTMLFontElement` (en-US) 
非推奨
* `HTMLFrameElement` 
非推奨
* `HTMLFrameSetElement` (en-US) 
非推奨
* `HTMLIsIndexElement` 
非推奨
* `HTMLMenuItemElement` (en-US) 
非推奨
### ウェブアプリやブラウザーとの連携インターフェイス

これらのインターフェイスは、 HTML を含むブラウザーウィンドウや文書へのアクセス、ブラウザーの状態、利用可能なプラグイン（ある場合）、さまざまな設定オプションへのアクセスを提供します。

* `BarProp`
* `Navigator`
* `Window`

#### 非推奨のウェブアプリやブラウザーとの連携インターフェイス

* `External` 
非推奨

#### 廃止されたウェブアプリやブラウザーとの連携インターフェイス

* `ApplicationCache` 
非推奨
* `Plugin` 
非推奨
* `PluginArray` 
非推奨
### フォームサポートインターフェイス

これらのインターフェイスは、 `<form>` や `<input>` 要素など、フォームを作成・管理するための要素に必要な構造と機能を提供するものです。

* `FormDataEvent`
* `HTMLFormControlsCollection`
* `HTMLOptionsCollection`
* `RadioNodeList`
* `ValidityState`
### キャンバスと画像インターフェイス

これらのインターフェイスは、キャンバス API で使用されるオブジェクトや、 `<img>` 要素、`<picture>` 要素を表します。

* `CanvasGradient`
* `CanvasPattern`
* `CanvasRenderingContext2D`
* `ImageBitmap`
* `ImageBitmapRenderingContext` (en-US)
* `ImageData`
* `OffscreenCanvas` (en-US)
* `OffscreenCanvasRenderingContext2D` (en-US)
* `Path2D` (en-US)
* `TextMetrics` (en-US)
### メディアインターフェイス

メディアインターフェイスは、メディア要素 `<audio>` および `<video>` のコンテンツに

* `AudioTrack`
* `AudioTrackList`
* `MediaError` (en-US)
* `TextTrack`
* `TextTrackCue`
* `TextTrackCueList`
* `TextTrackList` (en-US)
* `TimeRanges`
* `TrackEvent`
* `VideoTrack`
* `VideoTrackList`
### ドラッグ & ドロップインターフェイス

これらのインターフェイスは HTML ドラッグ & ドロップ API によって、ドラッグできる（またはドラッグした）個々のアイテム、ドラッグまたはドラッグできるアイテムのグループ、およびドラッグ＆ドロップ処理を表すために使用されています。

* `DataTransfer`
* `DataTransferItem`
* `DataTransferItemList`
* `DragEvent`
### ページ履歴インターフェイス

履歴 API では、ブラウザーの履歴に関する情報にアクセスしたり、現在のタブの履歴を前後に移動させたりすることができます。

* `BeforeUnloadEvent`
* `HashChangeEvent`
* `History`
* `Location`
* `PageTransitionEvent`
* `PopStateEvent`
### ウェブコンポーネントインターフェイス

これらのインターフェイスはウェブコンポーネント API で使用され、利用可能なカスタム要素を作成・管理します。

* `CustomElementRegistry`
### その他、および補助的インターフェイス

これらの補助的なオブジェクト型は、 HTML DOM API の中で様々な形で利用されています。また、`PromiseRejectionEvent` は JavaScript のプロミス (`Promise`) が拒否されたときに配信されるイベントを表します。

* `DOMStringList`
* `DOMStringMap`
* `ErrorEvent`
* `HTMLAllCollection` (en-US)
* `MimeType` (en-US)
* `MimeTypeArray` (en-US)
* `PromiseRejectionEvent`
### 他の API に所属するインターフェイス

一部のインターフェイスは、技術的には HTML 仕様書で定義されていますが、実際には他の API の一部となっています。

#### ウェブストレージインターフェイス

ウェブストレージ API は、ウェブサイトがユーザーの端末に一時的または恒久的にデータを保存し、後で再利用できるようにする機能を提供します。

* `Storage`
* `StorageEvent`

#### ウェブワーカーインターフェイス

これらのインターフェイスはウェブワーカー API によって、ワーカーがアプリやそのコンテンツと対話する機能を確立し、さらにウィンドウまたはアプリ間のメッセージングをサポートするためにも使用されます。

* `BroadcastChannel`
* `DedicatedWorkerGlobalScope`
* `MessageChannel`
* `MessageEvent`
* `MessagePort`
* `SharedWorker`
* `SharedWorkerGlobalScope`
* `Worker`
* `WorkerGlobalScope`
* `WorkerLocation`
* `WorkerNavigator`

#### ウェブソケットインターフェイス

これらのインターフェイスは、 HTML 仕様書で定義されており、ウェブソケット API で使用されます。

* `CloseEvent`
* `WebSocket`

#### サーバー送信イベントインターフェイス

`EventSource` インターフェイスは、サーバー送信イベントを送信した、または送信しようとしているソースを表します。

* `EventSource`
例
-

この例では、 `<input>` 要素の `input` イベントを監視し、与えられたフィールドに現在値があるかどうかによって、フォームの「送信」ボタンの状態を更新しています。

### JavaScript


```js
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");

sendButton.disabled = true;
// [注：このサンプルにフォーカスし、スクロールして表示した状態でこの記事を常に読み込むことになるため、無効にしています。]
//nameField.focus();

nameField.addEventListener("input", (event) => {
  const elem = event.target;
  const valid = elem.value.length !== 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});
```


このコードは `Document` インターフェイスの `getElementById()` メソッドを用いて、 ID が `userName` と `sendButton` である `<input>` 要素を表す DOM オブジェクトを取得するものです。これらを使用して、これらの要素に関する情報を提供したり、これらの要素に対する制御を許可するプロパティやメソッドにアクセスすることができます。

「送信」ボタンの `HTMLInputElement` オブジェクトの `disabled` 属性は `true` に設定されており、「送信」ボタンがクリックできないように無効化されています。さらに、 `focus()` から継承したメソッドを呼び出して、ユーザー名入力フィールドをアクティブフォーカスに設定しています。

次に `addEventListener()` が呼び出されて `input` イベント用のハンドラーがユーザー名の入力に追加されます。このコードでは、入力の現在値の長さを調べます。もしそれがゼロであれば、「送信」ボタンがまだ無効になっていない場合は、無効になります。それ以外の場合は、ボタンが有効であることを確認するコードです。

このコードにより、ユーザー名の入力フィールドに値があるときは常に「送信」ボタンが有効になり、空のときは無効になります。

### HTML

このフォームの HTML は次のようになります。


```html
<p>以下の情報を教えてください。 * の付いた項目は必須です。</p>
<form action="" method="get">
  <p>
    <label for="userName" required>あなたの名前:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="email">メールアドレス:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="送信" id="sendButton" />
</form>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlelement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

### リファレンス

* HTML 要素リファレンス
* HTML 属性リファレンス
* ドキュメントオブジェクトモデル (DOM) リファレンス
### ガイド

* 文書の操作: DOM を操作するための初心者向けガイド。