HTML DOM API - Web API

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 を操作するための初心者向けガイド。


AudioWorkletProcessor - Web API

AudioWorkletProcessor
=====================

ウェブオーディオ API の **`AudioWorkletProcessor`** インターフェイスは、独自の `AudioWorkletNode` が用いる音声処理コードを表します。これは `AudioWorkletGlobalScope` に存在し、ウェブオーディオレンダリングスレッドで実行されます。一方、対応する `AudioWorkletNode` はメインスレッドで実行されます。

コンストラクター
--------

**メモ:** `AudioWorkletProcessor` とその派生クラスは、ユーザーのコードから直接生成することはできません。これらは対応する `AudioWorkletNode` の生成に伴って内部でのみ生成されます。派生クラスのコンストラクターはオプションオブジェクトとともに呼ばれるため、独自の初期化処理を行うことができます。詳しくはコンストラクターのページを参照してください。

`AudioWorkletProcessor()`

新しい `AudioWorkletProcessor` オブジェクトのインスタンスを生成します。

インスタンスプロパティ
-----------

`port` 読取専用

処理器と対応する `AudioWorkletNode` の間の双方向通信に用いる `MessagePort` を返します。もう一方の端は、ノードの `port` プロパティから参照できます。

インスタンスメソッド
----------

*`AudioWorkletProcessor` インターフェイスは自身のメソッドを定義していません。しかし、音声ストリームを処理するために呼ばれる `process()` メソッドを定義しなければなりません。*

イベント
----

*`AudioWorkletProcessor` インターフェイスはイベントに反応しません。*

使用上の注意点
-------

### 派生クラスの作成

独自の音声処理コードを定義するには、`AudioWorkletProcessor` インターフェイスの派生クラスを作る必要があります。このインターフェイスでは定義されていませんが、派生クラスには `process` メソッドが必要です。このメソッドは 128 サンプルフレームからなるブロックそれぞれについて呼ばれ、入力の配列、出力の配列、(定義されていれば) 独自の `AudioParam` の計算された値を引数として受け取ります。出力の配列の初期値は無音です。入力と音声パラメーターの値を出力の配列を埋めるのに使用できます。

オプションとして、ノードで独自の `AudioParam` を使いたい場合、処理器の *静的ゲッター* として `parameterDescriptors` プロパティを定義できます。返される `AudioParamDescriptor` (en-US) をベースとするオブジェクトの配列が、`AudioWorkletNode` の生成時に `AudioParam` を生成するため用いられます。

生成された `AudioParam` はノードの `parameters` プロパティに配置され、`linearRampToValueAtTime` などの標準メソッドを用いて自動化できます。これらで計算された値は処理器の `process()` メソッドに渡され、ノードの出力の形成に使用できます。

### 音声処理

以下に、独自の音声処理の仕組みを作るアルゴリズムの例を示します。

1. 別のファイルを作ります。
2. このファイルで以下を行います。
    1. `AudioWorkletProcessor` クラスを継承 (「派生クラスの作成」の節を参照) し、その中で自身の `process()` メソッドを定義します。
    2. 作成した処理器を `AudioWorkletGlobalScope.registerProcessor()` メソッドで登録します。
3. 音声コンテキストの `audioWorklet` プロパティの `addModule()` メソッドで、このファイルを読み込みます。
4. この処理器をベースとする `AudioWorkletNode` を生成します。処理器は `AudioWorkletNode` のコンストラクター内部で生成されます。
5. 生成したノードを他のノードに接続します。
例
-

以下の例では、ホワイトノイズを出力する独自の `AudioWorkletNode` を作成します。

まず、ホワイトノイズを出力する独自の `AudioWorkletProcessor` を定義し、登録する必要があります。これは別のファイルで行うことに注意してください。

```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```

次に、メインスクリプトで処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを作成し、そのノードを音声グラフに接続します。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioWorkletProcessor |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
* AudioWorklet の使用 (en-US)


ProcessingInstruction - Web API

ProcessingInstruction
=====================

**`ProcessingInstruction`** インターフェイスは処理命令を表します。すなわち、特定のアプリケーションを対象とした埋め込み `Node` を表します。しかし、その命令を理解できないほかのアプリケーションは無視することができます。

**警告:** `ProcessingInstruction` ノードは XML 文書のみが対応しており、 HTML 文書は対応していません。この中では、処理命令はコメントとみなされ、ツリーでは `Comment` オブジェクトとして表現されます。

処理命令は XML 宣言とは異なることがあります。

**メモ:** ユーザー定義の処理命令は "`xml`" で始めることはできません。 `xml` 接頭辞を持つ処理命令のターゲット名は、 XML 仕様書によって特定の標準的な用途のために予約されているからです（例えば、 `<?xml-stylesheet ?>` などを見てください）。

例えば、次のようなものです。

```html
<?xml version="1.0"?>
```

これは `target` が `xml` の処理命令です。

EventTarget

Node

CharacterData

ProcessingInstructionインスタンスプロパティ
-----------

*このインターフェイスは親インターフェイスである `CharacterData`, `Node`, `EventTarget` からプロパティを継承しています。*

`ProcessingInstruction.sheet` 読取専用

存在すれば、関連付けられた `StyleSheet` オブジェクトを返します。なければ `null` を返します。

`ProcessingInstruction.target` 読取専用

この命令が対象とするアプリケーションを識別する名前です。

インスタンスメソッド
----------

*このインターフェイスには固有のメソッドはありませんが、親インターフェイスである `CharacterData`, `Node`, `EventTarget` からメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-processinginstruction |

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

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

関連情報
----

* document.createProcessingInstruction()
* DOM API


ユーザーエージェントクライアントヒント API - Web API

ユーザーエージェントクライアントヒント API
=======================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ユーザーエージェントクライアントヒント API (User-Agent Client Hints API) は、クライアントヒントを拡張し、 User-Agent レスポンスおよびリクエストヘッダー、および JavaScript API によってブラウザーとプラットフォーム情報を公開する方法を提供します。

概念と使い方
------

ユーザーエージェント文字列を解釈することは、過去には、ユーザーのブラウザーまたは端末に関する情報を取得するための方法でした。典型的なユーザーエージェント文字列は次の例のようなもので、 Windows 上の Chrome 92 を識別します。
```

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
```

ユーザーエージェント クライアントヒントは、サーバーが情報の集合をリクエストされるモデルを強制することによって、よりプライバシーを保護した方法でこの情報を提供することを目的としています。何を返すかは、ブラウザーが決定します。この手法は、ユーザーエージェントが、そのようなリクエストからユーザーを特定できるような情報の一部を隠すための設定を提供することができるということです。

何を返すかを決定するために、この API を介してアクセスされる情報は、**低エントロピー**と**高エントロピー**の 2 つのグループに分かれます。低エントロピーヒントは、あまり多くの情報を与えないものであり、 API はリクエストされる度にこれらの情報に簡単にアクセスできるようにしています。高エントロピーヒントは、より多くの情報を提供する可能性があるため、ヒントを提供するかどうかをブラウザーが決定できるような方法で制限されます。この決定はユーザーの環境設定や許可リクエストに基づいて行われることがあります。

### ユーザーエージェントクライアントヒントの用途

想定される用途には、次のようなものがあります。

* ブラウザーにウェブプラットフォームの一部の機能が欠けていることを特定したユーザーに、カスタムメイドのポリフィルを提供する。
* ブラウザーのバグの回避。
* ブラウザー分析の記録。
* ユーザーエージェント情報に基づいてコンテンツを適応させる。
 これには、モバイル端末、特に低消費電力と認識された端末に異なる形でコンテンツを提供することが含まれます。
 また、ユーザーの OS に合わせてインターフェイスのデザインを変更したり、OS 固有のインターフェイスへのリンクを提供したりすることも記載することができます。
* セキュリティ機能として、ユーザーが異なるブラウザーや端末からログインした際に通知する。
* ダウンロードを提供しているサイトで、正しいバイナリー実行ファイルを提供する。
* アプリケーションのエラーを特定するために、ブラウザーや端末に関する情報を収集すること。
* スパマー、ボット、クローラーをブロックする。
インターフェイス
--------

`NavigatorUAData`

ユーザーのブラウザーとオペレーティングシステムに関するデータにアクセスするためのプロパティとメソッドを提供します。

例
-

### ブランドの取得

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.brands);
```

### 高いエントロピーの値の返却

以下の例では、 `NavigatorUAData.getHighEntropyValues()` メソッドを使用して多くのヒントがリクエストされます。プロミスが解決すると、この情報がコンソールに表示されます。

```js
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platform",
    "platformVersion",
    "fullVersionList",
  ])
  .then((ua) => {
    console.log(ua);
  });
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # navigatoruadata |

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

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

関連情報
----

* Improving user privacy and developer experience with User-Agent Client Hints
* Migrate to User-Agent Client Hints


MediaRecorder - Web API

MediaRecorder
=============

**`MediaRecorder`** は MediaStream 収録 API のインターフェイスで、メディアを簡単に収録するための機能を提供します。 これは、`MediaRecorder()` コンストラクターを使用して作成します。

EventTarget

MediaRecorderコンストラクター
--------

`MediaRecorder()`

収録する `MediaStream` を指定して、新しい `MediaRecorder` オブジェクトを作成します。 コンテナの MIME タイプ（`"video/webm"` や `"video/mp4"` など）、音声トラックと動画トラックのビットレート、または単一の全体的なビットレートの設定などを行うためのオプションがあります。

インスタンスプロパティ
-----------

`MediaRecorder.mimeType` 読取専用

`MediaRecorder` オブジェクトの作成時にその収録コンテナとして選択した MIME タイプを返します。

`MediaRecorder.state` 読取専用

`MediaRecorder` オブジェクトの現在の状態（非活動 (`inactive`)、収録中 (`recording`)、一時停止中 (`paused`)）を返します。

`MediaRecorder.stream` 読取専用

`MediaRecorder` を作成したときにコンストラクターに渡したストリームを返します。

`MediaRecorder.videoBitsPerSecond` 読取専用

使用中の動画エンコードビットレートを返します。 これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。

`MediaRecorder.audioBitsPerSecond` 読取専用

使用中の音声エンコードビットレートを返します。 これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。

静的メソッド
------

`MediaRecorder.isTypeSupported()`

静的メソッドで、指定された MIME メディア種別が現在のユーザーエージェントで対応しているかどうかを示す `true` または `false` 値を返します。

インスタンスメソッド
----------

`MediaRecorder.pause()`

メディアの収録を一時停止します。

`MediaRecorder.requestData()`

これまでに受信した保存データを含む `Blob` を要求します（または最後に `requestData()` が呼び出されてから受信した）。 このメソッドを呼び出した後、収録は続行されますが、新しい `Blob` に格納されます。

`MediaRecorder.resume()`

一時停止したメディアの収録を再開します。

`MediaRecorder.start()`

メディアの収録を開始します。 このメソッドには、オプションで、ミリ秒単位の値を指定して `timeslice` 引数を渡すことができます。 これが指定されている場合、メディアは単一の大きなチャンクにメディアを収録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。

`MediaRecorder.stop()`

収録を停止します。 この時点で、保存したデータの最後の `Blob` を含む `dataavailable` イベントが発生します。 これ以上収録は行われません。

イベント
----

これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかしてください。

`dataavailable`

`timeslice` のミリ秒単位のメディアが収録されるたびに（または `timeslice` が指定されていない場合はメディア全体が収録されると）定期的に起動されます。このイベントは `BlobEvent` 型であり、収録されたメディアを `data` プロパティに保持しています。

`error`

録画を停止させる致命的なエラーがあったときに発行されます。このイベントは `MediaRecorderErrorEvent` インターフェイスに基づいており、その `error` プロパティには、実際に発生したエラーを説明する `DOMException` が含まれています。

`pause`

メディアの収録が一時停止したときに発生します。

`resume`

メディアの収録が一時停止後に再開したときに発生します。

`start`

メディアの収録を開始したときに発生します。

`stop`

`MediaStream` が終了したか、または `MediaRecorder.stop()` メソッドが呼び出された場合のいずれかでメディアの収録が終了したときに発生します。

`warning`
非推奨

メディアの収録に致命的でないエラーが発生したとき、または `MediaRecorder.onwarning()` (en-US) メソッドが呼び出された後に発行されます。

例
-

```js
if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      visualize(stream);

      record.onclick = () => {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        console.log("recorder started");
        record.style.background = "red";
        record.style.color = "black";
      };

      stop.onclick = () => {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = (e) => {
        console.log("data available after MediaRecorder.stop() called.");

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        soundClips.appendChild(clipContainer);

        audio.controls = true;
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        const audioURL = URL.createObjectURL(blob);
        audio.src = audioURL;
        console.log("recorder stopped");

        deleteButton.onclick = (e) => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        };
      };

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}
```

**メモ:** このコードサンプルは、ウェブディクタフォン (Web Dictaphone) のデモから着想を得たものです。 簡潔にするために一部の行は省略されています。 完全なコードについてはソースを参照してください。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # mediarecorder-api |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + ウェブオーディオ API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* メディア要素の収録
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`
* OpenLang: MediaDevices と MediaStream 収録 API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（GitHub のソース）（英語）


Storage Access API - Web API

Storage Access API
==================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Storage Access API（ストレージアクセス API）は、埋め込まれたクロスオリジンのコンテンツが、通常はファーストパーティのコンテキストでのみアクセスできるストレージ（これをオリジンの*ファーストパーティ*ストレージと呼びます）に無制限にアクセスする方法を提供します。 API は、埋め込まれたリソースがファーストパーティストレージに現在アクセスできるかどうかを確認し、ユーザーエージェントからファーストパーティストレージへのアクセスを要求できるメソッドを提供します。

概念と使用方法
-------

ほとんどのブラウザーは、埋め込まれたクロスオリジンリソースのクッキーおよびサイトデータへのアクセスを制限する多くのストレージアクセスポリシーを実装しています。 これらの制限は、各最上位オリジンの下に埋め込まれたリソースに一意のストレージスペースを与えることから、サードパーティのコンテキストでリソースが読み込まれたときのストレージアクセスの完全なブロックにまで及びます。

特にサードパーティのクッキーブロックポリシーに関する意味論はブラウザーごとに異なりますが、コア機能は似ています: サードパーティのコンテキストに埋め込まれたクロスオリジンリソースには、ファーストパーティのコンテキストで読み込まれたときにアクセスできるのと同じクッキーとサイトストレージへのアクセスが与えられません。

これらのクッキーブロックポリシーは、ファーストパーティストレージへのアクセスを必要とする埋め込まれたクロスオリジンコンテンツを中断することが知られています。 例として、フェデレーションログイン（federated login、複数組織にまたがったログイン）では、ファーストパーティストレージに保存されている認証クッキーへのアクセスが必要になることが多く、これらのクッキーが利用できない場合、ユーザーは各サイトに個別にサインインする（または完全に中断する）必要があります。 中断した場合、サイト所有者は、ユーザーにサイトを例外として追加するか、ポリシーを完全に無効にすることを推奨することがよくあります。 結果として、埋め込まれたコンテンツとのやり取りを継続することを希望するユーザーは、すべての埋め込まれたオリジンおよびおそらくすべてのウェブサイトから読み込まれたリソースのブロックポリシーを大幅に緩和する必要があります。

Storage Access API は、この問題を解決することを目的としています。 埋め込まれたクロスオリジンのコンテンツは、`Document.requestStorageAccess()` メソッドを介してサイトごとにファーストパーティストレージへの無制限のアクセスを要求し、`Document.hasStorageAccess()` メソッドを介して既にアクセス権があるかどうかを確認できます。

さらに、セキュリティ上の理由から、サンドボックス化した `<iframe>` にはデフォルトでストレージアクセスを許可できません。 そのため、API は、`allow-storage-access-by-user-activation` sandbox トークンも追加します。 次のように、埋め込まれたウェブサイトは、これを追加してストレージアクセス要求が成功することを許可するとともに、`allow-scripts` と `allow-same-origin` を使用して API の呼び出しを許可し、クッキーを持つことができるオリジンで実行します。

```html
<iframe
 sandbox="allow-storage-access-by-user-activation
 allow-scripts
 allow-same-origin">
  ...
</iframe>
```

API は、潜在的なストレージの例外を、ユーザーがやり取りする意図を示したオリジンに制限するように設計されています。 これは、次の制約によって実施されます。

* 埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されます。 これにより、ページに埋め込まれたコンテンツが過剰なアクセス要求でブラウザーまたはユーザーにスパムすることも防止されます。
* ファーストパーティとしてやり取りしたことがないオリジンには、ファーストパーティストレージの概念がありません。 ユーザーの観点から見ると、そのオリジンとサードパーティの関係性しかありません。 ブラウザーが、ユーザーがファーストパーティのコンテキストで埋め込まれたコンテンツと最近やり取りしていないことをブラウザーが検出した場合、アクセス要求は自動的に拒否されます（Firefox では、「最近」は「30 日以内」です）。

ブラウザーは、到来するストレージアクセス要求を許可するかどうかの決定にユーザーを関与させることを決定する場合があります。 ストレージ許可の存続期間とブラウザーがユーザーに通知することを決定する状況に関する詳細は現在作業中であり、準備ができ次第発表されます。

ユーザープロンプト
---------

埋め込まれたクロスオリジンの文書によって `requestStorageAccess()` が呼び出されると、ユーザーエージェントは、要求オリジンにストレージアクセスを許可するかどうかの決定にユーザーを関与させることを選択できます。 現在、プロンプトヒューリスティック（Prompting heuristics、プロンプトするべきかを決める発見的方法）は Storage Access API の 2 つの実装者によって異なります。 Safari は、以前にストレージアクセスを受け取っていないすべての埋め込まれた追跡コンテンツにプロンプトを表示します。 Firefox は、追跡オリジンがサイトのしきい値数を超えてストレージアクセスを要求した後にのみユーザーにプロンプトします。 詳細については、`Document.requestStorageAccess()` を参照してください。

Safari の実装との違い
--------------

API の表面は同じですが、Storage Access API を使用するウェブサイトは、Firefox と Safari の間で受け取るストレージアクセスのレベルと範囲に違いがあることを予期する必要があります。 これは、2 つのブラウザーに実装されているストレージアクセスポリシーの違いが原因です。 Firefox に固有の設計プロパティを以下に要約します。

* 埋め込まれたオリジン `tracker.example` が最上位オリジン `foo.example` でファーストパーティストレージへのアクセスを既に取得しており、ユーザーが `foo.example` からのページに埋め込まれた `tracker.example` からのページに、30 日以内に再度訪問した場合、埋め込まれたオリジンは、読み込まれるとすぐにストレージにアクセスできます。
* 最上位オリジン `foo.example` のページに `tracker.example` の複数の `<iframe>` が埋め込まれ、それらの `<iframe>` の 1 つが Storage Access API を使用してストレージアクセスを正常に取得した場合、`foo.example` 最上位オリジン上の `tracker.example` からの他のすべての iframe は、requestStorageAccess() を個別に呼び出す必要なく、すぐにストレージアクセスを取得します。
* `tracker.example` から埋め込まれたページが以前に最上位オリジン `foo.example` でストレージアクセスを正常に取得していた場合、`foo.example` 上の `tracker.example` からのすべての埋め込まれたサブリソース（スクリプト、画像、スタイルシートなど）がファーストパーティストレージにアクセスして読み込まれます。 つまり、Cookie ヘッダーを送って、到来する `Set-Cookie` ヘッダーを尊重する可能性があります。
* Firefox では、`requestStorageAccess()` から返された Promise が解決されると、埋め込まれたページは、クッキーだけでなく、ファーストパーティストレージ全体にアクセスできます。 これには、Web Storage、IndexedDB、DOM Cache などの API へのアクセスが含まれます。
* Firefox では、ストレージアクセス許可は 30 暦日が経過すると段階的に廃止されますが、Safari では、ブラウザーの使用がユーザーの操作なしで 30 日が経過するとストレージアクセス許可が段階的に廃止されます。 これは現在、Firefox 実装の制限であり、将来のバージョンで対処する可能性があります。 Safari では、Storage Access API を正常に使用すると、このカウンターがリセットされます。

追跡クッキーをブロックするための Firefox の新しいストレージアクセスポリシーの文書には、ストレージアクセス許可の範囲の詳細な説明 (en-US)が含まれています。

Storage Access API のメソッド
------------------------

Storage Access API のメソッドは、`Document` インターフェイスに実装されます。

`Document.hasStorageAccess()`

文書がファーストパーティストレージにアクセスできるかどうかを示すブール値で解決される `Promise` を返します。

`Document.requestStorageAccess()`

ファーストパーティストレージへのアクセスが許可された場合に解決し、アクセスが拒否された場合に拒否する `Promise` を返します。

**メモ:** ユーザーとのやり取りは、これらの両方のメソッドによって返される Promise に伝播し、呼び出し元は、ユーザーからの 2 回目のクリックを必要とせずに、ユーザーとのやり取りを必要とするアクションを実行できます。 例えば、呼び出し元は、Firefox のポップアップブロッカーをトリガーせずに、解決した Promise からポップアップウィンドウを開くことができます。

<iframe> サンドボックスの拡張
-------------------

`<iframe>` 要素の `sandbox` 属性には新しいトークン `allow-storage-access-by-user-activation` があり、サンドボックス化した `<iframe>` は Storage Access API を使用してストレージアクセスを要求できます。

仕様
--

API は現在、提案段階にあり、標準化プロセスはまだ開始されていません。 現在、Apple の Introducing Storage Access API ブログ投稿、および WHATWG HTML issue 3338 — Proposal: Storage Access API で API の仕様の詳細を見つけることができます。

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

### api.Document.hasStorageAccess

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

### api.Document.requestStorageAccess

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

### api.Document.requestStorageAccessFor

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

### api.Permissions.permission\_storage-access

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

### api.Document.hasStorageAccess

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

### api.Document.requestStorageAccess

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

### api.Document.requestStorageAccessFor

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

### api.Permissions.permission\_storage-access

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

関連情報
----

Storage Access API の使用


MutationEvent - Web API

MutationEvent
=============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`MutationEvent`** インターフェイスは、 Document Object Model (DOM) の階層とノードの変更に特化したイベントプロパティを提供します。

**メモ:** mutation イベントを使用するのは問題があります。

* 設計上の欠陥があります。
* 文書に DOM の mutation リスナーを追加すると、その文書に対するその後の DOM 変更のパフォーマンスが著しく低下します（1.5 倍から 7 倍も遅くなります）。さらに、リスナーを削除してもダメージは元に戻りません。
* クロスブラウザー互換性が低いです。 Safari は `DOMAttrModified` に対応しておらず（WebKit のバグ 8191 を参照）、Firefox は mutation name イベント（`DOMElementNameChanged` や `DOMAttributeNameChanged` など）に対応していません。

これらは非推奨になり、変異オブザーバーに置き換えられました。**こちらの使用を検討してください。**

Event

MutationEventインスタンスプロパティ
-----------

*このインターフェイスには親である `UIEvent` と、間接的に `Event` から継承したプロパティがあります。*

`MutationEvent.attrChange` 読取専用
非推奨

どのような変更が `DOMAttrModified` イベントのトリガーとなったかを示します。これは `MODIFICATION` (`1`)、`ADDITION` (`2`)、`REMOVAL` (`3`)のいずれかです。他のイベントに対しては意味を持たず、 `0` に設定されます。

`MutationEvent.attrName` 読取専用
非推奨

`DOMAttrModified` イベントの影響を受けるノードの名前を示します。他のイベントでは意味を持たず、空文字列 (`""`) に設定されます。

`MutationEvent.newValue` 読取専用
非推奨

`DOMAttrModified` イベントでは、変更された `Attr` ノードの新しい値が格納されます。 `DOMCharacterDataModified` イベントでは、変更された `CharacterData` ノードの新しい値を返します。それ以外の場合は、空文字列 (`""`) を返します。

`MutationEvent.prevValue` 読取専用
非推奨

`DOMAttrModified` イベントでは、変更前の `Attr` ノードの値が格納されます。 `DOMCharacterDataModified` イベントでは、変更された `CharacterData` ノードの新しい値を返します。それ以外の場合は、空文字列 (`""`) を返します。

`MutationEvent.relatedNode` 読取専用
非推奨

`DOMSubtreeModified` のサブツリー内の変更されたノードのように、イベントに関連するノードを示します。

インスタンスメソッド
----------

`MutationEvent.initMutationEvent()`
非推奨

コンストラクターメソッドで、与えられた引数で構成された新しい `MutationEvent` を返します。

変異イベント一覧
--------

以下はすべての変異イベントの一覧です。

* `DOMAttrModified` （Safari では未対応）
* `DOMAttributeNameChanged` （Firefox では未対応）
* `DOMCharacterDataModified`
* `DOMElementNameChanged` （Firefox では未対応）
* `DOMNodeInserted`
* `DOMNodeInsertedIntoDocument`
* `DOMNodeRemoved`
* `DOMNodeRemovedFromDocument`
* `DOMSubtreeModified`
例
-

変異イベントのリスナーは、 `EventTarget.addEventListener()` を使って以下のように登録できます。

```js
element.addEventListener(
  "DOMNodeInserted",
  (event) => {
    // …
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # interface-mutationevent |

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

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

関連情報
----

* `MutationObserver`


TimeRanges - Web API

TimeRanges
==========

**`TimeRanges`** インターフェイスは、主に `<audio>` 要素と `<video>` 要素で使用するためにメディアをロードするときにメディアのどの部分がバッファリングされたかを追跡する目的で、一連の時間範囲を表すために使用します。

`TimeRanges` オブジェクトには、1 つ以上の時間範囲が含まれ、それぞれが開始時間と終了時間のオフセットで指定されます。 各時間範囲を参照するには、`start()` メソッドおよび `end()` メソッドを使用して、取得する時間範囲のインデックス番号を渡します。

「正規化された TimeRanges オブジェクト（英語）」という用語は、そのようなオブジェクトの範囲が順序付けられ、重なり合わず、空ではなく、触れていないことを示します（隣接する範囲は 1 つの大きな範囲に折り畳まれます）。

プロパティ
-----

`TimeRanges.length` 読取専用

時間範囲オブジェクトによって表される時間範囲の数を `unsigned long` 型で返します。

メソッド
----

`TimeRanges.start()`

指定されたインデックスを持つ範囲の開始時間を返します。

`TimeRanges.end()`

指定された範囲の終了時間を返します。

仕様
--

| Specification |
| --- |
| HTML Standard # time-ranges |

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

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


HTMLTableColElement - Web API

HTMLTableColElement
===================

**`HTMLTableColElement`** インターフェイスは、表の単一またはグループの列要素を操作するプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLTableColElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティもあります。*

`HTMLTableColElement.align`
非推奨

文字列で、列内のセルデータの水平方向の配置を示します。

`HTMLTableColElement.ch`
非推奨

文字列で、セルデータの整列文字を表します。

`HTMLTableColElement.chOff`
非推奨

文字列で、整列文字のオフセットを表します。

`HTMLTableColElement.span`

`unsigned long` で、 HTML の `span` 属性を反映し、このオブジェクトの属性を適用する列の数を示します。正の整数でなければなりません。

`HTMLTableColElement.vAlign`
非推奨

文字列で、列内のセルデータの垂直方向の配置を示します。

`HTMLTableColElement.width`
非推奨

文字列で、既定の列の幅を表します。

インスタンスメソッド
----------

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablecolelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<col>` および `<colgroup>`


CSSFontFaceRule - Web API

CSSFontFaceRule
===============

**`CSSFontFaceRule`** インターフェイスは `@font-face` アットルールを表します。

CSSRule

CSSFontFaceRuleインスタンスプロパティ
-----------

*祖先である `CSSRule` からプロパティを継承しています。*

`CSSFontFaceRule.style` 読取専用

`CSSStyleDeclaration` を返します。

インスタンスメソッド
----------

*祖先である `CSSRule` からメソッドを継承しています。*

例
-

この例では、 `@font-face` ページに例として挙げられている CSS を使用しています。最初に返される `CSSRule` は `CSSFontFaceRule` になります。

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); //a CSSFontFaceRule
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # om-fontface |

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

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


HTMLFieldSetElement - Web API

HTMLFieldSetElement
===================

**`HTMLFieldSetElement`** インターフェイスは、（継承により利用できる通常の `HTMLElement` インターフェイスのものに加えて）`<fieldset>` 要素のレイアウトと表示を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLFieldSetElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLFieldSetElement.disabled`

論理値で、 HTML の `disabled` 属性を反映し、ユーザーがこのコントロールを操作できるかどうかを示します。

`HTMLFieldSetElement.elements` 読取専用

このフィールドセットに所属する要素です。このプロパティの型は、ブラウザーが実装している仕様書のバージョンによって異なります。

`HTMLFieldSetElement.form` 読取専用

`HTMLFormControlsCollection` または `HTMLCollection` で、この要素がフォーム内にあった場合、含んでいるフォーム要素を参照します。
 このフィールドセットがフォーム要素の子孫でなかった場合は、この属性は関連付けられた同じ文書内の何れかのフォームになるか、一致するものがなければ `null` になります。

`HTMLFieldSetElement.name`

文字列で、 HTML の `name` 属性を反映し、フォームを送信するときに使われるフィールドセットの名前が入ります。

`HTMLFieldSetElement.type` 読取専用

文字列 "`fieldset`" です。

`HTMLFieldSetElement.validationMessage`

文字列で、（もしあれば）制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の候補にならない場合（`willValidate` が `false` の場合）や、制約を満たしている場合は空文字列になります。

`HTMLFieldSetElement.validity`

`ValidityState` で、この要素がある妥当性の状態を表します。

`HTMLFieldSetElement.willValidate`

論理値 `false` です。`<fieldset>` オブジェクトは制約検証の対象になることがないからです。

インスタンスメソッド
----------

*親である `HTMLElement` から継承したメソッドがあります。*

`HTMLFieldSetElement.checkValidity()`

常に `true` を返します。 `<fieldset>` オブジェクトは制約検証の対象になることがないためです。

`HTMLFieldSetElement.reportValidity()`

常に `true` を返します。 `<fieldset>` オブジェクトは制約検証の対象になることがないためです。

`HTMLFieldSetElement.setCustomValidity()`

独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlfieldsetelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<fieldset>`


Media Source Extensions API - Web API

Media Source Extensions API
===========================

**Media Source Extensions API**（MSE、メディアソース拡張機能 API）は、プラグイン不要で Web ベースのストリーミングメディアを可能にする機能を提供します。 MSE を使用すると、メディアストリームを JavaScript で作成し、`<audio>` 要素 や `<video>` 要素で再生できます。

Media Source Extensions の概念と使用方法
--------------------------------

動画と音声の再生は、Web アプリにおいて、ここ数年間でプラグイン不要で利用可能になりましたが、提供される基本的な機能は、単一トラック全体を再生する場合にのみ有効でした。 例えば、配列バッファを結合/分割することはできません。 RTMP プロトコルを使用して動画ストリームを提供する Flash Media Server などの技術により、ストリーミングメディアは最近まで Flash の領分でした。

### MSE 標準

Media Source Extensions（MSE）により、これは変化しています。 MSE を使用すると、メディア要素に渡す通常の単一トラックの `src` 値を `MediaSource` オブジェクトへの参照で置き換えることができます。 `MediaSource` オブジェクトは、再生するメディアの準備状態などの情報のコンテナであり、ストリーム全体を構成するメディアの異なるチャンク（大きな塊）を表す複数の `SourceBuffer` オブジェクトへの参照です。 MSE を使用すると、コンテンツを取得する量と頻度をよりきめ細かく制御でき、バッファを削除するタイミングなど、メモリ使用量の詳細をある程度制御できます。 拡張可能な API 上に構築される適応的ビットレートストリーミングクライアント（DASH や HLS を使用するクライアントなど）の基礎を築きます。

最新のブラウザーで MSE で動作するアセット（asset、静的コンテンツ）を作成するのは面倒なプロセスであり、かなりの時間、計算能力、エネルギーのすべてを必要とします。 コンテンツを適切な形式にもみほぐす外部ユーティリティの使用が必要です。 MSE を使用したさまざまなメディアコンテナのブラウザーサポートは不完全ですが、H.264 動画コーデック、AAC 音声コーデック、および MP4 コンテナ形式の使用が一般的なベースラインです。 MSE は、コンテナおよびコーデックのサポートの実行時検出用の API も提供します。

時間経過に伴う動画品質、コンテンツの取得速度、またはメモリの削除速度を明示的に制御する必要がない場合は、`<video>` タグと `<source>` タグが簡単で適切な解決策になる可能性があります。

### DASH

**Dynamic Adaptive Streaming over HTTP**（DASH、HTTP を介した動的適応的ストリーミング）は、適応的コンテンツの取得方法を指定するためのプロトコルです。 これは、効率的に適応的ビットレートストリーミングクライアントを構築するために MSE の上に構築されたレイヤーです。 HTTP Live Streaming（HLS、HTTP ライブストリーミング）といった他のプロトコルを使用できますが、DASH はほとんどのプラットフォームをサポートしています。

DASH は、多くのロジックをネットワークプロトコルからクライアント側アプリのロジックに移動し、より単純な HTTP プロトコルを使用してファイルを取得します。 実際、単純な静的ファイルサーバーで DASH をサポートでき、CDN にも最適です。 これは、独自で非標準のクライアント/サーバープロトコルの実装に高価なライセンスを必要とした従来のストリーミングの解決策とは正反対です。

DASH の 2 つの最も一般的な使用例では、コンテンツを「オンデマンド」または「ライブ」で視聴します。 オンデマンドでは、開発者が時間をかけてアセットをさまざまな品質の複数の解像度にトランスコード（transcoding）できます。

ライブプロファイルのコンテンツは、トランスコードとブロードキャストのために遅延を引き起こす可能性があるため、DASH は WebRTC のようなリアルタイム通信には適していません。 ただし、WebRTC よりもかなり多くのクライアント接続をサポートできます。

コンテンツをトランスコードし、DASH、DASH ファイルサーバー、および JavaScript で記述された DASH クライアントライブラリで使用する準備を行うための、無料でオープンソースのツールが多数あります。

インターフェイス
--------

`MediaSource`

`HTMLMediaElement` オブジェクトを介して再生されるメディアソースを表します。

`SourceBuffer`

`MediaSource` オブジェクトを介して `HTMLMediaElement` に渡されるメディアのチャンクを表します。

`SourceBufferList`

複数の `SourceBuffer` オブジェクトの単純なコンテナリスト。

`VideoPlaybackQuality` (en-US)

欠落や破損したフレーム数など、`<video>` 要素で再生される動画の品質に関する情報が含まれます。 `HTMLVideoElement.getVideoPlaybackQuality()` メソッドによって返されます。

`TrackDefault`

メディアチャンクの初期化セグメント（initialization segments）に含まれていないトラックの種類、ラベル、および言語情報の情報を `SourceBuffer` に提供します。

`TrackDefaultList`

複数の `TrackDefault` オブジェクトの単純なコンテナリスト。

他のインターフェイスの拡張
-------------

`URL.createObjectURL()`

`MediaSource` オブジェクトを指すオブジェクト URL を作成します。 このオブジェクトは、メディアストリームを再生する HTML メディア要素の `src` 値として指定できます。

`HTMLMediaElement.seekable`

`MediaSource` オブジェクトが HTML メディア要素によって再生されると、このプロパティは、ユーザーがシークできる時間範囲を含む `TimeRanges` オブジェクトを返します。

`HTMLVideoElement.getVideoPlaybackQuality()`

現在再生されている動画の `VideoPlaybackQuality` (en-US) オブジェクトを返します。

`AudioTrack.sourceBuffer`、`VideoTrack.sourceBuffer`、`TextTrack.sourceBuffer`

問題のトラックを作成した `SourceBuffer` を返します。

仕様
--

| Specification |
| --- |
| Media Source Extensions™  |

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

### MediaSource インターフェイス

{{Compat}}関連情報
----

* Media Source Extensions のためのアセットのトランスコード
* MSE を使用した基本的なストリーミングサービスの作成（未定）
* MPEG DASH を使用したストリーミングアプリの作成（未定）
* `<audio>` 要素と `<video>` 要素
* `HTMLMediaElement`、`HTMLVideoElement`,、`HTMLAudioElement`


Vibration API - Web API

Vibration API
=============

現代のモバイル端末は、たいていバイブレーションハードウェアを内蔵しており、ソフトウェアのコードが端末を振動させることによりユーザーに物理的なフィードバックを与えることができます。 **Vibration API** はウェブアプリに、このハードウェアが存在すればアクセスすることができるようにし、端末が対応していない場合は何もしません。

バイブレーションの表現
-----------

バイブレーションはオン・オフのパルスのパターンで表され、様々な長さになることがあります。パターンは振動するミリ秒数を示す整数 1 つ、あるいはバイブレーションと休止時間のパターンを示す整数の配列で構成します。バイブレーションは `Navigator.vibrate()` という単一のメソッドで制御します。

### 1 回のバイブレーション

1 個の値、または 1 個だけの値で構成される配列を指定することにより、バイブレーションハードウェアを 1 回振動させることができます:

```js
window.navigator.vibrate(200);
window.navigator.vibrate([200]);
```

どちらの例も、デバイスを 200 ミリ秒間振動させます。

### バイブレーションパターン

値の配列は、デバイスが振動する時間と振動しない時間を交互に示します。配列内の各値は整数値に変換されて、デバイスを振動させるミリ秒数および振動させないミリ秒数として交互に解釈されます。例えば以下のようにします。

```js
window.navigator.vibrate([200, 100, 200]);
```

これはデバイスを 200 ミリ秒間振動させて、その後再び 200 ミリ秒間振動させる前に 100 ミリ秒間振動を止めます。

バイブレーション/休止のペアは好きなだけ多く指定でき、またエントリ数は偶数・奇数のどちらでも可能です。各バイブレーション時間の終端で自動的にバイブレーションを止めますので、休止時間を最後のエントリとして与えなくてもよいことは注目に値します。

### 実行中のバイブレーションを取り消す

値 `0`、空の配列、あるいはすべての値が `0` の配列 を指定して `Navigator.vibrate()` を呼び出すと、現在進行中のバイブレーションパターンを取り消します。

### 継続的なバイブレーション

基本的な `setInterval` および `clearInterval` のアクションにより、継続的なバイブレーションを生成できます:

```js
var vibrateInterval;

// 渡されたレベルでバイブレーションを開始
function startVibrate(duration) {
  navigator.vibrate(duration);
}

// バイブレーションを停止
function stopVibrate() {
  // インターバルをクリアして継続的なバイブレーションを停止
  if (vibrateInterval) clearInterval(vibrateInterval);
  navigator.vibrate(0);
}

// 与えられた時間とインターバルによる継続的なバイブレーションを開始
// 数値が与えられるものとする
function startPersistentVibrate(duration, interval) {
  vibrateInterval = setInterval(function () {
    startVibrate(duration);
  }, interval);
}
```

当然ながら、上記のコードスニペットは配列によるバイブレーションを考慮していません。配列に基づく継続的なバイブレーションでは、配列のアイテムの総数を計算して、その値を基にしてインターバル (おそらく、遅延時間を付加して) を作成することが必要でしょう。

仕様書
---

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

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

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

関連情報
----

* `Navigator.vibrate()`


HTMLUListElement - Web API

HTMLUListElement
================

**`HTMLUListElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスから継承されるもの以外に）順序なしリスト (`<ul>`) 要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLUListElementインスタンスプロパティ
-----------

*親である `HTMLElement` からプロパティを継承しています。*

`HTMLUListElement.type`
非推奨

文字列値で、`type`を反映し、使用するマーカーの種類を定義します。値はブラウザーに依存し、標準化されたことはありません。

`HTMLUListElement.compact`
非推奨

論理値で、リスト項目間の空間を縮小することを示します。このプロパティは `compact` 属性のみを反映し、現代のページでその動作に使用されている CSS の `line-height` プロパティは考慮しません。

インスタンスメソッド
----------

*固有のメソッドはありません。親である `HTMLElement` からメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlulistelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<ul>`


MediaStreamAudioSourceNode - Web API

MediaStreamAudioSourceNode
==========================

**`MediaStreamAudioSourceNode`** インターフェイスは `AudioNode` の一種で、WebRTC またはメディアキャプチャとストリーム API で取得した `MediaStream` から音声を取得する音源として働きます。

音声は、(`getUserMedia()` 経由の) マイクから得られたものも使用できますし、(`RTCPeerConnection` の音声トラックを用いた) WebRTC による通話相手から受信したものも使用できます。

`MediaStreamAudioSourceNode` は入力を持たず、出力をちょうど 1 個持ちます。また、`AudioContext.createMediaStreamSource()` メソッドにより作成されます。

`MediaStreamAudioSourceNode` は `kind` 属性の値が `audio` である *最初の* `MediaStreamTrack` から音声を取得します。トラックの順番について詳しくはトラックの順序付けを参照してください。

このノードの出力のチャンネル数は、選択された音声トラックで見つかったトラックの数と一致します。

EventTarget

AudioNode

MediaStreamAudioSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネル数 | 2 (ただし、`AudioNode.channelCount` は `AudioNode` の入力のアップミキシングおよびダウンミキシングにのみ用いられ、`MediaStreamAudioSourceNode` は入力を持ちません) |

コンストラクター
--------

`new MediaStreamAudioSourceNode()`

指定したオプションを用いて新しい `MediaStreamAudioSourceNode` オブジェクトを作成します。

インスタンスプロパティ
-----------

*以下のプロパティに加え、`MediaStreamAudioSourceNode` は親の `AudioNode` からプロパティを継承します。*

`mediaStream` 読取専用

この `MediaStreamAudioSourceNode` の生成時に用いられた `MediaStream` です。

インスタンスメソッド
----------

*親の `AudioNode` からメソッドを継承します。*

例外
--

`InvalidStateError` `DOMException`

引数 `mediaStream` により指定されたストリームに音声トラックが無いとき投げられます。

使用時の注意
------

### トラックの順序付け

`MediaStreamTrackAudioSourceNode` インターフェイスでは、ストリーム内の音声トラックの順番は、`kind` が `audio` であるトラックを抽出し、抽出したトラックを `id` プロパティの値のユニコードのコードポイント順 (本質的には、ID が単純なアルファベットからなる文字列のときはアルファベット順 (辞書順)) でソートすることで決定されます。

そして、**最初の** トラックとは、トラックの ID がユニコードのコードポイント順でソートされたとき `id` が最初に来るトラックのことです。

しかし、重要な点として、この順序付けを確立するルールは、このインターフェイスが最初に Web Audio API に追加されてからだいぶ後に追加されました。そのため、この順序付けがどの 2 種類のブラウザーやブラウザーのバージョンでも同じになるとして簡単に依存することはできません。

`MediaStreamTrackAudioSourceNode` インターフェイスは `MediaStreamAudioSourceNode` に似ていますが、使用するトラックを指定できるようにすることでこの問題を回避しています。

例
-

このオブジェクトを使用するコードの例は、`AudioContext.createMediaStreamSource()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaStreamAudioSourceNode |

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

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

関連情報
----

* Web Audio API の使用
* WebRTC API
* メディアキャプチャとストリーム API (メディアストリーム)
* `MediaStreamTrackAudioSourceNode`


BluetoothRemoteGATTServer - Web API

BluetoothRemoteGATTServer
=========================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Web Bluetooth API の **`BluetoothRemoteGATTServer`** インターフェイスは、リモートデバイス上の GATT サーバーを表します。

インスタンスプロパティ
-----------

`BluetoothRemoteGATTServer.connected` 読取専用
Experimental

このスクリプト実行環境が `this.device` に接続されている間 `true` を返す論理値です。ユーザーエージェントが物理的に接続されていても `false` になる可能性があります。

`BluetoothRemoteGATTServer.device` 読取専用
Experimental

このサーバーを動かしている `BluetoothDevice` への参照です。

インスタンスメソッド
----------

`BluetoothRemoteGATTServer.connect()`
Experimental

このスクリプト実行環境を `this.device` に接続させます。

`BluetoothRemoteGATTServer.disconnect()`
Experimental

このスクリプト実行環境を `this.device` から切断させます。

`BluetoothRemoteGATTServer.getPrimaryService()`
Experimental

Bluetooth デバイスが提供している指定の `BluetoothServiceUUID` に対応するプライマリー `BluetoothRemoteGATTService` で解決するプロミスを返します。

`BluetoothRemoteGATTServer.getPrimaryServices()`
Experimental

Bluetooth デバイスが提供している指定の `BluetoothServiceUUID` に対応するプライマリー `BluetoothRemoteGATTService` オブジェクトのリストで解決するプロミスを返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattremoteserver-interface |

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

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


HTMLIFrameElement - Web API

HTMLIFrameElement
=================

**`HTMLIFrameElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて）インラインフレーム要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLIFrameElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLIFrameElement.align`
非推奨

文字列で、周囲のコンテキストに対するフレームの配置を指定します。

`HTMLIFrameElement.allow`

フレームがコンテンツを表示することを許可されているオリジンのリストです。この属性には `self` と `src` という値も指定でき、これらは iframe の src 属性で指定されたオリジンを表します。既定値は `src` です。

`HTMLIFrameElement.allowfullscreen`
Experimental

論理値で、インラインフレームを全画面モードにすることが期待されているかを示します。詳細は、全画面モードの使用を参照してください。

`HTMLIFrameElement.allowPaymentRequest`
非推奨

Non-standard

論理値で、決済リクエスト API をクロスオリジンの iframe 内で起動できるかどうかを示します。

`HTMLIFrameElement.contentDocument` 読取専用

インラインフレームの中にある閲覧コンテキストのアクティブな文書を `Document` で返します。

`HTMLIFrameElement.contentWindow` 読取専用

`WindowProxy` で、中にある閲覧コンテキストのウィンドウプロキシーを返します。

`HTMLIFrameElement.credentialless`
Experimental

論理値で `<iframe>` が無信頼であることを示し、そのコンテンツは新しい、一時的なコンテキストで読み込まれることを意味します。このコンテキストは、親コンテキストの共有ストレージと資格情報にアクセスすることはできません。その代わり `Cross-Origin-Embedder-Policy` (COEP) 埋め込みルールが解除されるいため、COEP を設定した文書でもそうでないサードパーティ文書を埋め込むことができます。より詳しい説明は、無信頼の iframe を参照してください。

`HTMLIFrameElement.csp`

埋め込み文書が自分自身に適用することに同意しなければならないコンテンツセキュリティポリシーを指定します。

`HTMLIFrameElement.frameBorder`
非推奨

文字列で、フレーム間に境界線を生成するかどうかを示します。

`HTMLIFrameElement.height` (en-US)

文字列で HTML 属性の `height` を反映し、フレームの高さを表します。

`HTMLIFrameElement.longDesc`
非推奨

フレームの長い説明文の URI をが入った文字列です。

`HTMLIFrameElement.marginHeight`
非推奨

フレームのマージンの高さである文字列です。

`HTMLIFrameElement.marginWidth`
非推奨

フレームのマージンの幅である文字列です。

`HTMLIFrameElement.name` (en-US)

文字列で HTML 属性の `name` を反映し、フレームを参照するための名前を表します。

`HTMLIFrameElement.featurePolicy` 読取専用
Experimental

`FeaturePolicy` (en-US) インターフェイスを返します。これは、特定の文書に適用される権限ポリシーを簡単にイントロスペクトするための API を提供します。

`HTMLIFrameElement.referrerPolicy`

文字列で、 HTML の `referrerPolicy` 属性を反映し、リンク先のリソースを取得する際にどのリファラーを使用するかを示します。

`HTMLIFrameElement.sandbox`

`DOMTokenList` で HTML の `sandbox` 属性を反映し、ネストされたコンテンツの動作に特別な制限を加えることを示します。

`HTMLIFrameElement.scrolling`
非推奨

文字列で、ブラウザーがフレームにスクロールバーを提供すべきかどうかを示します。

`HTMLIFrameElement.src`

文字列で HTML の `src` 属性を反映し、埋め込むコンテンツのアドレスが入ります。プログラムから `<iframe>` の src 属性を削除すると（例えば `Element.removeAttribute()` によって）、 Firefox （バージョン65以降）、 Chromium ベースのブラウザー、および Safari/iOS ではフレーム内に `about:blank` が読み込まれることに注意してください。

`HTMLIFrameElement.srcdoc`

文字列で、フレームに表示する内容を表します。

`HTMLIFrameElement.width` (en-US)

文字列で、 HTML の `width` 属性を反映し、フレームの幅を表します。

インスタンスメソッド
----------

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmliframeelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<iframe>`


入力機器能力 API - Web API

入力機器能力 API
==========

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

入力機器能力 API は、入力イベントの基盤となるソースに関する詳細を提供します。この API は、機器が何かというよりも、機器がどのように動作するかを記述しようとするものです。例えば、この API の最初のバージョンは、機器がタッチ画面であるかどうかではなく、タッチイベントが発生するかどうかを示します。

入力機器の能力の概念と用途
-------------

DOM イベントは機器の入力を抽象化するため、どの機器や機器の種類がイベントを発生させたのかを知る手段を提供しません。そのため、同じアクションが複数のイベントハンドラーを発生させてしまうことがあります。これに対処するため、ウェブ開発者はウェブページの動作を正規化するために、仮定を立てたり、ヒューリスティックを使用したりしています。

入力機器能力 API は、入力機器の機能を抽象化することでこの問題に対処します。例えば、 `touchstart` イベントと `mousedown` イベントの両方を実装したウェブページがあるとします。 touchstart イベントが発生した場合、ユーザーの機器はタッチインターフェイスを持っているとみなされます。 mousedown イベントが発生した場合はどうでしょうか。同じアクションを 2 度発生させないように、 `touchstart` イベントも発生したかどうかを知ることは有益なことです。これは `UIEvent` の sourceCapabilities プロパティを調べることで可能です。

```js
myButton.addEventListener("mousedown", (e) => {
  // 上記で処理したタッチイベントの場合、タップ時に再度スタイル設定を変更しない
  if (!e.sourceCapabilities.firesTouchEvents) myButton.classList.add("pressed");
});
```

インターフェイス
--------

`InputDeviceCapabilities`
Experimental

入力機器に関する論理情報を提供します。

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities |

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

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


SensorErrorEvent - Web API

SensorErrorEvent
================

Sensor APIs の **`SensorErrorEvent`** インターフェイスは、`Sensor` および派生インターフェイスから投げられたエラーに関する情報を提供します。

Event

SensorErrorEventコンストラクター
--------

`SensorErrorEvent()`

新しい `SensorErrorEvent` オブジェクトを生成します。

インスタンスプロパティ
-----------

`SensorErrorEvent.error` 読取専用

イベントのコンストラクターに渡された `DOMException` オブジェクトを返します。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # the-sensor-error-event-interface |

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

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


ウェブコンポーネント - Web API

ウェブコンポーネント
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
ウェブコンポーネントは、一連のさまざまな技術です。これにより、再利用可能なカスタム要素を作成し、その機能を他のコードから分離してウェブアプリケーションで利用できるようにします。

概念と使用法
------

開発者ならご存知でしょうが、可能な限りコードを再利用することは良い考えです。しかしこれは、以前から、カスタムのマークアップ構造にとって、それほど簡単なことではありませんでした。複雑な HTML （と一連のスタイルやスクリプト）を考えてみて下さい。ときに、カスタム UI の制御をレンダリングするために、コードを書かなければなりません。それに、注意していないと、それらの制御をどう使い回すかで、ページが複雑なものになってしまいます。

ウェブコンポーネントは、上記の問題の解決を目指しています。 ウェブコンポーネントは、3 つの主要な技術からなり、それらを組み合わせて、多目的なカスタム要素を作成します。カプセル化された機能を使うことで、コードの重複を恐れることなく、どこでも再利用することができます。

**カスタム要素**

カスタム要素とその動作を定義するための、一連の JavaScript API です。以降、ユーザーインターフェイスの中で好きなだけ使用することができます。

**シャドウ DOM**

カプセル化された「シャドウ」 DOM ツリーを要素に紐付け、関連する機能を制御するための、一連の JavaScript API です。シャドウ DOM ツリーは、メイン文書の DOM とは別にレンダリングされます。こうして、要素の機能を公開せずに済み、文書の他の部分との重複を恐れることなく、スクリプト化やスタイル化できます。

**HTML テンプレート**

`<template>` と `<slot>` 要素によって、レンダリングされたページ内に表示されないマークアップのテンプレートを書くことができます。カスタム要素の構造体の基礎として、それらを何度も再利用できます。

ウェブコンポーネントを実装する基本的な流れは、以下に挙げてある通りです。

1. ウェブコンポーネントの機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラス構文に従ってください。 (詳細はクラスを参照してください。)
2. 新しく作成したカスタム要素を登録します。`CustomElementRegistry.define()` メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡して下さい。
3. 必要なら `Element.attachShadow()` メソッドを使って、シャドウ DOM をカスタム要素に紐付けます。通常の DOM メソッドを使って、子要素やイベントリスナーなどをシャドウ DOM に追加して下さい。
4. 必要なら `<template>` と `<slot>` を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、シャドウ DOM に紐付けてください。
5. ページ内のお好きな場所で、通常の HTML 要素のように、カスタム要素を使って下さい。
チュートリアル
-------

カスタム要素の使用

簡単なウェブコンポーネントを作成するために、カスタム要素の機能の使い方を紹介したガイドです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。

シャドウ DOM の使用

シャドウ DOM の基礎を眺めるガイドです。シャドウ DOM を要素にどう紐付けるか、シャドウ DOM ツリーにどう追加するか、どうスタイル付けするかなどを紹介しています。

テンプレートとスロットの使用

`<template>` と `<slot>` 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドです。

リファレンス
------

### カスタム要素

`CustomElementRegistry`

カスタム要素に関わる機能が含まれています。中でも注目すべきは、 `CustomElementRegistry.define()` メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素を文書内で使用できるようになります。

`Window.customElements`

`CustomElementRegistry` オブジェクトへの参照を返します。

ライフサイクルコールバック

カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。

`connectedCallback()`

カスタム要素が文書の DOM に初めて接続したときに呼び出されます。

`disconnectedCallback()`

カスタム要素が文書の DOM から切断されたときに呼び出されます。

`adoptedCallback()`

カスタム要素が新しい文書に移動したときに呼び出されます。

`attributeChangedCallback()`

カスタム要素の属性のひとつが追加、削除、もしくは変更されたときに呼び出されます。

カスタム組み込み要素を作成するための拡張機能

以下の拡張機能が定義されています。

`is` グローバル HTML 属性

標準の HTML 要素が、カスタム組み込み要素のように振る舞うべきかを指定できます。

`Document.createElement()` メソッドの "is" オプション

カスタム組み込み要素のように振る舞う標準の HTML 要素のインスタンスを作成できます。

CSS の擬似クラス

カスタム要素に関連する擬似クラスです。

`:defined`

組み込み要素と `CustomElementRegistry.define()` で定義されるカスタム要素を含む、あらゆる定義済みの要素に一致します。

`:host`

使われている CSS を含む、シャドウ DOM のシャドウホストを選択します。

`:host()`

使われている CSS を含む、シャドウ DOM のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターがシャドウホストに一致している場合に限ります。

`:host-context()` (en-US)

使われている CSS を含む、シャドウ DOM のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターが DOM 階層内のシャドウホストの先祖要素に一致している場合に限ります。

CSS 擬似要素

カスタム要素に関連する擬似要素です。

`::part`

シャドウツリー内にある要素で、一致する `part` 属性を持つものを表します。

### シャドウ DOM

`ShadowRoot`

シャドウ DOM サブツリーのルートノードを表します。

`Element` の拡張

シャドウ DOM に関する `Element` インターフェイスの拡張です。

* `Element.attachShadow()` メソッドは、シャドウ DOM ツリーを指定された要素に取り付けます。
* `Element.shadowRoot` プロパティは、指定された要素に取り付けられたシャドウルートを返します。取り付けられているシャドウルートがない場合は `null` を返します。

関連する `Node` への追加

シャドウ DOM に関する `Node` インターフェイスへの追加事項です。

* `Node.getRootNode()` メソッドは、そのコンテキストオブジェクトのルートを返します。存在する場合はシャドウルートを含みます。
* `Node.isConnected` プロパティは論理値を返し、そのノードがそのコンテキストオブジェクト（通常の DOM であれば `Document` オブジェクト、シャドウ DOM であれば `ShadowRoot`）に接続されているかどうかを示します。

`Event` の拡張

シャドウ DOM に関する `Event` インターフェイスの拡張です。

`Event.composed`

このイベントがシャドウ DOM 境界を超えて標準 DOM にまで伝播する場合は `true`、そうでなければ `false` を返します。

`Event.composedPath`

イベントのパス（リスナーが呼び出されたオブジェクト）を返します。 `ShadowRoot.mode` が closed でシャドウルートが生成された場合、シャドウツリー内のノードは含まれません。

### HTML テンプレート

`<template>`

HTML の断片を含みますが、最初に文書を読み込んだときにはレンダリングされず、実行時に　JavaScript を使って表示することができます。関連する DOM インターフェイスは `HTMLTemplateElement` です。

`<slot>`

ウェブコンポーネント内のプレースホルダーで、独自のマークアップで埋めることができます。これにより、別の DOM ツリーを生成し、それらを一緒に表示することができます。関連する DOM インターフェイスは `HTMLSlotElement` です。

`slot` グローバル HTML 属性

シャドウ DOM のシャドウツリーにあるスロットを要素に割り当てます。

`Element.assignedSlot`

読み取り専用の属性で、この要素が挿入される `<slot>` の参照を返します。

`Text.assignedSlot`

読み取り専用の属性で、このテキストノードが挿入される `<slot>` の参照を返します。

`Element` の拡張

スロットに関する `Element` インターフェイスの拡張です。

`Element.slot`

この要素に取り付けられたシャドウ DOM スロットの名前を返します。

CSS 擬似要素

スロットに特化した擬似要素です。

`::slotted`

スロットに挿入されたコンテンツに一致します。

`slotchange` イベント

`HTMLSlotElement` のインスタンス (`<slot>` 要素) において、そのスロットに含まれるノードが変化したときに発行されます。

例
-

web-components-examples の GitHub リポジトリーに、いくつかの例を用意してあります。時間とともに、より多くの例が追加されることでしょう。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-template-element |
| DOM Standard # interface-shadowroot |

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

### html.elements.template

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

### api.ShadowRoot

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


indexedDB - Web API

indexedDB
=========

グローバルの **`indexedDB`** は読み取り専用プロパティで、アプリケーションが indexed データベースの機能に非同期でアクセスするための機構を提供します。

### 値

`IDBFactory` オブジェクトです。

例
-

以下のコードでは、データベースを開くためのリクエストを非同期に作成し、データベースが開かれた後で、リクエストの `onsuccess` ハンドラーが呼び出されます。

```js
let db;
function openDB() {
  const DBOpenRequest = window.indexedDB.open("toDoList");
  DBOpenRequest.onsuccess = (e) => {
    db = DBOpenRequest.result;
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-windoworworkerglobalscope-indexeddb |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* 参照例: To-do Notifications（例をライブで参照）


AudioWorkletNode - Web API

AudioWorkletNode
================

**メモ:** このインターフェイスは安全なコンテキストの外でも使用可能ですが、`BaseAudioContext.audioWorklet` プロパティはそうではありません。そのため、独自の `AudioWorkletProcessor` は安全なコンテキストの外では使用できません。

ウェブオーディオ API の **`AudioWorkletNode`** インターフェイスは、ユーザー定義の `AudioNode` (他のノードとともに音声ルーティンググラフに接続できる) の基底クラスを表します。これは対応する `AudioWorkletProcessor` (ウェブオーディオレンダリングスレッドで実際の音声処理を行う) を持ちます。

EventTarget

AudioNode

AudioWorkletNodeコンストラクター
--------

`AudioWorkletNode()`

新しい `AudioWorkletNode` オブジェクトのインスタンスを作成します。

インスタンスプロパティ
-----------

*親の `AudioNode` からもプロパティを継承します。*

`AudioWorkletNode.port` 読取専用

ノードと対応する `AudioWorkletProcessor` の間での双方向通信に使用する `MessagePort` を返します。もう一方の端は、処理器の `port` プロパティで参照できます。

`AudioWorkletNode.parameters` 読取専用

`AudioParamMap` を返します。これは `AudioParam` オブジェクトのコレクションです。対応する `AudioWorkletProcessor` の生成中に生成されます。この `AudioWorkletProcessor` に静的な `parameterDescriptors` ゲッターがある場合、このゲッターが返す `AudioParamDescriptor` (en-US) の配列がこの `AudioWorkletNode` において `AudioParam` オブジェクトを生成するのに用いられます。この仕組みにより、`AudioWorkletNode` からアクセスできる独自の `AudioParam` オブジェクトを生成できます。そして、対応する `AudioWorkletProcessor` でこれらの値を使用できます。

### イベント

`processorerror`

対応する `AudioWorkletProcessor` でエラーが投げられた時発火します。発火した後は、処理器、そして対応するノードはずっと無音を出力します。

インスタンスメソッド
----------

*親の `AudioNode` からメソッドを継承します。*

*`AudioWorkletNode` インターフェイスは自身のメソッドを定義していません。*

例
-

この例では、ランダムノイズを出力する独自の `AudioWorkletNode` を生成します。

まず、ランダムノイズを出力する独自の `AudioWorkletProcessor` を定義する必要があります。注意点として、これは個別のファイルで定義してください。

```js
// random-noise-processor.js
class RandomNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("random-noise-processor", RandomNoiseProcessor);
```

そして、メインスクリプトファイルで処理器をロードし、この処理器の名前を渡して `AudioWorkletNode` のインスタンスを作成し、作成したノードを音声グラフに接続します。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("random-noise-processor.js");
const randomNoiseNode = new AudioWorkletNode(
  audioContext,
  "random-noise-processor",
);
randomNoiseNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioWorkletNode |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
* AudioWorklet の使用 (en-US)


IDBFactory - Web API

IDBFactory
==========

IndexedDB API の **`IDBFactory`** インターフェイスは、indexedDB への非同期アクセスを提供します。 このインターフェイスを実装するオブジェクトは、`window.indexedDB` です。このオブジェクトを使用すれば、`IDBFactory` インターフェイスに直接アクセスせずに、IndexedDB を開いたり (生成したり接続したり)、削除したりできます。

**注:** この機能は Web Worker 内で利用可能です

インスタンスメソッド
----------

`IDBFactory.open`

データベースへの接続を開く要求をする現在のメソッドです。

`IDBFactory.deleteDatabase`

データベースの削除を要求するメソッドです。

`IDBFactory.cmp`

2 つのキーを比較して、大きいほうの値を戻り値として返すメソッドです。

`IDBFactory.databases`

利用可能な全てのデータベースのリストを、名前とバージョンを含めて返すメソッドです。

例
-

次のコードスニペットでは、データベースを開く要求をし、成功の場合と失敗の場合のイベントハンドラーを登録しています。完全に動作する例は、To-do Notifications アプリケーション (動く例を見る) を見てください。

```js
// データベースのバージョン 4 を開きましょう。
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// これら 2 個のイベントハンドラーは、データベースが正常に開かれたか、失敗した時に動作します。
DBOpenRequest.onerror = (event) => {
  console.error("データベースの読み込みに失敗しました。");
};

DBOpenRequest.onsuccess = (event) => {
  console.info("データベースを初期化しました。");

  // データベースを開いた結果を変数 db に保存します。これはトランザクションを開くときなど、後でたくさん使います。
  db = DBOpenRequest.result;
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # factory-interface |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


HTMLProgressElement - Web API

HTMLProgressElement
===================

**`HTMLProgressElement`** インターフェイスは、（継承によって利用できる `HTMLElement` オブジェクトのインターフェイス以外に）`<progress>` 要素のレイアウトや表現を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLProgressElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLProgressElement.max`

`double` 値で、同名のコンテンツ属性を反映します。0 以上の数値に限定されます。既定値は `1.0` です。

`HTMLProgressElement.position` 読取専用

`double` 値で、現在値 (`value`) を最大値 (`max`) で割った結果を返します。プログレスバーが不確定プログレスバーの場合は `-1` を返します。

`HTMLProgressElement.value`

`double` 値で、現在の値を反映します。プログレスバーが不確定プログレスバーの場合は `0` を返します。

`HTMLProgressElement.labels` 読取専用

この要素のラベルである `<label>` 要素のリストを格納した `NodeList` を返します。

インスタンスメソッド
----------

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlprogresselement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<progress>`


VRFieldOfView - Web API

VRFieldOfView
=============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`VRFieldOfView`** は WebVR API のインターフェイスで、中心点からの視野を示す 4 つの角度で定義される視界を表現します。

**メモ:** このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

プロパティ
-----

`VRFieldOfView.upDegrees`
非推奨
 読取専用
Non-standard

視界の上方向への拡張量を示す角度。

`VRFieldOfView.rightDegrees`
非推奨
 読取専用
Non-standard

視界の右方向への拡張量を示す角度。

`VRFieldOfView.downDegrees`
非推奨
 読取専用
Non-standard

視界の下方向への拡張量を示す角度。

`VRFieldOfView.leftDegrees`
非推奨
 読取専用
Non-standard

視界の左方向への拡張量を示す角度。

例
-

```js
const info = document.querySelector("p");
const list = document.querySelector("ul");
let vrDisplay;

if (navigator.getVRDisplays) {
  reportFieldOfView();
} else {
  info.textContent = "WebVR API not supported by this browser.";
}

function reportFieldOfView() {
  navigator.getVRDisplays().then((displays) => {
    vrDisplay = displays[0];
    const lEye = vrDisplay.getEyeParameters("left");
    const rEye = vrDisplay.getEyeParameters("right");
    // lEye and rEye are VREyeParameters objects

    const lFOV = lEye.fieldOfView;
    const rFOV = rEye.fieldOfView;
    // lFOV and rFOV are VRFieldOfView objects

    const listitem1 = document.createElement("li");
    const listitem2 = document.createElement("li");

    listitem1.innerHTML =
      `<strong>Left eye parameters</strong><br>` +
      `Offset: ${lEye.offset}<br>` +
      `Render width: ${lEye.renderWidth}<br>` +
      `Render height: ${lEye.renderHeight}<br>` +
      `Up degrees: ${lFOV.upDegrees}<br>` +
      `Right degrees: ${lFOV.rightDegrees}<br>` +
      `Down degrees: ${lFOV.downDegrees}<br>` +
      `Left degrees: ${lFOV.leftDegrees}`;

    listitem2.innerHTML =
      `<strong>Right eye parameters</strong><br>` +
      `Offset: ${rEye.offset}<br>` +
      `Render width: ${rEye.renderWidth}<br>` +
      `Render height: ${rEye.renderHeight}<br>` +
      `Up degrees: ${rFOV.upDegrees}<br>` +
      `Right degrees: ${rFOV.rightDegrees}<br>` +
      `Down degrees: ${rFOV.downDegrees}<br>` +
      `Left degrees: ${rFOV.leftDegrees}`;

    list.appendChild(listitem1);
    list.appendChild(listitem2);
  });
}
```

仕様書
---

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


XPathExpression - Web API

XPathExpression
===============

このインターフェイスはコンパイルされた XPath 式であり、文書や特定のノードに対して評価を行うことで、その DOM ツリーから情報を返すことができます。

これは、アプリケーションで式を再使用する場合に有用です。コンパイルされるのは一度だけで、式内で発生するすべての名前空間接頭辞が事前解決されるからです。

この型のオブジェクトは、 `XPathEvaluator.createExpression()` (en-US) を呼び出すことで生成されます。

インスタンスメソッド
----------

`XPathExpression.evaluate()`

指定されたノードまたは文書に対して XPath 式を評価します。

例
-

次の例では `XPathExpression` インターフェイスを使用しています。

### HTML

```html
<div>XPath example</div>
<div>Number of <div>s: <output></output></div>
```

### JavaScript

```js
const xpath = "//div";
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression(xpath);
const result = expression.evaluate(
  document,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
);
document.querySelector("output").textContent = result.snapshotLength;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-xpathexpression |

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

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

関連情報
----

* `document.createExpression()`
* `XPathResult`


ContactsManager - Web API

ContactsManager
===============

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`ContactsManager`** は連絡先ピッカー API のインターフェイスで、ユーザーが連絡先リストから項目を選択し、選択した項目の限られた詳細をウェブサイトやアプリケーションと共有できるようにします。

ContactsManager` はグローバルな `navigator.contacts` プロパティを通して利用することができます。

インスタンスメソッド
----------

`select()`
Experimental

`Promise` を返します。これが解決すると、ユーザーに連絡先ピッカーが表示され、共有したい連絡先を選択してもらうことができます。

`getProperties()`
Experimental

`Promise` を返します。これは、利用できる連絡先プロパティを示す文字列の配列 (`Array`) で解決します。

例
-

### 機能検出

以下のコードは、連絡先ピッカー API に対応しているかどうかを調べるものです。

```js
const supported = "contacts" in navigator && "ContactsManager" in window;
```

### 対応しているプロパティのチェック

以下の非同期関数は、 `getProperties` メソッドを使用して、対応しているプロパティを調べています。

```js
async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes("name")) {
    // run code for name support
  }
  if (supportedProperties.includes("email")) {
    // run code for email support
  }
  if (supportedProperties.includes("tel")) {
    // run code for telephone number support
  }
  if (supportedProperties.includes("address")) {
    // run code for address support
  }
  if (supportedProperties.includes("icon")) {
    // run code for avatar support
  }
}
```

### 連絡先の選択

以下の例では、それぞれの連絡先に対して取得するプロパティの配列を設定し、また、複数の連絡先を選択できるようにオプションオブジェクトを設定しています。

そして、 `select()` メソッドを使用して、ユーザーに連絡先ピッカーインターフェイスを表示し、選択された結果を処理する非同期関数が定義されます。

```js
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}
```

`handleResults()` は開発者が定義する関数です。

仕様書
---

| Specification |
| --- |
| Contact Picker API # contacts-manager |

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

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

関連情報
----

* A Contact Picker for the Web
* A Contact Picker demo on glitch


Clipboard - Web API

Clipboard
=========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`Clipboard`** インターフェイスはクリップボード API を実装し、ユーザーが許可する場合、システムクリップボードの内容に対する読み取りと書き込みの両方を提供します。クリップボード API は、ウェブアプリケーションに切り取り（カット）、コピー（複写）、貼り付け（ペースト）の機能を実装するために使うことができます。

EventTarget

Clipboard
システムクリップボードは、グローバルの `Navigator.clipboard` プロパティにより公開されています。

`Clipboard` オブジェクトのメソッド呼び出しは、ユーザーが権限 API を使用して `'clipboard-read'` や `'clipboard-write'` 権限を取得していないと、成功しません。

**メモ:** 現実には、ブラウザーがクリップボードへアクセスする場合に必要となることは、非常に多岐に渡ります。詳細はクリップボードの可用性を参照してください。

クリップボード API の全てのメソッドは非同期で動作します。それらはクリップボードにアクセスできたときに解決されるプロミス（`Promise` オブジェクト）を返します。このプロミスは、クリップボードへのアクセスが拒否された場合には拒否されます。

メソッド
----

*`Clipboard` は、`EventTarget` インターフェイスに基づいており、そのメソッドを含みます。*

`read()`

クリップボードから任意のデータ (画像など) を要求し、プロミス（`Promise`）を返します。データが取得されたとき、このプロミスはクリップボードの内容を保持する `ClipboardItem` オブジェクトの配列に解決されます。

`readText()`

システムクリップボードにテキストを要求します。利用可能になるとクリップボードのテキストを含む文字列により解決される `Promise` を返します。

`write()`

システムクリップボードに任意のデータを書き込みます。この非同期操作は、返された `Promise` が解決することにより、その操作が完了したことを示します。

`writeText()`

システムクリップボードにテキストを書き込み、そのテキストがクリップボードに完全にコピーされたときに解決する `Promise` を返します。

クリップボードの可用性
-----------

非同期のクリップボード API は比較的最近追加されたものであり、ブラウザーへの実装プロセスはまだ完了していません。潜在的なセキュリティ懸念事項や技術的複雑さの両方により、ほとんどのブラウザーはこの API の統合を少しずつ行っています。詳しくは下記のブラウザーの互換性を参照してください。

ブラウザー拡張機能の場合、 WebExtension の `clipboard` API を使用してシステムクリップボードにアクセスすることができます。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |

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

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

関連情報
----

* `Document.execCommand()`


HTMLAreaElement - Web API

HTMLAreaElement
===============

**`HTMLAreaElement`** インターフェイスは、（通常のオブジェクトである `HTMLElement` が継承によって利用できるもの以外に） `<area>` 要素のレイアウトと表示を操作するための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLAreaElementインスタンスプロパティ
-----------

*親である `HTMLElement` からプロパティを継承しています。*

`HTMLElement.accessKey`

文字列で、入力フォーカスをこのハイパーリンクに切り替える単一文字を表します。

`HTMLAreaElement.alt`

要素の代替テキストを含む HTML の `alt` 属性を反映する文字列です。

`HTMLAreaElement.coords`

ホットスポット領域を定義する座標を含む HTML の `coords` 属性を反映する文字列です。

`HTMLAreaElement.download`
Experimental

文字列で、リンク先リソースをブラウザーに表示するのではなくダウンロードすることを意図していることを示します。値は、提案するファイル名を表します。そのファイル名が基になる OS の有効なファイル名でなかった場合は、ブラウザーが修正します。

`HTMLAreaElement.hash`

文字列で、参照する URL の先頭のハッシュマーク ('`#`') を含むフラグメント識別子を表します。

`HTMLAreaElement.host`

文字列で、参照する URL のホスト名とポート番号（既定のポート番号でない場合）を表します。

`HTMLAreaElement.hostname`

文字列で、参照する URL のホスト名を表します。

`HTMLAreaElement.href`

文字列で、 HTML の `href` 属性を反映し、リンク先リソースの有効な URL を含みます。

`HTMLAreaElement.noHref`
非推奨

論理値のフラグで、領域がアクティブでない (`true`) かアクティブである (`false`) かを示します。

`HTMLAreaElement.origin` 読取専用

URL のオリジン、つまりスキーム（プロトコル）、ドメイン（ホスト名）、ポートを含む文字列を返します。

`HTMLAreaElement.password`

ドメイン名の前に指定されたパスワードを含む文字列を返します。

`HTMLAreaElement.pathname`

最初の `'/'` に続き、クエリー文字列やフラグメントを含まない URL のパスを含む文字列です。

`HTMLAreaElement.port`

文字列で、参照する URL のポート番号部分がある場合は、それを表します。

`HTMLAreaElement.protocol`

文字列で、参照する URL の末尾のコロン ('`:`') を含むプロトコルの部分を表します。

`HTMLAreaElement.referrerPolicy`
Experimental

文字列で、どのリファラーを使用するかを示す HTML の `referrerpolicy` 属性を反映します。

`HTMLAreaElement.rel`

文字列で、対象オブジェクトからリンク先オブジェクトへの関係を指定する HTML の `rel` 属性を反映します。

`HTMLAreaElement.relList` 読取専用

`DOMTokenList` で、 HTML の `rel` 属性を反映し、現在の文書とリンクされたリソースとの関係を、トークンのリストで示したものを返します。

`HTMLAreaElement.search`

参照する URL の検索要素（先頭の疑問符 ('`?`') を含む）をがあれば、それを表す文字列です。

`HTMLAreaElement.shape`

文字列で、 HTML の `shape` 属性を反映し、ホットスポットの形状を示します。既知の値に制限されています。

`HTMLElement.tabIndex`

現在の文書のタブ移動ナビゲーション順序での要素の位置を含む `long` です。

`HTMLAreaElement.target` (en-US)

文字列で、リンク先リソースを表示する場所を示す HTML の `target` 属性を反映します。

`HTMLAreaElement.username`

ドメイン名の前に指定されたユーザー名を含む文字列です。

インスタンスメソッド
----------

*親である `HTMLElement` からメソッドを継承しています。*

`HTMLAreaElement.toString()`

URL 全体を含む文字列を返します。 `HTMLAreaElement.href` の別名です。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlareaelement |

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

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

関連情報
----

* このインターフェイスを実装する HTML 要素: `<area>`


CompositionEvent - Web API

CompositionEvent
================

DOM の **`CompositionEvent`** は、ユーザーの間接的なテキストの入力（訳注: かな漢字変換の入力など）によって発生するイベントを表します。

Event

UIEvent

CompositionEventコンストラクター
--------

`CompositionEvent()`

新しい `CompositionEvent` オブジェクトのインスタンスを作成します。

プロパティ
-----

*このインターフェイスは、親である `UIEvent` および祖先である `Event` から継承したプロパティもあります。*

`CompositionEvent.data` 読取専用

イベントを発生させた入力システムによって生成された文字を返します。これは、`CompositionEvent` オブジェクトを生成したイベントの型に応じて変わります。

`CompositionEvent.locale` 読取専用
非推奨

Non-standard

現在の入力システムのロケールです (例えば、入力システムが IME であればそれに関連したキーボードレイアウトのロケールになります)。

メソッド
----

*このインターフェイスは、親である `UIEvent` および祖先である `Event` から継承したメソッドもあります。*

`CompositionEvent.initCompositionEvent()`
非推奨

`CompositionEvent` オブジェクトの属性を初期化します。

仕様書
---

| Specification |
| --- |
| UI Events # interface-compositionevent |

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

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

関連情報
----

* compositionstart
* compositionend
* compositionupdate
* UIEvent
* Event


SubmitEvent - Web API

SubmitEvent
===========

**`SubmitEvent`** インターフェイスは、 HTML フォームの `submit` イベントを表現するために使用されるオブジェクトを定義します。このイベントは、フォームの送信操作が呼び出されたときに `<form>` で発行されます。

Event

SubmitEventコンストラクター
--------

`SubmitEvent()`

`type` と他のオプションが指定された `SubmitEvent` オブジェクトを新しく作成して返します。現在、`SubmitEvent` の有効な `type` は `submit` だけであることに注意してください。

プロパティ
-----

*以下のプロパティに加えて、このインターフェイスには親インターフェイスである `Event` から継承したプロパティがあります。*

`submitter` 読取専用

フォーム送信のきっかけとなったボタンやその他の要素を特定する `HTMLElement` オブジェクトです。

メソッド
----

*`SubmitEvent` には自身のメソッドがありませんが、親インターフェイスである `Event` から継承したメソッドがあります。*

例
-

この例では、ユーザーの設定、店舗の設定、決済業者によって確立された商品券の合計額の最小値または最大値等の要因に応じて、ショッピングカートに様々な組み合わせの送信ボタンが表示される可能性があります。それぞれの送信要素の `id` で、ボタンに対応する決済業者を識別します。

```js
let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter;
  let handler = submitter.id;

  if (handler) {
    processOrder(form, handler);
  } else {
    showAlertMessage(
      "不明または未対応の支払い方法が選択されました。やり直してください。",
      "OK",
    );
  }
});
```

ハンドラー ID は、 `submit` イベントの `submitter` プロパティを使用して送信ボタンを取得し、そこから ID を取得します。これで、 `processOrder()` 関数を呼び出して、フォームとハンドラー ID を渡しながら注文を処理することができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-submitevent-interface |

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

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


MediaDevices - Web API

MediaDevices
============

**`MediaDevices`** インターフェイスは、カメラやマイク、さらに画面共有などの接続されたメディア入力機器へのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。

EventTarget

MediaDevicesインスタンスプロパティ
-----------

*親インターフェイスである `EventTarget` のプロパティを継承しています。*

インスタンスメソッド
----------

*親インターフェイスである `EventTarget` のメソッドを継承しています。*

`enumerateDevices()`

システム上で使用できる入出力メディア機器についての情報を持つ配列を取得します。

`getSupportedConstraints()`

`MediaTrackSupportedConstraints` に適合するオブジェクトを返します。このオブジェクトは `MediaStreamTrack` インターフェイスで対応している制約可能なプロパティを表します。制約に関する詳細や使い方については、メディアストリーム API を参照してください。

`getDisplayMedia()`

共有または録画の目的で `MediaStream` としてキャプチャする、画面または画面の一部 (ウィンドウなど) をユーザーに選択させます。 `MediaStream` で解決する Promise を返します。

`getUserMedia()`

ユーザーの許可に基づいて、システム上のカメラや画面共有機能、マイクを起動して、入力と共に映像トラックや音声トラックを含む `MediaStream` を提供します。

`selectAudioOutput()`
Experimental

ユーザーに対して、固有の音声出力機器を選択するよう尋ねます。

イベント
----

`devicechange`

メディアの入力または出力機器がユーザーのコンピューターに接続されたり取り外されたりしたときに発生します。

例
-

```js
// Put variables in global scope to make them available to the browser console.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "ConstraintNotSatisfiedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "PermissionDeniedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

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

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

関連情報
----

* メディアキャプチャとストリーム API: このインターフェイスが所属する API。
* 画面キャプチャ API: `getDisplayMedia()` メソッドを定義している API。
* WebRTC API
* `Navigator.mediaDevices`: 機器にアクセスするために使用することができる `MediaDevices` への参照を返します。
* CameraCaptureJS: HTML5 による動画キャプチャおよび再生で、 `MediaDevices` および MediaStream 収録 API を使用しています。
* OpenLang: HTML による動画言語研究ウェブアプリケーションで、 `MediaDevices` および MediaStream 収録 API を録画に使用しています。


XRReferenceSpaceEvent - Web API

XRReferenceSpaceEvent
=====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

WebXR 機器 API の **`XRReferenceSpaceEvent`** インターフェイスは、`XRReferenceSpace` に送信されるイベントを表します。今のところ、この型を使用するイベントは `reset` イベントのみです。

Event

XRReferenceSpaceEventコンストラクター
--------

`XRReferenceSpaceEvent()`

指定された種類と構成による新しい `XRReferenceSpaceEvent` を返します。

プロパティ
-----

*親インターフェイスである `Event` で使用可能なプロパティを継承することに加えて、`XRReferenceSpaceEvent` オブジェクトには次のプロパティが含まれます。*

`referenceSpace` 読取専用

イベントを生成した参照空間を示す `XRReferenceSpace`。

`transform` 読取専用

イベント前の座標系を基準にして定義された、イベント後の指定された `referenceSpace` のネイティブの原点の位置と向きを示す `XRRigidTransform` オブジェクト。

メソッド
----

*`XRReferenceSpaceEvent` はメソッドを定義しませんが、親インターフェイスである `Event` のメソッドを継承しています。*

イベント型
-----

`reset`

`reset` イベントは、不連続、再較正、または機器のリセットによってネイティブの原点が変更されたときに参照空間に送信されます。 これは、アプリが保存されている変換、位置/向き情報などを更新したり、必要に応じて再計算できるように参照の空間の原点に基づいてキャッシュされた値をダンプする機会です。

仕様書
---

| Specification |
| --- |
| WebXR Device API # xrreferencespaceevent-interface |

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

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


Document - Web API

Document
========

**`Document`** インターフェイスはブラウザーに読み込まれたウェブページを表し、 DOM ツリーであるウェブページのコンテンツへの入口としての役割を果たします。

DOM ツリーには `<body>` や `<table>` など、多数の要素があります。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。

EventTarget

Node

Document
`Document` インターフェイスは、あらゆる種類の文書に対して共通のプロパティやメソッドを提供します。また、文書の種類（例: HTML、XML、SVG など）に応じて、より大規模な API を使用できます。コンテンツタイプ `"text/html"` で提供される HTML 文書では、 `HTMLDocument` インターフェイスも実装します。一方 XML や SVG 文書では、 `XMLDocument` インターフェイスを実装します。

コンストラクター
--------

`Document()`

新しい `Document` オブジェクトを作成します。

インスタンスプロパティ
-----------

*このインターフェイスは、 `Node` インターフェイスおよび `EventTarget` インターフェイスのプロパティも継承しています。*

`Document.activeElement` 読取専用

現在フォーカスのある `Element` を返します。

`Document.adoptedStyleSheets` (en-US)

 文書で使用するために構築したスタイルシートの配列を追加します。
 これらのスタイルシートは、同じ文書のシャドウ DOM のサブツリーと共有されます。

`Document.body`

現在の文書の `<body>` または `<frameset>` ノードを返します。

`Document.characterSet` 読取専用

文書に適用されている文字セットを返します。

`Document.childElementCount` 読取専用

現在の文書の子要素の数を返します。

`Document.children` (en-US) 読取専用

現在の文書の子要素を返します。

`Document.compatMode` 読取専用

文書が *Quirks* モードと *Strict* モードのどちらで描画されているかを示します。

`Document.contentType` 読取専用

現在の文書の MIME ヘッダーから Content-Type を返します。

`Document.currentScript` 読取専用

`<script>` 要素のうち、現在処理中で、かつ JavaScript モジュールでないものを返します。

`Document.doctype` 読取専用

現在の文書の文書型宣言 (DTD) を返します。

`Document.documentElement` 読取専用

文書の直接の子である `Element` を返します。 HTML 文書では、これは通常は `HTMLHtmlElement` オブジェクトで、文書の `<html>` 要素を表します。

`Document.documentURI` 読取専用

文書の場所を文字列で返します。

`Document.embeds` 読取専用

`HTMLCollection` で、現在の文書に含まれる埋め込まれた `<embed>` 要素のリストを返します。

`Document.firstElementChild` (en-US) 読取専用

現在の文書における最初の子要素を返します。

`Document.fonts`

現在の文書の `FontFaceSet` インターフェイスを返します。

`Document.forms` 読取専用

`HTMLCollection` で現在の文書の `<form>` 要素を返します。

`Document.fragmentDirective` 読取専用
Experimental

現在の文書の `FragmentDirective` を返します。

`Document.fullscreenElement` 読取専用

この文書で現在全画面モードになっている要素です。

`Document.head` 読取専用

現在の文書の `<head>` 要素を返します。

`Document.hidden` 読取専用

このページが非表示と見なされているかどうかを論理値で返します。

`Document.images` 読取専用

`HTMLCollection` で、現在の文書の画像のリストを返します。

`Document.implementation` 読取専用

現在の文書に関連付けられた DOM 実装を返します。

`Document.lastElementChild` (en-US) 読取専用

現在の文書における最後の子要素を返します。

`Document.links` 読取専用

`HTMLCollection` で、文書内のすべてのハイパーリンクのリストを返します。

`Document.pictureInPictureElement` 読取専用

この文書で現在、ピクチャインピクチャモードで表示されている要素 (`Element`) を返します。

`Document.pictureInPictureEnabled` 読取専用

ピクチャインピクチャ機能が有効であれば true を返します。

`Document.plugins` 読取専用

`HTMLCollection` で、利用可能なプラグインのリストを返します。

`Document.pointerLockElement` 読取専用

ポインターがロックされている場合、マウスイベントのターゲットとして設定された要素を返します。ロック待ちの場合、ポインターがロックされていない場合、ターゲットが他の文書にある場合は `null` を返します。

`Document.featurePolicy`
Experimental
 読取専用

特定の文書に適用される機能ポリシーを簡単に導入するための API を提供する `FeaturePolicy` (en-US) インターフェイスを返します。

`Document.scripts` 読取専用

`HTMLCollection` で、文書内のすべての `<script>` 要素を返します。

`Document.scrollingElement` 読取専用

文書をスクロールする `Element` への参照を返します。

`Document.styleSheets` 読取専用

`StyleSheetList` で、文書で明示的にリンクされているスタイルシートや、文書に埋め込まれているスタイルシート（`CSSStyleSheet` オブジェクトのリスト）を返します。

`Document.timeline` 読取専用

タイムラインを `DocumentTimeline` (en-US) の特別なインスタンスで返します。これはページの読み込み時に自動的に生成されます。

`Document.visibilityState` 読取専用

文書の可視性を表す文字列を返します。 `visible`, `hidden`, `prerender`, `unloaded` のいずれかの値になります。

### HTML 文書向けの拡張

*HTML 文書用の `Document` インターフェイスは `HTMLDocument` インターフェイスから継承されていたり、拡張されていたりします。*

`Document.cookie`

文書のクッキーをセミコロンで区切られたリストで返すか、単一のクッキーを設定するかします。

`Document.defaultView` 読取専用

window オブジェクトへの参照を返します。

`Document.designMode`

文書全体を編集可能かを取得/設定します。

`Document.dir`

文書の書字方向 (rtl/ltr) を取得/設定します。

`Document.domain`
非推奨

現在の文書のドメインを取得/設定します。

`Document.fullscreenEnabled` 読取専用

全画面モードが利用できるかどうかを示します。

`Document.lastModified` 読取専用

文書の最終更新日を返します。

`Document.location` 読取専用

現在の文書の URI を返します。

`Document.readyState` 読取専用

文書の読み込み状況を表す文字列を返します。

`Document.referrer` 読取専用

このページへリンクしたページの URI を返します。

`Document.title`

現在の文書のタイトルを設定または取得します。

`Document.URL` 読取専用

現在の文書の URL を含む文字列を返します。

### 非推奨のプロパティ

`Document.alinkColor`
非推奨

文書本文内のアクティブなリンクの色を取得または設定します。

`Document.all`
非推奨

文書内のすべての要素にアクセスできます。文書ノードを起点とする `HTMLAllCollection` (en-US) を返します。これは古い標準外のプロパティですので、使用しないようにしてください。

`Document.anchors`
非推奨
 読取専用

文書内のすべてのアンカーのリストを返します。

`Document.applets`
非推奨
 読取専用

空の `HTMLCollection` を返します。文書内にあるアプレットのリストを返すために使われた古いプロパティです。

`Document.bgColor`
非推奨

現在の文書の背景色を取得または設定します。

`Document.charset`
非推奨
 読取専用

`Document.characterSet` の別名です。代わりに `Document.characterSet` を使用してください。

`Document.fgColor`
非推奨

現在の文書の前景色または文字色を取得/設定します。

`Document.fullscreen`
非推奨

文書が全画面モードにあるときに `true` になります。

`Document.inputEncoding`
非推奨
 読取専用

`Document.characterSet` の別名です。代わりにそちらを使用してください。

`Document.lastStyleSheetSet`
非推奨
 読取専用
Non-standard

直前に有効であったスタイルシートセットの名称を返します。 `selectedStyleSheetSet` に値を設定してスタイルシートを変更するまで、この値は `null` になります。

`Document.linkColor`
非推奨

文書内のハイパーリンクの色を取得/設定します。

`Document.preferredStyleSheetSet`
非推奨
 読取専用
Non-standard

ページの作者によって設定された、推奨されるスタイルシートを返します。

`Document.rootElement`
非推奨

`Document.documentElement` と同様ですが、 `<svg>` ルート要素専用です。こちらのプロパティを代わりに使用してください。

`Document.selectedStyleSheetSet`
非推奨

Non-standard

現在どのスタイルシートセットを使用しているかを返します。

`Document.styleSheetSets`
非推奨
 読取専用
Non-standard

文書で使用できるスタイルシートセットのリストを返します。

`Document.vlinkColor`
非推奨

訪問済みのハイパーリンクの色を取得/設定します。

`Document.xmlEncoding` (en-US)
非推奨

XML 宣言によって決められたエンコーディングを返します。

`Document.xmlStandalone`
非推奨

XML 宣言で文書がスタンドアロンである（*例*: DTD の外部パートが文書のコンテンツに影響する）場合に `true` を、そうでない場合に `false` を返します。

`Document.xmlVersion`
非推奨

XML 宣言で指定されたバージョン番号、または宣言が省略されている場合に `"1.0"` を返します。

インスタンスメソッド
----------

*このインターフェイスは、`Node` インターフェイスおよび `EventTarget` インターフェイスのメソッドを継承します。*

`Document.adoptNode()`

外部文書からノードを取り込みます。

`Document.append()` (en-US)

文書の最後の子の後に `Node` オブジェクトまたは文字列の集合を挿入します。

`Document.captureEvents()`
非推奨

`Window.captureEvents` をご覧ください。

`Document.caretPositionFromPoint()`

キャレットを含む DOM ノードと、そのノード内でのキャレットの文字オフセットを含む `CaretPosition` オブジェクトを返します。

`Document.caretRangeFromPoint()`
Non-standard

指定した座標にある文書の断片の `Range` オブジェクトを取得します。

`Document.createAttribute()`

新しい `Attr` オブジェクトを生成して、返します。

`Document.createAttributeNS()` (en-US)

指定した名前空間に新しい属性ノードを生成して、返します。

`Document.createCDATASection()`

新しい CDATA ノードを生成して、返します。

`Document.createComment()`

新しいコメントノードを生成して、返します。

`Document.createDocumentFragment()`

新しい文書断片を生成します。

`Document.createElement()`

指定したタグ名で新しい要素を生成します。

`Document.createElementNS()`

指定したタグ名およびネームスペース URI で、新しい要素を生成します。

`Document.createEvent()`

イベントオブジェクトを生成します。

`Document.createNodeIterator()`

`NodeIterator` オブジェクトを生成します。

`Document.createProcessingInstruction()`

新しい `ProcessingInstruction` オブジェクトを生成します。

`Document.createRange()`

`Range` オブジェクトを生成します。

`Document.createTextNode()`

テキストノードを生成します。

`Document.createTouch()`
非推奨

Non-standard

`Touch` オブジェクトを生成します。

`Document.createTouchList()`
非推奨

Non-standard

`TouchList` オブジェクトを生成します。

`Document.createTreeWalker()` (en-US)

`TreeWalker` オブジェクトを生成します。

`Document.elementFromPoint()`

指定された座標の最上位の要素を返します。

`Document.elementsFromPoint()`

指定された座標にあるすべての要素の配列を返します。

`Document.enableStyleSheetsForSet()`
非推奨

Non-standard

指定したスタイルシートセットのスタイルシートを有効化します。

`Document.exitFullscreen()`

文書の全画面モードにある要素の全画面表示を止めます。

`Document.exitPictureInPicture()`

浮動ピクチャーインピクチャーウィンドウから動画を取り外し、元のコンテナーに戻します。

`Document.exitPointerLock()`

ポインターロックを解放します。

`Document.getAnimations()`

現在実行中であるすべての `Animation` オブジェクトの配列を返します。この対象要素は、`document` の子孫要素です。

`Document.getBoxQuads()`
Experimental

このノードの CSS フラグメントを表す `DOMQuad` オブジェクトのリストを返します。

`Document.getElementById()`

識別された要素のオブジェクト参照を返します。

`Document.getElementsByClassName()`

指定されたクラス名を持つ要素のリストを返します。

`Document.getElementsByTagName()`

指定されたタグ名を持つ要素のリストを返します。

`Document.getElementsByTagNameNS()`

指定されたタグ名と名前空間を持つ要素のリストを返します。

`Document.getSelection()`

ユーザーが現在選択しているテキスト範囲、または現在のキャレットの位置を表す `Selection` オブジェクトを返します。

`Document.hasStorageAccess()`

文書に分離されていないクッキーへのアクセスがあるかどうかを示す論理値で解決する `Promise` を返します。

`Document.importNode()`

外部文書のノードの複製を返します。

`Document.prepend()` (en-US)

文書の最初の子の前に、 `Node` オブジェクトまたは文字列の集合を挿入します。

`Document.querySelector()`

指定したセレクターに一致する、文書内で最初の要素ノードを返します。

`Document.querySelectorAll()`

指定したセレクターに一致する、文書内のすべての要素ノードのリストを返します。

`Document.releaseCapture()`
Non-standard

この文書内の要素でマウスキャプチャを行っている場合、マウスキャプチャを解放します。

`Document.releaseEvents()`
非推奨

`Window.releaseEvents()` をご覧ください。

`Document.replaceChildren()` (en-US)

文書の既存の子を、指定された新しい子の集合で置き換えます。

`Document.requestStorageAccess()`

サードパーティのコンテキスト（すなわち、 `<iframe>` に埋め込まれたもの）に読み込まれた文書が、分離されていないクッキーへのアクセスを要求できるようにします。これはユーザーエージェントが既定で、プライバシーを改善するためにサードパーティコンテキストで読み込まれたサイトによる分離されていないクッキーへのアクセスをブロックしている場合に使用します。

`Document.startViewTransition()`
Experimental

新しいビュートランジションを開始し、それを表すための `ViewTransition` オブジェクトを返します。

`Document.mozSetImageElement()` (en-US)
Non-standard

指定した ID を持つ要素の背景画像として使用する要素を変更できます。

`Document` インターフェイスは、`XPathEvaluator` (en-US) インターフェイスによって拡張されています。

`Document.createExpression()`

(繰り返し) 評価に使用できる `XPathExpression` をコンパイルします。

`Document.createNSResolver()`

`XPathNSResolver` (en-US) オブジェクトを生成します。

`Document.evaluate()`

XPath 表現を評価します。

### HTML 文書向けの拡張

HTML 文書用の `Document` インターフェイスは `HTMLDocument` インターフェイスから継承または拡張されています。

`Document.clear()`
非推奨

このメソッドは何もしません。

`Document.close()`

書き込み用の文書ストリームを閉じます。

`Document.execCommand()`
非推奨

編集可能な文書で、フォーマットコマンドを実行します。

`Document.getElementsByName()`

(引数で) 与えられた名前 (name) を持つ要素のリストを返します。

`Document.hasFocus()`

指定した文書内にフォーカスがある場合に、 `true` を返します。

`Document.open()`

書き込み用の文書ストリームを開きます。

`Document.queryCommandEnabled()` (en-US)
非推奨

Non-standard

現在の領域でフォーマットコマンドを実行できる場合に、 true を返します。

`Document.queryCommandIndeterm()`
非推奨

現在の領域でフォーマットコマンドの状態が不確定である場合に true を返します。

`Document.queryCommandState()`
非推奨

Non-standard

現在の領域でフォーマットコマンドを実行した場合に true を返します。

`Document.queryCommandSupported()`
非推奨

Non-standard

現在の領域でフォーマットコマンドをサポートしている場合に、true を返します。

`Document.queryCommandValue()`
非推奨

指定したフォーマットコマンドについて、現在の領域における値を返します。

`Document.write()`

文書にテキストを書き込みます。

`Document.writeln()`

文書にテキスト行を書き込みます。

イベント
----

これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、本インターフェイスの `onイベント名` プロパティへイベントリスナーを代入するかしてください。

`afterscriptexecute`
Non-standard

静的な `<script>` 要素でスクリプトの実行が完了した時に発生します。

`beforescriptexecute`
Non-standard

静的な `<script>` で実行を開始しようとしている時に発生します。

`securitypolicyviolation` (en-US)

コンテンツセキュリティポリシーに違反した場合に発行されます。

`scroll`

文書のビューまたは要素がスクロールしたときに発行されます。

`visibilitychange`

タブの内容の表示・非表示の状態が切り替わった時に発行されます。

`wheel` (en-US)

ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させた時に発行されます。

### アニメーションイベント

`animationcancel`

アニメーションが予期せず中断された時に発行されます。

`animationend`

アニメーションが正常に完了したときに発行されます。

`animationiteration`

アニメーションの1周期が完了したときに発行されます。

`animationstart`

アニメーションが始まった時に発行されます。

### クリップボードイベント

`copy`

ユーザーがブラウザーのユーザーインターフェイスからコピー操作を開始した時に発行されます。

`cut`

ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を開始したときに発行されます。

`paste`

ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を開始したときに発行されます。

### ドラッグ＆ドロップイベント

`drag`

要素またはテキストの選択範囲をユーザーがドラッグしている間、数百ミリ秒ごとに発行されます。

`dragend`

ドラッグ操作が終了したとき (マウスボタンを離したときやエスケープキーを押したとき) に発行されます。

`dragenter`

ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象に入ったときに発行されます。

`dragleave`

ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象から外れたときに発行されます。

`dragover`

要素またはテキストの選択範囲が妥当なドロップ対象の上をドラッグされているときに (数ミリ秒ごとに) 発行されます。

`dragstart`

ユーザーが要素またはテキストの選択範囲のドラッグを開始したときに発行されます。

`drop`

要素またはテキストの選択範囲が妥当なドロップ対象にドロップされたときに発行されます。

### 全画面イベント

`fullscreenchange`

`Document` が全画面モードへ移行したとき、または解除されたときに発行されます。

`fullscreenerror`

全画面モードへ切り替えようとしたとき、または解除しようとしたときにエラーが発生した場合に発行されます。

### キーボードイベント

`keydown`

キーが押されたときに発行されます。

`keypress` (en-US)
非推奨

文字値を生成するキーが押下されたときに発行されます。

`keyup`

キーを離したときに発行されます。

### ロード＆アンロードイベント

`DOMContentLoaded`

文書が完全に読み込まれて解釈されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発行されます。

`readystatechange`

文書の `readyState` 属性が変更されたときに発行されます。

### ポインターイベント

`gotpointercapture`

`setPointerCapture()` を使用して要素がポインターをキャプチャしたときに発行されます。

`lostpointercapture`

キャプチャされたポインターが解放されたときに発行されます。

`pointercancel`

ポインターイベントがキャンセルされたときに発行されます。

`pointerdown`

ポインターがアクティブになったときに発行されます。

`pointerenter`

ポインターが要素やその子孫のヒットテスト境界の中へ移動したときに発行されます。

`pointerleave`

ポインターが要素のヒットテスト境界の外へ移動したときに発行されます。

`pointerlockchange`

ポインターがロックまたはアンロックされたときに発行されます。

`pointerlockerror`

ポインターをロックしようとして失敗したときに発行されます。

`pointermove`

ポインターの座標が変化したときに発行されます。

`pointerout`

ポインターが（訳あって）要素の *ヒットテスト* 境界の外へ移動したときに発行されます。

`pointerover`

ポインターが要素のヒットテスト境界の中へ移動したときに発行されます。

`pointerup`

ポインターがアクティブではなくなったときに発行されます。

### 選択イベント

`selectionchange`

文書でのテキスト選択範囲が変化したときに発行されます。

### タッチイベント

`touchcancel`

1 つ以上のタッチ点が実装固有の方法で中断された場合に発行されます (例えば、作成されたタッチ点が多すぎた場合など)。

`touchend`

1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。

`touchmove`

1 つ以上のタッチ点がタッチ面に沿って移動したときに発行されます。

`touchstart`

1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。

### トランジションイベント

`transitioncancel`

CSS トランジションがキャンセルされたときに発行されます。

`transitionend`

CSS トランジションが完了したときに発行されます。

`transitionrun`

CSS トランジションが初めて作成されたときに発行されます。

`transitionstart`

CSS トランジションが実際に開始されたときに発行されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-document |
| HTML Standard # the-document-object |
| CSSOM View Module # extensions-to-the-document-interface |
| Pointer Lock 2.0 # extensions-to-the-document-interface |
| Selection API # extensions-to-document-interface |

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

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


CSSPseudoElement - Web API

CSSPseudoElement
================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`CSSPseudoElement`** インターフェイスは、イベントの対象としたりウェブアニメーション API を使用してアニメーションさせたりする擬似要素を表します。このインターフェイスのインスタンスは `Element.pseudo()` を呼び出すことで取得できます。

EventTarget

CSSPseudoElementインスタンスプロパティ
-----------

`CSSPseudoElement.element`
Experimental
 読取専用

擬似要素の元／親要素 (`Element`) を返します。

`CSSPseudoElement.type`
Experimental
 読取専用

擬似要素セレクターを文字列で返します。

インスタンスメソッド
----------

*`CSSPseudoElement` は `EventTarget` から派生しているため、以下のメソッドを継承しています。*

`EventTarget.addEventListener()`

擬似要素に固有のイベント型のイベントハンドラーを登録します。

`EventTarget.dispatchEvent()`

この擬似要素にイベントを配信します。

`EventTarget.removeEventListener()`

擬似要素からイベントリスナーを除去します。

例
-

### Element.pseudo を使用した基本的な例

擬似要素を用いると、ほとんどの現代のブラウザーは `<q>` 要素内のテキストに引用符を自動的に追加します。（古いブラウザーで引用符を追加するにはスタイルルールが必要な場合があります。）下記ノ例は、冒頭の引用符を表す `CSSPseudoElement` オブジェクトの基本的なプロパティを示しています。

```js
const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // [object HTMLQuoteElement] を出力
console.log(cssPseudoElement.type); // '::before' を出力
```

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # CSSPseudoElement-interface |

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

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

関連情報
----

* `Element.pseudo()`
* ウェブアニメーション API
* `Element.animate()`


IDBRequest - Web API

IDBRequest
==========

**`IDBRequest`** は IndexedDB API のインターフェイスで、データベースやデータベースオブジェクトへの非同期の要求の結果へのアクセスをイベントハンドラープロパティによって提供します。データベースの読み書きは、それぞれ要求を用いて行います。

要求オブジェクトは、最初は操作の結果の情報を何も持っていません。情報が得られるようになると、要求でイベントが発生し、`IDBRequest` のインスタンスのプロパティを通じて情報が得られるようになります。

全ての非同期操作は、すぐに `IDBRequest` のインスタンスを返します。それぞれの要求は `'pending'` 状態に設定された `readyState` を持ちます。要求が完了するか失敗すると、これは `'done'` に変わります。状態が `done` に設定されると、それぞれの要求は `result` と `error` を返し、要求でイベントが発生します。状態が `pending` のままである間は、`result` や `error` にアクセスしようとすると `InvalidStateError` 例外が発生します。

平たく言えば、全ての非同期メソッドは要求オブジェクトを返します。要求が正常に完了すると、結果が `result` プロパティを通じて取得できるようになり、成功を表すイベント (`IDBRequest.onsuccess`) が発生します。操作の実行中にエラーが発生すると、例外が `error` プロパティを通じて取得できるようになり、エラーイベント (`IDBRequest.onerror` (en-US)) が発生します。

`IDBOpenDBRequest` インターフェイスは `IDBRequest` から派生しています。

**注:** この機能は Web Worker 内で利用可能です

EventTarget

IDBRequestインスタンスプロパティ
-----------

*`EventTarget` からもプロパティを継承しています。*

`IDBRequest.error` 読取専用

要求が失敗したとき `DOMException` を返し、何が失敗したのかを示します。

`IDBRequest.result` 読取専用

要求の結果を返します。要求が完了していない場合は結果は参照できず、`InvalidStateError` 例外が投げられます。

`IDBRequest.source` 読取専用

`IDBIndex` や `IDBObjectStore` などの要求元です。(`IDBFactory.open` を呼んだときなど) 要求元が存在しない場合は `null` を返します。

`IDBRequest.readyState` 読取専用

要求の状態です。全ての要求は開始時 `pending` 状態です。要求が正常に完了するか、エラーが発生すると、状態は `done` に変わります。

`IDBRequest.transaction` 読取専用

要求用のトランザクションです。例えばアップグレードが不要な場合に `IDBFactory.open` から返される要求など、このプロパティが `null` になる要求もあります。(データベースに接続するだけなので、返すべきトランザクションがありません)

インスタンスメソッド
----------

*メソッドはありませんが、メソッドを `EventTarget` から継承しています。*

イベント
----

`addEventListener()` を用いるか、このインターフェイスの `oneventname` プロパティにイベントリスナーを代入することで、これらのイベントをリッスンします。

`error`

 エラーにより要求が失敗した場合に発生します。
 `onerror` (en-US) プロパティ経由でも利用可能です。

`success`

`IDBRequest` が成功した場合に発生します。
 `onsuccess` プロパティ経由でも利用可能です。

例
-

以下のコードスニペットでは、データベースを非同期で開いて要求を作成します。`onerror` および `onsuccess` 関数が、成功と失敗のケースを扱うために入っています。動く例全体は､To-do Notifications アプリケーション (動く例を見る) を見てください｡

```js
var db;

// 我々のデータベースを開きましょう
var DBOpenRequest = window.indexedDB.open("toDoList", 4);

// これら 2 個のイベントハンドラーは､データベースが正常に開かれたか､
// 失敗した時に動作します｡
DBOpenRequest.onerror = function (event) {
  note.innerHTML += "<li>データベースの読み込みに失敗しました。</li>";
};

DBOpenRequest.onsuccess = function (event) {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を保存します｡
  db = DBOpenRequest.result;
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # request-api |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始 : `IDBDatabase`
* トランザクションの使用 : `IDBTransaction`
* キーの範囲の設定 : `IDBKeyRange`
* データの取得と変更 : `IDBObjectStore`
* カーソルの使用 : `IDBCursor`
* リファレンス例 : To-do Notifications (動く例を見る)


PerformanceNavigationTiming - Web API

PerformanceNavigationTiming
===========================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`PerformanceNavigationTiming`** インターフェイスは、ブラウザーの文書ナビゲーションイベントに関するメトリックを格納および取得するためのメソッドとプロパティを提供します。たとえば、このインターフェイスを使用して、文書のロードまたはアンロードにかかる時間を判断できます。

PerformanceEntry

PerformanceResourceTiming

PerformanceNavigationTimingプロパティ
-----

このインターフェイスは、ナビゲーションパフォーマンスエントリタイプの以下の `PerformanceEntry` プロパティを次のように限定して制限することで拡張します。

`PerformanceEntry.entryType` 読取専用

`"navigation"` を返します。

`PerformanceEntry.name` 読取専用

文書のアドレス を返します。

`PerformanceEntry.startTime` 読取専用

値 "`0`" を持つ `DOMHighResTimeStamp` を返します。

`PerformanceEntry.duration` 読取専用

`PerformanceNavigationTiming.loadEventEnd` と `PerformanceEntry.startTime` の各プロパティの差である `timestamp` を返します。

このインターフェイスは、ナビゲーションパフォーマンスエントリタイプの以下の `PerformanceResourceTiming` プロパティも、次のように修飾して制約することで拡張します。

`PerformanceResourceTiming.initiatorType`読取専用

`"navigation"` を返します。

インターフェイスは以下のプロパティもサポートします。

`PerformanceNavigationTiming.domComplete` (en-US) 読取専用

ブラウザーが現在の文書の現在の文書レディネスを\*完了\*に設定する直前の時間と等しい時間値を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.domContentLoadedEventEnd` (en-US) 読取専用

現在の文書の DOMContentLoaded イベントが完了した直後の時間と等しい時間値を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.domContentLoadedEventStart` (en-US) 読取専用

現在の文書でユーザーエージェントが DOMContentLoaded イベントを起動する直前の時間と等しい時間値を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.domInteractive` (en-US) 読取専用

ユーザーエージェントが現在の文書の現在の文書の準備状態を interactive に設定する直前の時間に等しい時間値を表す`タイムスタンプ`を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.loadEventEnd` 読取専用

現在の文書の load イベントが完了した時刻を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.loadEventStart` (en-US) 読取専用

現在の文書の load イベントが発生する直前の時間と等しい時間値を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.redirectCount` (en-US) 読取専用

 現在の閲覧コンテキストでの最後のリダイレクト以外のナビゲーション以降のリダイレクト数を表す数値。
 リダイレクトがなかった場合、またはリダイレクトが別のオリジンからのもので、そのオリジンが現在のオリジンにタイミング情報を公開することを許可していない場合、値は 0 になります。

`PerformanceNavigationTiming.requestStart` 読取専用

ユーザーエージェントがサーバー、または関連するアプリケーションキャッシュから、あるいはローカルリソースからリソースを要求し始める直前の時間を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.responseStart` 読取専用

ユーザーエージェントの HTTP パーサーが関連するアプリケーションキャッシュ、またはローカルリソースから、あるいはサーバーからレスポンスの最初のバイトを受け取った直後の時間を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.type` (en-US) 読取専用

ナビゲーションタイプを表す `文字列`。"`navigate`"、"`reload`"、"`back_forward`"、"`prerender`"のいずれかです。

`PerformanceNavigationTiming.unloadEventEnd` (en-US) 読取専用

ユーザーエージェントが前の文書の unload イベントを終了した直後の時間と等しい時間値を表す `DOMHighResTimeStamp`。

`PerformanceNavigationTiming.unloadEventStart` (en-US) 読取専用

ユーザーエージェントが前の文書の unload イベントを開始する直前の時間と等しい時間値を表す `DOMHighResTimeStamp`。

メソッド
----

`PerformanceNavigationTiming.toJSON()` (en-US)

`PerformanceNavigationTiming` オブジェクトの JSON 表現である `DOMString` を返します。

仕様書
---

| Specification |
| --- |
| Navigation Timing Level 2 # sec-PerformanceNavigationTiming |

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

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

関連情報
----

* `Performance.navigation`
* `PerformanceNavigation`


CSSRule - Web API

CSSRule
=======

**`CSSRule`** インターフェイスは、1 つの CSS ルールを表します。 `CSSRule` からプロパティを継承しているルールを表す型がいくつかあります。

* `CSSGroupingRule`
* `CSSStyleRule`
* `CSSImportRule`
* `CSSMediaRule`
* `CSSFontFaceRule`
* `CSSPageRule`
* `CSSNamespaceRule`
* `CSSKeyframesRule`
* `CSSKeyframeRule`
* `CSSCounterStyleRule` (en-US)
* `CSSSupportsRule`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSFontPaletteValuesRule` (en-US)
* `CSSLayerBlockRule`
* `CSSLayerStatementRule`
* `CSSPropertyRule`
インスタンスプロパティ
-----------

`CSSRule` インターフェイスは、すべてのルールに共通のプロパティを規定します。特定の種類のルールに特有のプロパティは、各種類のルールのために、さらに特化したインターフェース内で規定されています。

`CSSRule.cssText`

このルールのテキスト表現を表します。たとえば "`h1,h2 { font-size: 16pt }`" や "`@import 'url'`" です。ルールの一部（つまり、この例の "font-size" の値）にアクセスまたは変更するには、ルールの種類に特化したインターフェイスのプロパティを使用してください。

`CSSRule.parentRule` 読取専用

このルールを含むルールを返します。このルールが包含されていなければ `null` を返します。つまり、このルールが `@media` ブロック内部のスタイルルールの場合、親ルールは `CSSMediaRule` になります。

`CSSRule.parentStyleSheet` 読取専用

このルールを含むスタイルシートの `CSSStyleSheet` オブジェクトを返します。

`CSSRule.type` 読取専用
非推奨

どの種類のルールを表すかを決定するための、型定数の一つを返します。

例
-

`CSSRule` への参照は、 `CSSStyleSheet` の `cssRules` リストを参照することで取得できます。

```js
let myRules = document.styleSheets[0].cssRules; // CSSRuleList を返す
console.log(myRules);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssrule-interface |

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

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

関連情報
----

* 動的なスタイル情報の使用