HTMLTitleElement - Web API

HTMLTitleElement
================

**`HTMLTitleElement`** インターフェイスは文書の `<title>` が実装しています。この要素は `HTMLElement` インターフェイスのすべてのプロパティおよびメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLTitleElement.text` (en-US)

文字列で、文書の題名のテキストを表し、またテキスト部分のみを表します。例えば、この例を考えてみてください。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <title>
      Hello world! <span class="highlight">Isn't this wonderful</span> really?
    </title>
  </head>
  <body></body>
</html>
```

```js
const title = document.querySelector("title");
console.log(title.text); // yield: "Hello world! really?"
```

ご覧の通り、`span` タグとその内容はスキップされています。

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

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

例
-

`document.title` と `document.querySelector('title')` を混同しないでください。

前者は文書の題名の内側のテキスト値を設定したり取得したりするための単なるセッター/ゲッターメソッドで、後者は `HTMLTitleElement` オブジェクトです。ですから、`document.title.text = "Hello world!";` のように書くことはできません。

代わりに、シンプルに `document.title = "Hello world!";` と書くことができます。これは `document.querySelector('title').text = "Hello world!";` と等価です。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltitleelement |

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

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

関連情報
----

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


EyeDropper API - Web API

EyeDropper API
==============

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

**EyeDropper API** は、スポイトツールを作るための仕組みを提供します。このツールを使うと、ユーザーはブラウザーウィンドウ外を含む画面から色を採取できます。

概念
--

創造的なアプリケーションには、アプリケーション内で絵や図形から色を採取して再利用する機能があることが多いです。ウェブアプリケーションは、**EyeDropper API** を使うことで、ブラウザーによって提供される同様のスポイトツールを提供できます。

この API を使うと、ウェブアプリケーションはスポイトモードを開始できます。開始すると、カーソルが変わることで、ユーザーにこのモードが有効になっていることを知らせます。そして、ユーザーは画面上のどこからでも色を選択することができるし、`Escape` を押してスポイトモードをキャンセルすることもできます。

セキュリティとプライバシーの対策
----------------

悪意のあるウェブサイトがユーザーに気付かれずに画面からピクセルデータを取得するのを防ぐため、**EyeDropper API** は以下の対策を実装しています。

* この API は、ユーザーの意図なしでスポイトモードを開始させません。`EyeDropper.prototype.open()` メソッドは、ユーザーの操作 (ボタンのクリックなど) への反応としてのみ呼び出すことができます。
* ピクセルデータの取得には、またユーザーの意図が必要です。`EyeDropper.prototype.open()` が返すプロミスは、ユーザーの操作 (ピクセルのクリック) の結果としてのみ色の値で解決します。そのため、ユーザーに気付かれずにバックグラウンドでスポイトを使うことはできません。
* ユーザーがスポイトモードにさらに気付きやすくするため、ブラウザーはこのモードを目立つようにします。短い間をおいて通常のマウスカーソルが非表示になり、かわりに虫眼鏡が出現します。スポイトモードの開始後、ユーザーがピクセルを選択できるようになるまでにも間があり、ユーザーが確実に虫眼鏡を見られるようにします。
* ユーザーはまた、(`Escape` キーを押すことで) スポイトモードをいつでもキャンセルできます。
インターフェイス
--------

* `EyeDropper`
Experimental
仕様書
---

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

関連情報
----

* Picking colors of any pixel on the screen with the EyeDropper API
* The EyeDropper API W3C/SMPTE Joint Workshop


HTMLOptionsCollection - Web API

HTMLOptionsCollection
=====================

**`HTMLOptionsCollection`** インターフェイスは、 HTML の `<option>` 要素の集合を（文書内の順序で）表し、リストから選択すると共に、任意で項目を変更することもできるメソッドやプロパティを提供します。このオブジェクトが返されるのは、 select の `options` プロパティからのみです。

HTMLCollection

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

`length`

`unsigned long` です。仕様上は、オプションで読み取り専用にしないことが認められています。値を下げることで末尾のオプションを削除したり、値を上げることで末尾に空白のオプションを追加したりすることができます。 Mozilla はこれを許可していますが、他の実装では DOMException が発生する可能性があります。

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

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

仕様書
---

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

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

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

関連情報
----

* HTMLCollection


連絡先ピッカー API - Web API

連絡先ピッカー API
===========

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

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

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

**メモ:** この API はウェブワーカーでは使用できません（`WorkerNavigator` に公開されていません）。

連絡先ピッカー API の概念と使用法
-------------------

連絡先へのアクセスは、長い間、ネイティブアプリケーションの中で利用できる機能でした。連絡先ピッカー API は、その機能をウェブアプリケーションに提供します。

用途としては、メールやチャットアプリケーションでメッセージを送る連絡先を選択したり、Voice over IP ( VOIP ) で使用する連絡先の電話番号を選択したり、ソーシャルプラットフォームに既に参加している連絡先を発見したりするために使用されることがあります。また、ユーザーエージェントは、ユーザー機器上の他のアプリケーションとの一貫した使い勝手も提供することができます。

`ContactsManager` インターフェイスの `select` メソッドを呼び出すと、ユーザーに連絡先ピッカーが存在し、ユーザーはウェブアプリケーションと共有する連絡先情報を選択することができます。連絡先ピッカーを表示する許可を得るには、ユーザーとの対話が必要です。また、連絡先へのアクセスは永続的ではなく、アプリケーションからの要求があるたびにユーザーがアクセスを許可する必要があります。

このAPIが利用可能なのは、安全な最上位の閲覧コンテキストからのみであり、連絡先データの機密性とプライバシーについてとても慎重に考慮されています。共有するデータを選択する責任はユーザーにあり、選択した連絡先の特定のデータのみを許可し、他の連絡先のデータには一切アクセスできないようになっています。

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

`ContactAddress`

物理的な住所を表します。

`ContactsManager`

ユーザーがウェブアプリケーションで連絡先の限定された詳細を選択し、共有する方法を提供します。

`Navigator.contacts`

他のすべての機能にアクセス可能な `ContactsManager` オブジェクトのインスタンスを返します。

例
-

### 機能検出

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

```js
const supported = "contacts" in navigator;
```

### 対応しているプロパティを調べる

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

```js
async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes("name")) {
    // 名前に対応したコードを実行
  }
  if (supportedProperties.includes("email")) {
    // メールアドレスに対応したコードを実行
  }
  if (supportedProperties.includes("tel")) {
    // 電話番号に対応したコードを実行
  }
  if (supportedProperties.includes("address")) {
    // 住所に対応したコードを実行
  }
  if (supportedProperties.includes("icon")) {
    // アバターに対応したコードを実行
  }
}
```

### 連絡先の選択

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

そして、`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


ウェブストレージ API - Web API

ウェブストレージ API
============

**ウェブストレージ API** (Web Storage API) は、Cookie を使用するよりも直観的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。

ウェブストレージの概念と用途
--------------

ウェブストレージには、以下の 2 種類の仕組みがあります。

* `sessionStorage` は、ページのセッション中（ページの再読み込みや復元を含む、ブラウザーを開いている間）に使用可能な、オリジンごとに区切られた保存領域を管理します。
    + 1 セッションのデータのみを保存します。つまり、データはブラウザー（またはタブ）が閉じられるまで保存されます。
    + データがサーバーに転送されることはありません。
    + ストレージの上限が Cookie よりも大きいです（最大 5MB）。
* `localStorage` も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
    + 有効期限なしでデータを保存し、JavaScript によるクリア、もしくは、ブラウザーキャッシュ/ローカルに保存したデータのクリアによってのみクリアされます。
    + ストレージ制限は 2 つの中で最大です。

これらの仕組みは `Window.sessionStorage` および `Window.localStorage` プロパティ（正確には、サポートするブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります）を通して使用でき、いずれかのプロパティを使用すると `Storage` オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して `sessionStorage` と `localStorage` は、別の `Storage` オブジェクトを使用します。 これらは別々に制御されて機能します。

**メモ:** Firefox では、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。詳しくは、ブラウザーのストレージ制限と削除基準を参照してください。

**メモ:** ユーザーがサードパーティの Cookie を禁止している（英語）場合は、サードパーティの iframe からウェブストレージにアクセスできません。

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

`Storage`

特定のドメインおよびストレージタイプ（セッションまたはローカル）に対して、データを保存、取り出し、削除できます。

`Window`

ウェブストレージ API は `Window` オブジェクトを、`Window.sessionStorage` および `Window.localStorage` という 2 つの新たなプロパティで拡張します。これらは、それぞれ現在のドメインのセッションおよびローカルの `Storage` オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される（例えば新たなアイテムを保存する）と発生する、`storage` イベントハンドラーもあります。

`StorageEvent`

`storage` イベントは、保存領域が変更されたときにドキュメントの `Window` オブジェクトで発生します。

例
-

ウェブストレージの典型的な使用法を示すため、Web Storage Demo と名づけたシンプルな例を作成しました。ランディングページには、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。

また、event output ページも提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに `StorageEvent` が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |
| HTML Standard # dom-sessionstorage-dev |

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

### api.Window.localStorage

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

### api.Window.sessionStorage

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

プライベートブラウジング / シークレットモード
------------------------

プライベートウィンドウ、シークレットモード、および同様の名前のプライバシーブラウジングオプションでは、履歴やクッキーのようなデータは格納されません。プライベートモードでは `localStorage` は `sessionStorage` のように扱われます。ストレージ API が利用可能で完全に機能しますが、プライベートウィンドウに格納されたデータはすべてブラウザーまたはブラウザータブが閉じられたときに削除されます。

関連情報
----

* ウェブストレージ API の使用
* ブラウザーのストレージ制限と削除基準


Bluetooth - Web API

Bluetooth
=========

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

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

Web Bluetooth API の **`Bluetooth`** インターフェイスは、指定のオプションに合致する `BluetoothDevice` オブジェクトで解決する `Promise` を返します。

EventTarget

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

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

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

`Bluetooth.getAvailability()`
Experimental

ユーザーエージェントに Bluetooth を扱う機能があるかを表す `boolean` 値で解決する `Promise` を返します。これが何を返すかに影響するオプションをユーザーが設定できるユーザーエージェントもあります。このオプションが設定されている場合、このメソッドはその値を返します。

`Bluetooth.getDevices()`
Experimental

オリジンが既に `Bluetooth.requestDevice()` の呼び出しにより使用する許可を得ている `BluetoothDevice` の配列で解決する `Promise` を返します。

`Bluetooth.requestDevice()`
Experimental

指定のオプションに合致する `BluetoothDevice` オブジェクトで解決する `Promise` を返します。

イベント
----

`availabilitychanged`
Experimental

Bluetooth の能力のうち利用可能性が変化したとき発火するイベントです。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetooth |

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

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


HTMLButtonElement - Web API

HTMLButtonElement
=================

**`HTMLButtonElement`** インターフェイスは、（通常の `HTMLElement` から継承によって利用できるものに加えて）`<button>` 要素を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLButtonElement.accessKey`

文字列で、ボタンにアクセスするためのキーボードの 1 文字のキーを示します。

`HTMLButtonElement.autofocus`

論理値で、ページが読み込みの際、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは 1 つだけです。

`HTMLButtonElement.disabled`

論理値で、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。

`HTMLButtonElement.form` 読取専用

`HTMLFormElement` で、このボタンが関連付けられているフォームを反映します。ボタンがフォームの子孫要素である場合は、この属性は関連付けられた `HTMLFormElement` への参照になります。
 ボタンがフォーム要素の子孫でない場合は、属性は同じ文書内にある任意の `HTMLFormElement` への参照になる可能性があり、また一致するものがなければ `null` 値になります。

`HTMLButtonElement.formAction`

文字列で、ボタンによって送信された情報を処理するリソースの URI を反映します。指定された場合は、この属性はこの要素のオーナーである `<form>` 要素の `action` 属性を上書きします。

`HTMLButtonElement.formEnctype`

文字列で、サーバーにフォームを送信するために使用されるコンテンツの型を反映します。指定された場合は、この属性はこの要素のオーナーである `<form>` 要素の `enctype` 属性を上書きします。

`HTMLButtonElement.formMethod`

文字列で、ブラウザーがフォームを送信するために使用する HTTP メソッドを反映します。指定された場合は、この属性はこの要素のオーナーである `<form>` 要素の `method` 属性を上書きします。

`HTMLButtonElement.formNoValidate`

論理値で、フォームの送信時に値の検証が行われないことを示します。指定された場合は、この属性はこの要素のオーナーである `<form>` 要素の `novalidate` 属性を上書きします。

`HTMLButtonElement.formTarget`

文字列で、フォームに送信した後で受信するレスポンスを表示する場所を示す名前またはキーワードを反映します。指定された場合は、この属性はこの要素のオーナーである `<form>` 要素の `target` 属性を上書きします。

`HTMLButtonElement.labels` 読取専用

`NodeList` で、このボタンのラベルとなる `<label>` 要素を表します。

`HTMLButtonElement.menu`
Experimental

`HTMLMenuElement` で、ボタンが `type="menu"` である場合にクリックした場合に表示されるメニュー要素を表します。

`HTMLButtonElement.name`

文字列で、フォームを送信したときのオブジェクトの名前を表します。指定された場合は、空文字列にすることはできません。

`HTMLButtonElement.popoverTargetAction`
Experimental

制御ボタンで制御されるポップオーバー要素で実行されるアクション（`"hide"`、`"show"`、`"toggle"` の何れか）を取得および設定します。これは HTML の `popovertargetaction` 属性の値を反映します。

`HTMLButtonElement.popoverTargetElement`
Experimental

ボタンで制御するポップオーバー要素を取得および設定します。JavaScript において HTML の `popovertarget` 属性と同等のものです。

`HTMLButtonElement.tabIndex`

`long` で、タブ順でのこの要素の位置を表します。

`HTMLButtonElement.type`

文字列で、このボタンの動作を示します。これは列挙型属性で、以下の値を取ることができます。

* `submit`: フォームを送信するボタンです。これは属性が指定されていなかった場合の既定値です。または空の値や無効な値に変更された場合の既定値です。
* `reset`: フォームをリセットするボタンです。
* `button`: 何もしないボタンです。
* `menu`: メニューを表示するボタンです。
Experimental

`HTMLButtonElement.willValidate` 読取専用

論理値で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は `false` となり、これには `type` プロパティが `reset` または `button` である場合、祖先に `<datalist>` がある場合、 `disabled` プロパティが `true` に設定されている場合が含まれます。

`HTMLButtonElement.validationMessage` 読取専用

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

`HTMLButtonElement.validity` 読取専用

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

`HTMLButtonElement.value`

文字列で、ボタンの現在のフォームコントロールの値を表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbuttonelement |

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

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

関連情報
----

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


HTMLDListElement - Web API

HTMLDListElement
================

**`HTMLDListElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものの他に）定義リスト要素 (`<dl>`) を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDListElement.compact`
非推奨

論理値で、リスト項目間の間隔を縮小することを示します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldlistelement |

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

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

関連情報
----

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


Animation - Web API

Animation
=========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation`** はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。

EventTarget

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

`Animation()`

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

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

`Animation.currentTime`

このアニメーションの現在時刻の値で、ミリ秒単位です。再生中か停止中かは問いません。アニメーションに `timeline` (en-US) がなかったり、無効であったり、まだ再生されていなかったりした場合は、この値は `null` になります。

`Animation.effect`

このアニメーションに関連付けられた `AnimationEffect` を取得または設定します。これはふつう、 `KeyframeEffect` (en-US) オブジェクトになります。

`Animation.finished` 読取専用

このアニメーションにおいて現在完了しているプロミスを返します。

`Animation.id`

このアニメーションを識別するための `String` を取得または設定します。

`Animation.pending` 読取専用

このアニメーションが現在、再生待ちや再生中の一時停止などの非同期操作を待機しているかどうかを示します。

`Animation.playState` 読取専用

列挙型の値で、アニメーションの再生状態を示す列挙値を返します。

`Animation.playbackRate`

このアニメーションの再生速度を取得または設定します。

`Animation.ready` 読取専用

このアニメーションの準備ができているかどうかを示すプロミスを返します。

`Animation.replaceState` 読取専用

アニメーションがアクティブか、他のアニメーションに置き換えられて自動的に除去されたか、 `Animation.persist()` の呼び出しによって明示的に維持されているかを示します。

`Animation.startTime`

アニメーションの再生が始まる予定の時刻を取得または設定します。

`Animation.timeline`

このアニメーションに関連付けられる `timeline` (en-US) を取得または設定します。

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

`Animation.cancel()`

このアニメーションで発生したすべての `keyframeEffects` (en-US) を消去し、再生を中止します。

`Animation.commitStyles()`

アニメーションの現在のスタイル状態を、そのアニメーションが削除された後でも、アニメーションしている要素にコミットします。これは、アニメーションの現在のスタイル状態を `style` 属性内のプロパティの形で動作している要素に書き込むことで行われます。

`Animation.finish()`

再生位置をアニメーションのどちらかの端まで移動します。アニメーションが通常再生中か逆再生中かによって変わります。

`Animation.pause()`

アニメーションの再生を一時停止します。

`Animation.persist()`

アニメーションを明示的に維持し、別のアニメーションに置き換わったときにアニメーションの自動削除が行われることを防ぎます。

`Animation.play()`

アニメーションの再生を開始または再開します。また、前回終了したアニメーションを再度開始します。

`Animation.reverse()`

再生方向を反転させ、アニメーションの開始位置で停止させます。アニメーションが終了しているか未再生の場合は、末尾から先頭に向けて再生されます。

`Animation.updatePlaybackRate()`

アニメーションの再生位置を同期させた後の速度を設定します。

イベント
----

`cancel`

`Animation.cancel()` メソッドが呼び出されるか、アニメーションの再生状態が他の状態から `"idle"` へ遷移した場合に発行されます。

`finish`

アニメーションの再生が終了した時に発行されます。

`remove`

アニメーションが取り除かれた時 (すなわち、 `active` 置換状態に遷移した時）に発行されます。

アクセシビリティの考慮
-----------

注意欠陥多動性障碍（ADHD）などの認知能力に不安のある方にとって、まばたきや点滅するアニメーションは問題となることがあります。さらに、ある種の動作は、前庭障害、てんかん、片頭痛、スコトピック過敏症の引き金になることがあります。

アニメーションを一時停止したり、無効にしたりするメカニズムを提供したり、動作縮減メディアクエリー（または同等のユーザーエージェントクライアントヒント `Sec-CH-Prefers-Reduced-Motion` (en-US))）を使って、アニメーションなしの操作を希望するユーザーのために補完的な操作を提供することを検討してください。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN WCAG を理解する　ガイドライン 2.2 の説明
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| Web Animations # the-animation-interface |

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

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

関連情報
----

* ウェブアニメーション API


CookieStoreManager - Web API

CookieStoreManager
==================

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

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

「Cookie Store API」の **`CookieStoreManager`** インターフェイスは、サービスワーカーが Cookie 変更イベントを購読できるようにします。変更イベントを受け取るには、特定のサービスワーカーの登録で `subscribe()` を呼びます。

`CookieStoreManager` には、関連づいた `ServiceWorkerRegistration` があります。それぞれのサービスワーカーの登録には、Cookie 変更購読リストがあります。これは、それぞれが名前と URL を持つ Cookie 変更購読のリストです。このインターフェイスのメソッドにより、サービスワーカーはこのリストに購読を追加したり、リストから購読を削除したり、すべての購読のリストを取得したりできます。

`CookieStoreManager` を得るには、`ServiceWorkerRegistration.cookies` (en-US) を参照します。

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

`CookieStoreManager.getSubscriptions()`
Experimental

このサービスワーカーの登録の Cookie 変更購読のリストで解決する `promise` を返します。

`CookieStoreManager.subscribe()`
Experimental

Cookie の変更を購読します。購読に成功したら解決する `promise` を返します。

`CookieStoreManager.unsubscribe()`
Experimental

このサービスワーカーの登録の Cookie の変更の購読を解除します。操作に成功したら解決する `promise` を返します。

例
-

この例では、`registration` で表される `ServiceWorkerRegistration` が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントを購読します。

```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.subscribe(subscriptions);
```

`ServiceWorkerRegistration` が既に何か Cookie を購読している場合は、`getSubscriptions()` はもとの購読で用いるのと同じ形式のオブジェクトで表された Cookie のリストを返します。

```js
const subscriptions = await registration.cookies.getSubscriptions();
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # cookiestoremanager |

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

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


CSSValue - Web API

CSSValue
========

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

**`CSSValue`** インターフェイスは、 CSS プロパティの現在の計算値を表します。

**メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。

目的を達成するためには、次のものを利用することができます。

* 型のない CSS オブジェクトモデル、広く対応されています。
* 新しい CSS 型付きオブジェクトモデル API、対応が限られており、実験的と見なされています。

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

`CSSValue.cssText`
非推奨

文字列で、現在の値を表します。

`CSSValue.cssValueType` 読取専用
非推奨

`unsigned short` で、値の型を定義するコードを表します。可能な値は次のとおりです。

| 定数 | 説明 |
| --- | --- |
| `CSS_CUSTOM` | この値はカスタム値です。 |
| `CSS_INHERIT` | この値は継承したものであり、 `cssText` は `"inherit"` となっています。 |
| `CSS_PRIMITIVE_VALUE` | この値はプリミティブ値であり、 `CSSPrimitiveValue` (en-US) インターフェイスのインスタンスは、この `CSSValue` インターフェイスのインスタンスに対してバインディング固有のキャストメソッドを使用することで取得することができます。 |
| `CSS_VALUE_LIST` | この値は `CSSValue` のリストであり、 `CSSValueList` (en-US) インターフェイスのインスタンスは、この `CSSValue` インターフェイスのインスタンスに対してバインディング固有のキャストメソッドを使用して取得することができます。 |

仕様書
---

この機能は元々 DOM Style Level 2 仕様で定義されていましたが、その後、全ての標準化作業から外されています。

これは、現代の、しかし互換性のない、CSS 型付きオブジェクトモデル API に取って代わられ、標準化路線になりました。

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

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

関連情報
----

* `CSSPrimitiveValue` (en-US)
* `CSSValueList` (en-US)


HTMLMenuElement - Web API

HTMLMenuElement
===============

**`HTMLMenuElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスで定義され、継承によって利用できるもの以外に）`<menu>` 要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

`HTMLMenuElement()`

新しく構築された `HTMLMenuElement` を返します。

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

*親である `HTMLElement` およびその祖先から継承したプロパティがあります。*

`compact`
非推奨

メニューをコンパクトに表示するかどうかを決定する論理値です。

`type`
非推奨

Non-standard

 このメニューがコンテキストメニューであれば `context` を返します。
 この `<menu>` 要素の使用方法は広く実装されたことがなく、非推奨になりました。

`label`
非推奨

Non-standard

 メニューがコンテキストメニューとして使用されるときに表示される、メニューと名前を関連付ける文字列です。
 この `<menu>` 要素の使用方法は広く実装されたことがなく、非推奨になりました。

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

*親である `HTMLElement` およびその祖先から継承したメソッドがあります。*

*`HTMLMenuElement` は固有のメソッドを実装していません。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmenuelement |

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

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

関連情報
----

* `HTMLMenuItemElement` (en-US)


HTMLObjectElement - Web API

HTMLObjectElement
=================

**`HTMLObjectElement`** インターフェイスは、外部リソースを表す `<object>` 要素のレイアウトや表示を操作するための特別なプロパティとメソッド（継承によって利用できる `HTMLElement` インターフェイスのもの以外のもの）を提供するものです。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLObjectElement.align`
非推奨

文字列で、列挙型のプロパティを表し、要素のコンテンツが周囲のコンテキストに対して整列していることを示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

`HTMLObjectElement.archive`
非推奨

HTML の `archive` 属性を反映した文字列で、このオブジェクトのリソースのアーカイブのリストを示します。

`HTMLObjectElement.border`
非推奨

HTML の `border` 属性を反映した文字列で、オブジェクトの周りにある境界の幅を指定します。

`HTMLObjectElement.code`
非推奨

アプレットのクラスファイルの名前を表す文字列で、アプレットのサブクラス、またはクラスファイル自体を含むクラスにアクセスするためのパスが入ります。

`HTMLObjectElement.codeBase`
非推奨

HTML の `codebase` 属性を反映した文字列で、相対 URI を解決するために使用する基底パスを指定します。

`HTMLObjectElement.codeType`
非推奨

HTML の `codetype` 属性を反映した文字列で、データのコンテンツ型を指定します。

`HTMLObjectElement.contentDocument` 読取専用

この object 要素のネストされた閲覧コンテキストのアクティブな文書を表す `Document` があればそれを返し、なければ `null` を返します。

`HTMLObjectElement.contentWindow` 読取専用

この object 要素のネストされた閲覧コンテキストのウィンドウプロキシーがあればそれを表す WindowProxy を返し、なければ `null` を返します。

`HTMLObjectElement.data`

HTML の `data` 属性を反映した文字列で、リソースのデータのアドレスを指定するものを返します。

`HTMLObjectElement.declare`
非推奨

HTML の `declare` 属性を反映した論理値で、これがオブジェクトのインスタンス化ではなく宣言であることを示します。

`HTMLObjectElement.form` 読取専用

このオブジェクトのフォームオーナーを表す `HTMLFormElement` を返します。存在しなければ null を返します。

`HTMLObjectElement.height`

HTML の `height` 属性を反映した文字列で、リソースが表示される高さを CSS ピクセル数で指定する値を返します。

`HTMLObjectElement.hspace`
非推奨

`long` で、このコントロールの周囲にある水平方向の空間をピクセル数で表します。

`HTMLObjectElement.name`

HTML の `name` 属性を反映した文字列で、閲覧コンテキストの名前を示すものを返します。

`HTMLObjectElement.standby`
非推奨

HTML の `standby` 属性を反映した文字列で、オブジェクトの読み込み中に表示されるメッセージを指定します。

`HTMLObjectElement.type`

HTML の `type` 属性を反映した文字列で、リソースの MIME タイプを指定します。

`HTMLObjectElement.useMap`

HTML の `usemap` 属性を反映した文字列で、使用する `<map>` 要素を指定します。

`HTMLObjectElement.validationMessage` 読取専用

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

`HTMLObjectElement.validity` 読取専用

この要素が属する有効状態を `ValidityState` で返します。

`HTMLObjectElement.vspace`
非推奨

`long` で、このコントロールの周囲にある垂直方向の空間をピクセル数で表します。

`HTMLObjectElement.width`

HTML の `width` 属性を反映した文字列で、リソースが表示される幅を CSS ピクセル数で指定する値を返します。

`HTMLObjectElement.willValidate` 読取専用

その要素が制約検証の候補であるかどうかを示す論理値を返します。 `HTMLObjectElement` オブジェクトの場合は常に `false` です。

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

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

`HTMLObjectElement.checkValidity()`

`object` オブジェクトは制約検証の候補になることはないので、常に `true` となる論理値を返します。

`HTMLObjectElement.setCustomValidity()`

要素の独自の有効性メッセージを設定します。このメッセージが空文字列でない場合、その要素は独自の有効性エラーが発生しており、検証が通りません。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlobjectelement |

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

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

関連情報
----

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


WebGLObject - Web API

WebGLObject
===========

**`WebGLObject`** は WebGL API の一部であり、すべての WebGL オブジェクトの親インターフェイスです。

このオブジェクト自体には公開プロパティも公開メソッドもありません。

WebGL コンテキストが失われた場合、すべての `WebGLObject` インスタンスの内部にある *invalidated* フラグが `true` に設定されます。

`WebGLObject` を継承しているオブジェクト
---------------------------

WebGL 1:

* `WebGLBuffer`
* `WebGLFramebuffer`
* `WebGLProgram`
* `WebGLRenderbuffer`
* `WebGLShader`
* `WebGLTexture` (en-US)

WebGL 2:

* `WebGLQuery` (en-US) （および `WebGLTimerQueryEXT`）
* `WebGLSampler` (en-US)
* `WebGLSync` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLVertexArrayObject` (en-US) （および `WebGLVertexArrayObjectOES`）
関連情報
----

* `WebGLRenderingContext.isContextLost()` (en-US)
* `WEBGL_lose_context` (en-US)
* `webglcontextlost` イベント


FileSystemDirectoryEntry - Web API

FileSystemDirectoryEntry
========================

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

**`FileSystemDirectoryEntry`** は File and Directory Entries API のインターフェイスで、ファイルシステム内のディレクトリを表します。これはディレクトリ内のファイルにアクセスして操作する方法と、ディレクトリ内のエントリにアクセスする方法を提供します。

基本概念
----

`getDirectory()` (en-US) を呼び出して新しいディレクトリを作成することができます。サブディレクトリを作成する場合は、各子ディレクトリを順番に作成します。まだ存在しない親ディレクトリを含むフルパスを使用してディレクトリを作成しようとすると、エラーが返されます。したがって、親ディレクトリを作成した後、新しいパスを再帰的に追加して階層を作成します。

### 例

次のコードスニペットでは、 "Documents" というディレクトリを作成します。

```js
// Taking care of the browser-specific prefixes.
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;

...

function onFs(fs){
  fs.root.getDirectory('Documents', {create:true}, function(directoryEntry){
    //directoryEntry.isFile === false
    //directoryEntry.isDirectory === true
    //directoryEntry.name === 'Documents'
    //directoryEntry.fullPath === '/Documents'

    }, onError);

  }

// 一時記憶装置でファイルシステムを開く
window.requestFileSystem(TEMPORARY, 1024\*1024 /\*1MB\*/, onFs, onError);
```

プロパティ
-----

*このインターフェイスは独自のプロパティを持っていませんが、親インターフェイス `FileSystemEntry` (en-US) からプロパティを継承しています。*

メソッド
----

*このインターフェイスは、親インターフェイスである `FileSystemEntry` (en-US) からメソッドを継承しています。*

`createReader()` (en-US)

このディレクトリ内のエントリを読み込むために使用できる `FileSystemDirectoryReader` (en-US) オブジェクトを作成します。

`getDirectory()` (en-US)

メソッドが呼び出されるディレクトリを基準に、指定されたパスにあるディレクトリを表す `FileSystemDirectoryEntry` オブジェクトを返します。

`getFile()` (en-US)

メソッドが呼び出されるディレクトリに対する相対パスを指定して、ディレクトリの階層内にあるファイルを表す `FileSystemFileEntry` オブジェクトを返します。

### 廃止されたメソッド

`removeRecursively()` (en-US)

サブディレクトリのコンテンツを含むディレクトリとそのすべてのコンテンツを削除します。これは仕様から削除されました。

仕様
--

| Specification |
| --- |
| File and Directory Entries API # api-directoryentry |

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

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

関連情報
----

* File and Directory Entries API
* File System API の紹介
* `FileSystemDirectoryReader` (en-US)
* `FileSystemEntry` (en-US)
* `FileSystemFileEntry`


ViewTransition - Web API

ViewTransition
==============

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

**`ViewTransition`** はビュートランジション API のインターフェースで、ビュートランジションを表し、トランジションが様々な状態（例えば、アニメーションを実行する準備ができている、またはアニメーションが終了した）に達したときに反応する機能、またはトランジションを完全にスキップする機能を提供します。

このオブジェクト型は `document.startViewTransition()` メソッドが返します。 `startViewTransition()` が呼び出されると、ビュートランジションのプロセスで説明されている一連のステップに従います。これは様々なプロミスが履行されるタイミングについても説明しています。

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

`ViewTransition.finished`
Experimental

`Promise` で、トランジションのアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されます。

`ViewTransition.ready`
Experimental

`Promise` で、擬似要素ツリーが作成され、トランジションのアニメーションが始まろうとすると履行されます。

`ViewTransition.updateCallbackDone`
Experimental

`Promise` で、 `document.startViewTransition()` のコールバックが返すプロミスが履行されたときに履行されます。

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

`skipTransition()`
Experimental

ビュートランジションのアニメーション部分をスキップします。ただし、 DOM を更新する `document.startViewTransition()` コールバックの実行はスキップしません。

例
-

次の例では、 `ViewTransition.ready` プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュートランジションを発生させ、 ウェブアニメーション API によってアニメーションが指定されています。

```js
// 最後のクリックイベントを保存
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // この API に対応していないブラウザーのためのフォールバック
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // クリック位置を取得するか、画面の中央へフォールバックする
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 最も遠いコーナーまでの距離を取得
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // トランジションを作成
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 擬似要素が作成されるのを待つ
  transition.ready.then(() => {
    // ルートの新しいビューをアニメーション
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // アニメーションさせる擬似要素を指定
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```

このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュートランジションの遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。

```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # viewtransition |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API


ContactAddress - Web API

ContactAddress
==============

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

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

**`ContactAddress`** は連絡先ピッカー API のインターフェイスで、物理的な住所を表します。 このインターフェイスのインスタンスは、 `ContactsManager.getProperties()` が返すオブジェクトの `address` プロパティから取得されます。

郵便物の宛先に関する国際規格の情報を提供する万国郵便連合のウェブサイトの Addressing S42 standard の素材を参照することが有益な場合があります。

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

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

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

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

例
-

以下の例では、ユーザーに連絡先を選択するよう促し、最初に返された住所をコンソールに表示します。

```js
const props = ["address"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, ops);
    const contactAddress = contacts[0].address[0];
    console.log(contactAddress);
  } catch (ex) {
    // Handle any errors here.
  }
}
```

仕様書
---

| Specification |
| --- |
| Contact Picker API # contactaddress |

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

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


HTMLSelectElement - Web API

HTMLSelectElement
=================

**`HTMLSelectElement`** インターフェイスは HTML の `<select>` 要素を表します。これらの要素は `HTMLElement` インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。

EventTarget

Node

Element

HTMLElement

HTMLSelectElementプロパティ
-----

*このインターフェイスは `HTMLElement`、`Element`、`Node` からプロパティを継承しています。*

`HTMLSelectElement.autofocus`

論理値で、 HTML の `autofocus` 属性を反映し、ページが読み込みの際に、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは 1 つだけです。

`HTMLSelectElement.disabled`

論理値で、 HTML の `disabled` 属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。

`HTMLSelectElement.form` 読取専用

`HTMLFormElement` で、この要素が関連付けられているフォームを反映します。この要素が `<form>` 要素に関連付けられていなければ、 `null` を返します。

`HTMLSelectElement.labels` 読取専用

`NodeList` で、この要素に関連付けられた `<label>` 要素を表します。

`HTMLSelectElement.length`

`unsigned long` で、 `<option>` 要素がこの `select` 要素に含まれる数です。

`HTMLSelectElement.multiple`

論理値で、 HTML の `multiple` 要素を反映し、複数の項目を選択することができるかどうかを示します。

`HTMLSelectElement.name`

文字列で、 HTML の `name` 属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。

`HTMLSelectElement.options` 読取専用

`HTMLOptionsCollection` で、この要素に含まれる一連の `<option>` 要素 (`HTMLOptionElement`) を表します。

`HTMLSelectElement.required`

論理値で、 HTML の `required` 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。

`HTMLSelectElement.selectedIndex`

`long` で、最初に選択された `<option>` 要素の序数を反映します。 `-1` の値は要素が選択されていないことを示します。

`HTMLSelectElement.selectedOptions` 読取専用

`HTMLCollection` で、選択されているすべての `<option>` 要素を反映します。

`HTMLSelectElement.size`

`long` で、 HTML の `size` 属性を反映し、コントロール内で見える項目の数が入ります。既定値は、 `multiple` が `true` でなければ 1 で、そうでなければ 4 です。

`HTMLSelectElement.type` 読取専用

文字列で、フォームコントロールの型を表します。 `multiple` が `true` である場合は `"select-multiple"` を返し、そうでなければ `"select-one"` を返します。

`HTMLSelectElement.validationMessage` 読取専用

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

`HTMLSelectElement.validity` 読取専用

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

`HTMLSelectElement.value`

文字列で、このフォームコントロールの値を反映します。選択されている option 要素があれば最初のものの `value` プロパティを返し、そうでなければ空文字列を返します。

`HTMLSelectElement.willValidate` 読取専用

論理値で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は `false` となります。

メソッド
----

*このインターフェイスは `HTMLElement`、`Element`、`Node` からメソッドを継承しています。*

`HTMLSelectElement.add()`

要素をこの `select` 要素にある `option` 要素の集合に加えます。

`HTMLSelectElement.blur()`
非推奨

この要素から入力フォーカスを外します。*このメソッドは `HTMLElement` での実装になりました*。

`HTMLSelectElement.checkValidity()`

要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な `invalid` イベントを要素に送ります（そして `false` を返します）。

`HTMLSelectElement.focus()`
非推奨

この要素に入力フォーカスを与えます。*このメソッドは `HTMLElement` での実装になりました*。

`HTMLSelectElement.item()`

この `<select>` 要素の選択肢の集合から項目を取得します。配列風に角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。

`HTMLSelectElement.namedItem()`

選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの `id` または `name` 属性と一致させることができます。配列風に角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。

`HTMLSelectElement.remove()`

この `select` 要素の選択肢の集合から、指定された序数の要素を削除します。

`HTMLSelectElement.reportValidity()`

このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な `invalid` イベントを要素で発生させ、 `false` を返します。問題がなければ、 `true` を返します。

`HTMLSelectElement.setCustomValidity()`

選択要素の独自の検証メッセージを指定されたメッセージに設定します。空文字列を使用すると、要素に独自の検証エラーが*ない*ことを示します。

イベント
----

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

`change` イベント

ユーザーが選択肢を選択したときに発行されます。

`input` イベント

`<input>`, `<select>`, `<textarea>` の各要素の `value` が変化したときに発行されます。

例
-

### 選択された選択肢についての情報を得る

```js
/\* 以下の HTML があると仮定します
<select id='s'>
 <option>First</option>
 <option selected>Second</option>
 <option>Third</option>
</select>
\*/

const select = document.getElementById("s");

// 選択された選択肢の序数を返す
console.log(select.selectedIndex); // 1

// 選択された選択肢の値を返す
console.log(select.options[select.selectedIndex].value); // Second
```

ユーザーの選択の変更を追跡するのであれば、 `change` イベントが `<select>` に発生するのを監視するほうがより良い方法です。これは値が変化したときに通知され、必要なものを更新することができます。詳しくは、 `change` イベントのドキュメントで提供されている例を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlselectelement |

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

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

関連情報
----

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


Selection - Web API

Selection
=========

**`Selection`** オブジェクトは、ユーザーが選択したテキストの範囲、またはキャレットの現在の位置を表します。検査や操作のために `Selection` オブジェクトを取得するには、 `window.getSelection()` を呼び出してください。

ユーザーは、左から右（文書順）または右から左（文書と逆順）に選択することができます。アンカー (***anchor***) はユーザーが選択を開始した場所、フォーカス (***focus***) はユーザーが選択を終了した場所である。デスクトップマウスで選択する場合、アンカーはマウスボタンを押した場所に置かれ、フォーカスはマウスボタンを離した場所に置かれます。

**メモ:** アンカーとフォーカスは、選択範囲の開始位置と終了位置と混同しないようにしましょう。アンカーはフォーカスの前に置かれることもあればその逆もあり、 選択の方向によって異なります。

プロパティ
-----

`Selection.anchorNode` (en-US) 読取専用

選択範囲を開始する `Node` を返します。選択範囲が文書内に存在しない場合（例：クリックされなかった iframe）には `null` を返すことがあります。

`Selection.anchorOffset` (en-US) 読取専用

選択部分のアンカーの `anchorNode` 内でのオフセットを表す値を返します。 `anchorNode` がテキストノードであった場合、これはアンカーに先行する anchorNode 内の文字数です。 `anchorNode` が要素であった場合、これはアンカーに先行する `anchorNode` の子ノードの数です。

`Selection.focusNode` (en-US) 読取専用

選択範囲が終了する `Node` を返します。選択範囲が文書内に存在しない場合（例えば、クリックされなかった `iframe` 内の場合）には `null` を返すことがあります。

`Selection.focusOffset` (en-US) 読取専用

選択部分のアンカーの `focusNode` 内でのオフセットを表す値を返します。 `focusNode` がテキストであった場合、これは `focusNode` 内でフォーカスに先行する文字数です。 `focusNode` が要素であった場合、フォーカスの前にある `focusNode` の子ノードの数を表します。

`Selection.isCollapsed` (en-US) 読取専用

選択範囲の始点と終点が同じ位置にあるかどうかを示す論理値を返します。

`Selection.rangeCount` (en-US) 読取専用

選択範囲に含まれる範囲の数を返します。

`Selection.type` (en-US) 読取専用

現在の選択部分の型を記述した文字列を返します。

メソッド
----

`Selection.addRange()` (en-US)

`Range` オブジェクトを選択範囲に追加します。

`Selection.collapse()` (en-US)

現在の選択範囲をこの点まで折りたたみます。

`Selection.collapseToEnd()` (en-US)

選択範囲を終端まで折りたたみます。

`Selection.collapseToStart()`

選択範囲を先頭まで折りたたみます。

`Selection.containsNode()` (en-US)

あるノードが選択範囲に含まれるかどうかを示します。

`Selection.deleteFromDocument()` (en-US)

選択部分の内容を文書から削除します。

`Selection.extend()` (en-US)

選択範囲のフォーカスをこの点に移動させる。

`Selection.getRangeAt()` (en-US)

現在選択されている範囲のうちの一つを表す `Range` オブジェクトを返します。

`Selection.modify()` (en-US)
Non-standard

現在の選択範囲を変更します。

`Selection.removeRange()` (en-US)

選択範囲から範囲を削除します。

`Selection.removeAllRanges()` (en-US)

選択範囲からすべての範囲を削除します。

`Selection.selectAllChildren()` (en-US)

指定されたノードのすべての子ノードを選択範囲に追加します。

`Selection.setBaseAndExtent()` (en-US)

指定した 2 つの DOM ノードのすべてまたは一部、およびそれらの間にあるコンテンツを含む範囲を選択範囲に設定します。

`Selection.toString()` (en-US)

選択オブジェクトが現在表現している文字列、すなわち現在選択されている文字列を返します。

メモ
--

### 選択範囲の文字列表現

`Selection.toString()` (en-US) メソッドを呼び出すと、選択範囲に含まれるテキストなどを返すことができます。

```js
const selObj = window.getSelection();
window.alert(selObj);
```

なお、選択オブジェクトを `window.alert` の引数として使用すると、そのオブジェクトの `toString` メソッドが呼び出されます。

### 選択範囲に複数の範囲がある場合

選択オブジェクトは、ユーザーが選択した`Range`を表します。通常、1つの範囲のみを保持し、以下のようにアクセスします。

```js
const selObj = window.getSelection();
const range = selObj.getRangeAt(0);
```

* `selObj` は Selection オブジェクト
* `range` は `Range` オブジェクト

選択 API 仕様書のメモにあるように、選択 API は当初 Netscape 社によって作成され、複数の範囲を許容していました（例えば `<table>` から列を選択できるようにする）。しかし、 Gecko 以外のブラウザーは複数の範囲を実装しておらず、仕様でも選択範囲は常に一つであることが要求されています。

### 選択と入力のフォーカス

選択と入力フォーカス（`Document.activeElement` で示される）には、ブラウザーによって異なる複雑な関係があります。ブラウザー間の互換性のあるコードでは、これらを別個に扱う方がよいでしょう。

Safari と Chrome は（Firefox と異なり）現在、プログラムで選択範囲を変更する場合、選択範囲を含む要素にフォーカスを当てます。将来的には変更される可能性があります（W3C bug 14383 と WebKit bug 38696 を参照して下さい）。

### 編集ホストのフォーカス変更に関する選択 API の挙動

選択 API には、特定のメソッドが呼ばれた後に*編集ホスト*のフォーカスの動作がどのように変わるかを制御する共通の動作（つまり、ブラウザー間で共有される）があります。

その動作は次のとおりです。

1. 編集中のホストは、直前の選択がその外にあった場合、フォーカスを得ることができます。
2. 選択 API のメソッドが呼び出され、編集ホスト内の選択範囲に新たな選択範囲が発生します。
3. その後、フォーカスは編集ホストに移ります。

**メモ:** 選択 API のメソッドは編集ホストにのみフォーカスを移動でき、他のフォーカス可能な要素には移動できません（例: `<a>`）。

上記の動作は、以下のメソッドを使用して選択された場合にも適用されます。

* `Selection.collapse()` (en-US)
* `Selection.collapseToStart()`
* `Selection.collapseToEnd()` (en-US)
* `Selection.extend()` (en-US)
* `Selection.selectAllChildren()` (en-US)
* `Selection.addRange()` (en-US)
* `Selection.setBaseAndExtent()` (en-US)

また、以下のメソッドを使用して `Range` を変更した場合も同様です。

* `Range.setStart()`
* `Range.setEnd()`
* `Range.setStartBefore()`
* `Range.setStartAfter()`
* `Range.setEndBefore()`
* `Range.setEndAfter()`
* `Range.collapse()`
* `Range.selectNode()`
* `Range.selectNodeContents()`
用語集
---

この分野で使用されるその他の重要な用語です。

**アンカー**

選択範囲のアンカーは、選択範囲の始点です。マウスで選択する場合、アンカーは文書内で最初にマウスボタンが押された位置となります。ユーザーがマウスやキーボードを使用して選択範囲を変更しても、アンカーは移動しません。

**編集ホスト**

編集可能な要素（例えば、`contenteditable`が設定された HTML 要素、または `designMode` が有効になっている文書の HTML 子要素など）。

**選択フォーカス**

選択範囲の *フォーカス* は、選択範囲の終点です。マウスで選択する場合、フォーカスは文書内でマウスボタンが離された位置にあります。ユーザーがマウスやキーボードを使用して選択範囲を変更すると、フォーカスは移動した選択範囲の終点になります。

**メモ:** これは、`document.activeElement`が返すような、文書のフォーカスされた要素と同じものではありません。

**範囲**

範囲とは、文書内の連続した部分のことです。範囲には、ノード全体やノードの一部（テキストノードの一部など）を含めることができます。通常、ユーザーは一度に一つの範囲しか選択しませんが、ユーザーが複数の範囲を選択することも可能です (例: `Control` キーを使用するなど)。範囲は `range` オブジェクトとして選択範囲から取得することができます。範囲オブジェクトは DOM 経由で作成することもでき、プログラムによって選択範囲に追加したり削除したりすることができます。

仕様書
---

| Specification |
| --- |
| Selection API # selection-interface |

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

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

関連情報
----

* `Window.getSelection`, `Document.getSelection`, `Range`
* 選択関連イベント: `selectionchange` および `selectstart`
* HTML の input は、選択範囲を操作するための、よりシンプルなヘルパー API を提供しています。（`HTMLInputElement.setSelectionRange()` を参照）
* `Document.activeElement`, `HTMLElement.focus`, `HTMLElement.blur`


IDBTransaction - Web API

IDBTransaction
==============

**`IDBTransaction`** は IndexedDB API のインターフェイスで、イベントハンドラー属性を使用してデータベース上の静的で非同期のトランザクションを提供します。すべてのデータの読み書きはトランザクション内で行われます。`IDBDatabase` を使用してトランザクションを開始し、`IDBTransaction` を使用してトランザクションのモードを設定し (例 `readonly` または `readwrite`)、`IDBObjectStore` にアクセスしてリクエストを作成します。`IDBTransaction` オブジェクトを使用してトランザクションを中止することもできます。

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

EventTarget

IDBTransaction
トランザクションは、最初のリクエストが発行された時ではなく、トランザクションが生成されたときに開始します。例えば、次のものを考えてください。

```js
var trans1 = db.transaction("foo", "readwrite");
var trans2 = db.transaction("foo", "readwrite");
var objectStore2 = trans2.objectStore("foo");
var objectStore1 = trans1.objectStore("foo");
objectStore2.put("2", "key");
objectStore1.put("1", "key");
```

このコードが実行された後で、オブジェクトストアには "2" が含まれているはずであり、これは `trans2` が `trans1` の後に実行されるからです。

トランザクションの失敗
-----------

トランザクションは一定数の理由で失敗することがあり、(ユーザーエージェントのクラッシュを除いて) すべての場合に `abort` コールバックを起動します。

* 不正な要求による失敗。例えば、`add()` で同じキーを 2 回追加しようとしたり、`put()` で一意性制約に反して同じインデックスキーを追加しようとした場合。これは要求のエラーを起こし、このエラーはトランザクションのエラーとして伝搬し、これによりトランザクションがアボートします。これは、要求の `error` イベントで `preventDefault()` を用いることで回避できます。
* スクリプトによる明示的な `abort()` の呼び出し。
* 要求の `success` / `error` ハンドラー内での補足されない例外。
* I/O エラー (ディスクへの書き込みの失敗や、他の OS / ハードウェアのエラーなど)
* 制限の超過。
* ユーザーエージェントのクラッシュ。
Firefox における永続性の保証
------------------

Firefox 40 以降、IndexedDB のトランザクションはパフォーマンスを向上させるために永続性の保証が緩くなりました。(Firefox バグ 1112702 を参照してください) これまでは、`readwrite` のトランザクションでは `IDBTransaction.oncomplete` (en-US) は全てのデータがディスクに書き込まれたことが保証されてからのみ発火していました。Firefox 40+ では、`complete` イベントは OS にデータの書き込みを指示した後発火しますが、データが実際にディスクに書き込まれるより前の可能性があります。`complete` イベントは以前より早く通知されますが、データがディスクに書き込まれるより前にシステムの電源が失われたり、OS がクラッシュしたりすると、小さい確率でトランザクション全体が失われます。このような壊滅的な事象はほとんど起こらないため、ほとんどの利用者は心配しなくていいでしょう。

何らかの理由で永続性を保証する必要がある場合 (たとえば、後で再計算できない重要なデータを保存しようとしている場合) 実験的な (標準でない) `readwriteflush` モードを利用してトランザクションを生成することで、`complete` イベントを通知する前にディスクへ書き込むことを強制することができます。(`IDBDatabase.transaction` を参照してください)

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

`IDBTransaction.db` 読取専用

このトランザクションが紐づいているデータベースへの接続です。

`IDBTransaction.error` 読取専用

トランザクションが失敗したとき、発生したエラーの種類を表す `DOMException` を返します。トランザクションが完了していないとき、完了して正常にコミットしたとき、`IDBTransaction.abort()` 関数によりアボートされたときは `null` です。

`IDBTransaction.mode` 読取専用

トランザクションの対象のオブジェクトストア内のデータへのアクセスを隔離するためのモードです。デフォルト値は `readonly` です。

`IDBTransaction.objectStoreNames` 読取専用

トランザクションに関連付いた `IDBObjectStore` の名前を格納した `DOMStringList` を返します。

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

`EventTarget` から継承します。

`IDBTransaction.abort()`

このトランザクションに関連付いたデータベース内のオブジェクトへの変更をロールバックします。このトランザクションがアボート済または完了済のときは、このメソッドは `error` イベントを発火します。

`IDBTransaction.objectStore()`

このトランザクションの対象に含まれるオブジェクトストアを表す `IDBObjectStore` オブジェクトを返します。

`IDBTransaction.commit()`

進行中のトランザクションをコミットします。なお、このメソッドは通常呼ばれる *必要* はありません。進行中の要求が全て満たされ、新しい要求がなされなかったとき、トランザクションは自動的にコミットされます。`commit()` は、進行中の要求からのイベントが処理されるのを待たずにコミット処理を開始するために使用できます。

イベント
----

`addEventListener()` を用いるか、このインターフェイスの `oneventname` プロパティにイベントリスナーを代入することにより、これらのイベントをリッスンします。

`abort`

`IndexedDB` のトランザクションがアボートされたとき発火します。
 `onabort` (en-US) プロパティからも利用可能です。

`complete`

 トランザクションが正常に完了したとき発火します。
 `oncomplete` (en-US) プロパティからも利用可能です。

`error`

 要求がエラーを返し、イベントがトランザクションオブジェクトに伝搬したとき発火します。
 `onerror` (en-US) プロパティからも利用可能です。

モード定数
-----

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

**警告:** これらの定数はもう利用可能ではありません。Gecko 25 で削除されました。かわりに、これらの文字列定数を直接使用するべきです。(Firefox バグ 888598)

トランザクションはこれらの 3 種類のモードのうち 1 個を持つことができます。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `READ_ONLY` | `"readonly"`(Chrome では 0) | データの読み取りができますが、変更はできません。 |
| `READ_WRITE` | `"readwrite"` (Chrome では 1) | 変更対象のデータストア内のデータの読み書きができます。 |
| `VERSION_CHANGE` | `"versionchange"` (Chrome では 2) | オブジェクトストアやインデックスの作成や削除を含む任意の操作を行えます。このモードは、`IDBDatabase` オブジェクトの `setVersion()` メソッドにより開始されたトランザクションでバージョン番号を更新する用です。このモードのトランザクションは、他のトランザクションと並行で実行することはできません。このモードのトランザクションは、"upgrade transactions" と呼ばれます。 |

これらの定数は現在非推奨ですが、後方互換性を維持するために必要に応じてこれらの定数を使用することができます。(Chrome では、バージョン 21 で変更がありました) これらのオブジェクトが利用できなくなっている場合に備え、以下のような保守的なコードを書くべきです。

```js
var myIDBTransaction = window.IDBTransaction ||
  window.webkitIDBTransaction || { READ\_WRITE: "readwrite" };
```

例
-

次のコードスニペットでは、我々のデータベース上で読み書きのトランザクションを開き、オブジェクトストアにデータを追加します。成功または失敗した時にトランザクションの結果を知らせるため、トランザクションにアタッチしている関数にも注目してください。動く例全体は、To-do Notifications アプリケーション (動く例を見る) を見てください｡

```js
// 我々のデータベースを開きましょう
var DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = function (event) {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に保存します｡
  // これは後でたくさん使います｡
  db = DBOpenRequest.result;

  // データベースにデータを追加します
  addData();
};

function addData() {
  // IDB に挿入する新しいオブジェクトを作成します
  var newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // 読み書きのトランザクションを開き、データの追加の準備をします
  var transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くことに成功したら報告します
  transaction.oncomplete = function (event) {
    note.innerHTML +=
      "<li>トランザクション完了 : データベースの変更が完了しました。</li>";
  };

  transaction.onerror = function (event) {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。重複するアイテムは許されません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成します
  var objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを加えます
  var objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = function (event) {
    // 要求の成功を報告します (これは DB に項目が正常に保存されたという
    // ことではありません。これの確認には、transaction.oncomplete が必要です)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # transaction |

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

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

関連情報
----

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


VRDisplayEvent - Web API

VRDisplayEvent
==============

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

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

**`VRDisplayEvent`** は WebVR API のインターフェイスで、 WebVR 関連イベントのイベントオブジェクトを表します（WebVR ウインドウ拡張機能のリストを参照）。

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

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

`VRDisplayEvent()`
非推奨

Non-standard

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

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

*`VRDisplayEvent` は、親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用
Non-standard

このイベントに関連付けられた `VRDisplay` 。

`VRDisplayEvent.reason`
非推奨
 読取専用
Non-standard

イベントが発生した人間が読める理由。

例
-

```js
window.addEventListener("vrdisplaypresentchange", (e) => {
  console.log(
    `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
  );
});
```

仕様書
---

このインターフェイスは古い 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


PerformanceLongTaskTiming - Web API

PerformanceLongTaskTiming
=========================

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

Long Tasks API の **`PerformanceLongTaskTiming`** インターフェイスは、長いタスクのインスタンスを報告します。

PerformanceEntry

PerformanceLongTaskTimingプロパティ
-----

`PerformanceLongTaskTiming.attribution` 読取専用

`TaskAttributionTiming` インスタンスのシーケンスを返します。

仕様書
---

| Specification |
| --- |
| Long Tasks API # sec-PerformanceLongTaskTiming |

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

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


CustomElementRegistry - Web API

CustomElementRegistry
=====================

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
**`CustomElementRegistry`** インターフェイスは、カスタム要素の登録と、登録された要素を照会するためのメソッドを提供します。このインスタンスを取得するには、`window.customElements` プロパティを使用してください。

メソッド
----

`CustomElementRegistry.define()`

新しいカスタム要素を定義します。

`CustomElementRegistry.get()`

名前付きカスタム要素のコンストラクターを返します。カスタム要素が定義されていない場合は `undefined` を返します。

`CustomElementRegistry.upgrade()`

シャドウルートに接続する前であっても、直接カスタム要素をアップグレードします。

`CustomElementRegistry.whenDefined()`

指定された名前でカスタム要素が定義されたときに解決する空のプロミスを返します。そのようなカスタム要素が既に定義されていた場合、返されたプロミスは即座に履行状態になります。

例
-

以下のコードは word-count-web-component という例 (ライブデモも見てください) から持ってきています。カスタム要素のクラスを作成した後に、 `CustomElementRegistry.define()` メソッドを使用してカスタム要素を定義していることに注意してください。

```js
// 要素のクラスを作成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクターでは常に super を最初に呼び出してください
    super();

    // 要素の親要素の語数を数える
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent;
      return text.split(/\s+/g).length;
    }

    var count = "Words: " + countWords(wcParent);

    // シャドウルートを生成
    var shadow = this.attachShadow({ mode: "open" });

    // テキストノードを生成し、語数を追加
    var text = document.createElement("span");
    text.textContent = count;

    // シャドウルートに追加
    shadow.appendChild(text);

    // 要素の内容が変化したとき、語数を更新
    setInterval(function () {
      var count = "Words: " + countWords(wcParent);
      text.textContent = count;
    }, 200);
  }
}

// 新しい要素を定義
customElements.define("word-count", WordCount, { extends: "p" });
```

**メモ:** CustomElementsRegistry は `Window.customElements` プロパティを通して利用可能です。

仕様書
---

| Specification |
| --- |
| HTML Standard # custom-elements-api |

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

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


Event - Web API

Event
=====

**`Event`** インターフェイスは DOM で発生するイベントを表します。

ユーザーの操作によって発生するイベント（マウスボタンのクリック、キーボードを叩くなど）もありますし、非同期タスクの進捗を表すための API によって生成されるイベントもあります。要素の `HTMLElement.click()` の呼び出しや、イベントを定義し、 `EventTarget.dispatchEvent()` を使用して指定されたターゲットに送信するなどのようにプログラムから起動されるものもあります。

イベントには様々な型があり、イベントによっては基本の `Event` インターフェイスを基にした他のインターフェイスを使用することもあります。 `Event` 自体は、すべてのイベントで共通のプロパティやメソッドを持っています。

多くの DOM 要素は、これらのイベントを受け入れる（または「待ち受けする」）ように設定することができ、それに応じてコードを実行してイベントを処理する（または「取り扱う」）ことができます。イベントハンドラーはふつう、様々な HTML 要素（`<button>`, `<div>`, `<span>`, など）に `EventTarget.addEventListener()` を使用して結び付けられ（または「装着され」）、これが一般に古い HTML のイベントハンドラー属性を使用する方法を置き換えています。さらに、このようなハンドラーは正しく追加されたら、必要に応じて `removeEventListener()` を使用して切り離すことができます。

**メモ:** 1 つの要素が、まったく同じイベントに対して複数のハンドラーを持つこともできます。特に、別々の独立したコードモジュールが、それぞれ独立した目的のためにハンドラーを装着する場合（例えば、広告モジュールと統計モジュールの両方がビデオ視聴を監視しているウェブページ）です。

数多くの入れ子になった要素があり、それぞれに独自のイベントハンドラーがあった場合、イベントの処理はとても複雑になります。特に、親要素が子要素と全く同じイベントを受け取る場合、「空間的に」重なり合っているので、技術的にはイベントは両方で発生し、そのようなイベントの処理順序は、トリガーされた各ハンドラーのイベントのバブリングとキャプチャの設定次第で決まります。

Event を基にしたインターフェイス
-------------------

以下のリストは `Event` インターフェイスを基にしたインターフェイスの一覧であり、 MDN API リファレンスのそれぞれのドキュメントにリンクしています。

なお、すべてのイベントインターフェイスは、名称の末尾が "Event" になっています。

* `AnimationEvent`
* `AudioProcessingEvent`
非推奨
* `BeforeUnloadEvent`
* `BlobEvent`
* `ClipboardEvent`
* `CloseEvent`
* `CompositionEvent`
* `CustomEvent`
* `DeviceMotionEvent`
* `DeviceOrientationEvent`
* `DragEvent`
* `ErrorEvent`
* `FetchEvent`
* `FocusEvent`
* `FontFaceSetLoadEvent`
* `FormDataEvent`
* `GamepadEvent`
* `HashChangeEvent`
* `HIDInputReportEvent`
* `IDBVersionChangeEvent`
* `InputEvent`
* `KeyboardEvent`
* `MediaStreamEvent` (en-US)
非推奨
* `MessageEvent`
* `MouseEvent`
* `MutationEvent`
非推奨
* `OfflineAudioCompletionEvent`
* `PageTransitionEvent`
* `PaymentRequestUpdateEvent`
* `PointerEvent`
* `PopStateEvent`
* `ProgressEvent`
* `RTCDataChannelEvent`
* `RTCPeerConnectionIceEvent`
* `StorageEvent`
* `SubmitEvent`
* `SVGEvent`
非推奨
* `TimeEvent` (en-US)
* `TouchEvent`
* `TrackEvent`
* `TransitionEvent`
* `UIEvent`
* `WebGLContextEvent` (en-US)
* `WheelEvent`
コンストラクター
--------

`Event()`

`Event` オブジェクトを生成して、呼び出し元に返します。

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

`Event.bubbles` 読取専用

論理値で、イベントが DOM を通してバブリングするかどうかを示します。

`Event.cancelable` 読取専用

論理値で、イベントがキャンセル可能かを示します。

`Event.composed` 読取専用

論理値で、シャドウ DOM と 通常の DOM の間の境界を越えてイベントがバブリングできるかどうかを示します。

`Event.currentTarget` 読取専用

イベントが現在登録されているターゲットへの参照。これは、現在イベントの送信先として予定されているオブジェクトです。これは*再ターゲティング*によって、途中で変更される可能性があります。

`Event.defaultPrevented` 読取専用

このイベントをキャンセルするために `event.preventDefault()` が呼び出されたかどうかを示します。

`Event.eventPhase` 読取専用

イベントフローのどのフェーズで処理されているかを示します。 `NONE`, `CAPTURING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` のうちのいずれかの数値です。

`Event.srcElement`
Non-standard

`Event.target` の、(古いバージョンの Microsoft Internet Explorer 由来の) 標準外の別名であり、ウェブの互換性の目的で一部の他のブラウザーでも対応が始められています。

`Event.target` 読取専用

イベントが最初に送出されたターゲットへの参照。

`Event.timeStamp` 読取専用

イベントが生成された時刻をミリ秒単位で示します。仕様書ではこの値を元期からの経過時間としていますが、実際のブラウザーでの定義は様々です。また、値を `DOMHighResTimeStamp` に変更する作業が進行中です。

`Event.type` 読取専用

イベントの種類を識別する名前です。

### 古い標準外のプロパティ

`Event.cancelBubble`
非推奨

`Event.stopPropagation()` の過去の別名であり、そちらを使用してください。イベントハンドラーから戻る前に値 `true` を設定すると、イベントの伝播を抑制します。

`Event.explicitOriginalTarget`
Non-standard
 読取専用

イベントの明確な最初のターゲットです。

`Event.originalTarget`
Non-standard
 読取専用

イベントの再ターゲティング前の最初のターゲットです。

`Event.returnValue`
非推奨

過去のプロパティで、既存のサイトが動作するように対応されているものです。代わりに `Event.preventDefault()` および `Event.defaultPrevented` を使用してください。

`Event.scoped` 読取専用
非推奨

論理値で、指定されたイベントがシャドウルートを通過して標準 DOM までバブリングするかどうかを示します。代わりに `composed` を使用してください。

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

`Event.composedPath()`

（リスナーが呼び出されるオブジェクトへの）イベントのパスを返します。これはシャドウルートの `ShadowRoot.mode` が閉じた状態で作成されたシャドウツリーのノードは含みません。

`Event.preventDefault()`

（キャンセル可能な場合）イベントをキャンセルします。

`Event.stopImmediatePropagation()`

この特定のイベントにおいて、他のすべてのイベントリスナーの呼び出しを防止します。これには、同じ要素に装着されたリスナーだけでなく、後で（例えばキャプチャ段階で）到達する要素に装着されたリスナーも含みます。

`Event.stopPropagation()`

この DOM 内でこれ以上イベントが伝播することを停止します。

### 非推奨のメソッド

`Event.initEvent()`
非推奨

生成されたイベントの値を初期化します。イベントがすでに配信されている場合は、何も行いません。代わりにコンストラクター (`Event()`) を使用してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-event |

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

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

関連情報
----

* 利用できるイベントの種類: イベントリファレンス
* イベントターゲットの比較 (`target` vs. `currentTarget` vs. `relatedTarget` vs. `originalTarget`)
* カスタムイベントの生成と発行


HTMLParamElement - Web API

HTMLParamElement
================

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

**`HTMLParamElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて） `<param>` 要素を操作するための特別なプロパティを提供し、 `<object>` 要素の引数として機能するキーと値の組を表します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLParamElement.name`
非推奨

文字列で、引数の名前を表します。 `name` 属性を反映しています。

`HTMLParamElement.value`
非推奨

文字列で、この引数に関連付けられた値を表します。 `value` 属性を反映しています。

`HTMLParamElement.type`
非推奨

文字列で、 `valueType` が `"ref"` の値であった場合の引数の型を示します。 `type` 属性を反映しています。

`HTMLParamElement.valueType`
非推奨

文字列で、 `value` の型を表します。これは `valuetype` 属性を反映しており、値は `"data"`, `"ref"`, `"object"` のいずれかになります。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlparamelement |

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

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

関連情報
----

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


HTMLPreElement - Web API

HTMLPreElement
==============

**`HTMLPreElement`** インターフェイスは、（継承によって利用できる `HTMLElement` インターフェイスのものに加えて）整形済みテキストのブロック (`<pre>`) を操作するための固有のプロパティやメソッドを公開します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLPreElement.width`
非推奨

`long` 値で、古い `width` 属性を反映し、`<pre>` 要素の固定長の長さを指定します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlpreelement |

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

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

関連情報
----

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


VRStageParameters - Web API

VRStageParameters
=================

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

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

**`VRStageParameters`** は WebVR API のインターフェイスで，ルームスケール体験に対応している機器用にステージエリアを記述する値を表現しています。

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

このインターフェイスには `VRDisplay.stageParameters` プロパティを通じてアクセスできます。

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

`VRStageParameters.sittingToStandingTransform`
非推奨
 読取専用
Non-standard

`VRFrameData` の座位空間ビュー行列を立位空間に変換する行列を格納しています。

`VRStageParameters.sizeX`
非推奨
 読取専用
Non-standard

プレイ領域境界の幅を、メートル単位で返します。

`VRStageParameters.sizeY`
非推奨
 読取専用
Non-standard

プレイ領域境界の奥行きを、メートル単位で返します。

例
-

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

navigator.getVRDisplays().then((displays) => {
  vrDisplay = displays[0];
  const stageParams = vrDisplay.stageParameters;
  // stageParams is a VRStageParameters object

  if (stageParams === null) {
    info.textContent =
      "Your VR Hardware does not support room-scale experiences.";
  } else {
    info.innerHTML =
      `<strong>Display stage parameters</strong><br>` +
      `Sitting to standing transform: ${stageParams.sittingToStandingTransform}<br>` +
      `Play area width (m): ${stageParams.sizeX}<br>` +
      `Play area depth (m): ${stageParams.sizeY}`;
  }
});
```

仕様書
---

このインターフェイスは古い 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


DeviceOrientationEvent - Web API

DeviceOrientationEvent
======================

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

**`DeviceOrientationEvent`** は端末方向イベントのインターフェイスで、ウェブ開発者にウェブページを実行する端末の物理的な方向からの情報を提供します。

Event

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

`DeviceOrientationEvent.DeviceOrientationEvent()`

新しい `DeviceOrientationEvent` を作成します。

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

`DeviceOrientationEvent.absolute` 読取専用

論理値で、端末が絶対に方向データを提供するかどうかを示します。

`DeviceOrientationEvent.alpha` 読取専用

数値で、端末の Z 軸の回転量を表し、 0 （含む）から 360 （含まない）までの範囲の値で表します。

`DeviceOrientationEvent.beta` 読取専用

数値で、端末の X 軸の回転量を表し、 -180 （含む）から 180 （含まない）までの範囲の値で表します。これは端末の前後方向の動きを表します。

`DeviceOrientationEvent.gamma` 読取専用

数値で、端末の Z 軸の回転量を表し、 -90 （含む）から 90 （含まない）までの範囲の値で表します。これは端末の左右方向の動きを表します。

`DeviceOrientationEvent.webkitCompassHeading`
Non-standard
 読取専用

数値で、ワールドシステムの Z 軸を中心とした端末の動きと北の方向との差を表し、 0 から 360 の範囲の値で度数で表します。

`DeviceOrientationEvent.webkitCompassAccuracy`
Non-standard
 読取専用

コンパスの精度で、偏差が正の値または負の値を意味しています。通常は 10 です。

例
-

```js
window.addEventListener("deviceorientation", (event) => {
  console.log(`${event.alpha} : ${event.beta} : ${event.gamma}`);
});
```

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # deviceorientation |

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

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

関連情報
----

* `deviceorientation`
* `DeviceMotionEvent`
* `devicemotion`
* 端末の方向の検出
* 方向および動きとして示されるデータ


PerformanceMark - Web API

PerformanceMark
===============

**`PerformanceMark`** は `entryType` の "`mark`" を持つ`PerformanceEntry` オブジェクトの抽象インターフェイスです。
 このタイプのエントリは、`performance.mark()` を呼び出して、ブラウザーの*パフォーマンスタイムライン*に*名前付き* `DOMHighResTimeStamp` (*mark*) を追加することによって作成されます。

PerformanceEntry

PerformanceMarkプロパティ
-----

このインターフェイスはプロパティを持ちませんが、以下のようにプロパティを修飾/制約することで以下の `PerformanceEntry` プロパティを拡張します。

`PerformanceEntry.entryType`

"`mark`" を返します。

`PerformanceEntry.name`

マークが`performance.mark()` を呼び出して作成されたときに付けられた名前を返します。

`PerformanceEntry.startTime`

`performance.mark()` が呼び出されたときに `DOMHighResTimeStamp` を返します。

`PerformanceEntry.duration`

"`0`" を返します (マークには*期間*がありません)

メソッド
----

このインターフェイスにはメソッドがありません。

例
-

ユーザータイミング API の使用 (en-US)の例を参照してください。

仕様書
---

| Specification |
| --- |
| User Timing # performancemark |

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

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

あわせて参照
------

* User Timing (Overview) (en-US)
* Using the User Timing API (en-US)


Presentation API - Web API

Presentation API
================

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

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

Presentation API は、(ウェブブラウザーなどの) ユーザーエージェントがウェブコンテンツをプロジェクターやネットワークで接続されたテレビジョンなどの大型プレゼンテーションデバイスに効率よく表示できるようにします。対応しているマルチメディアデバイスには、HDMI や DVI などの有線接続のディスプレイも、DLNA、Chromecast、AirPlay、Miracast を用いた無線接続のディスプレイもあります。

![1-UA モードでは操作ページと表示ページをディスプレイに出力する前に一緒に読み込みます。2-UA モードではそれらを Presentation Control Protocol を用いて別々に読み込みます。](/ja/docs/Web/API/Presentation_API/presentation_mode_illustration.png)

一般に、ウェブページは Presentation Controller API を用いてプレゼンテーションデバイスにレンダリングするウェブコンテンツを指定し、プレゼンテーションセッションを開始します。表示されるウェブコンテンツは、Presentation Receiver API を用いてセッションの状態を取得します。メッセージベースのチャンネルを持つ操作ページと受信ページの両方を提供することで、ウェブ開発者はそれらの 2 ページ間のやり取りを実装できます。

プレゼンテーションデバイスが提供する接続方法によって、操作ページと受信ページは同一のユーザーエージェントでレンダリングされるか、別のユーザーエージェントでレンダリングされます。

* 1-UA モードのデバイスでは、両方のページが同一のユーザーエージェントで読み込まれます。しかし、受信ページのレンダリング結果は対応しているリモートレンダリングプロトコルを用いてプレゼンテーションデバイスに送られます。
* 2-UA モードのデバイスでは、受信ページは直接プレゼンテーションデバイスで読み込まれます。操作を行うユーザーエージェントは、プレゼンテーションセッションを制御し、2 ページ間でメッセージを送信するため、対応しているプレゼンテーション制御プロトコルを用いてプレゼンテーションデバイスとやり取りします。
インターフェイス
--------

`Presentation` (en-US)

操作を行うブラウジングコンテキストでは、`Presentation` インターフェイスが外部の画面へのプレゼンテーションを開始する際のブラウザーのデフォルトの挙動を上書きする方法を提供します。受信を行うブラウジングコンテキストでは、`Presentation` インターフェイスは利用可能なプレゼンテーションの接続へのアクセスを提供します。

`PresentationRequest` (en-US)

操作を行うブラウジングコンテキストで生成されたプレゼンテーションを開始または再接続します。

`PresentationAvailability`

PresentationAvailability オブジェクトは、利用可能なプレゼンテーション用の画面に紐付けられ、プレゼンテーションの要求に対する *プレゼンテーション用の画面の利用可能性* を表します。

`PresentationConnectionAvailableEvent` (en-US)

`PresentationConnectionAvailableEvent` は、オブジェクトに紐づく接続が生成された時、`PresentationRequest` (en-US) で発火します。

`PresentationConnection` (en-US)

それぞれのプレゼンテーションの接続は、PresentationConnection (en-US) オブジェクトで表されます。

`PresentationConnectionCloseEvent` (en-US)

`PresentationConnectionCloseEvent` は、プレゼンテーションの接続が `closed` 状態になった時発火します。

`PresentationReceiver` (en-US)

PresentationReceiver (en-US) は、受信を行うブラウジングコンテキストが操作を行うブラウジングコンテキストへのアクセスとやり取りをできるようにします。

`PresentationConnectionList` (en-US)

`PresentationConnectionList` は、終了していないプレゼンテーションの接続のコレクションを表します。これは、新しいプレゼンテーションの接続が利用可能になったイベントのモニターでもあります。

例
-

以下の例のコードは、Presentation API の主な機能の使用法を示します。`controller.html` で操作器を実装し、`presentation.html` でプレゼンテーションを実装します。両方のページがドメイン `https://example.org` (`https://example.org/controller.html` and `https://example.org/presentation.html`) から配信されます。これらの例では、操作ページは一度に 1 本のプレゼンテーションを管理していることを仮定しています。詳細は、例のコード内のコメントを参照してください。

### プレゼンテーション画面の利用可能性を監視する

`controller.html` で:

```html
<button id="presentBtn" style="display: none;">プレゼンテーション開始</button>
<script>
 // 1 個以上のプレゼンテーション画面が利用可能なら、プレゼンテーション開始ボタンを可視にします
 const presentBtn = document.getElementById("presentBtn");

 // 相対のプレゼンテーション URL (たとえば "presentation.html") も使用可能です
 const presUrls = [
 "https://example.com/presentation.html",
 "https://example.net/alternate.html",
 ];

 // 画面の利用可能性に応じて、プレゼンテーション開始ボタンを表示したり隠したりします
 const handleAvailabilityChange = (available) => {
 presentBtn.style.display = available ? "inline" : "none";
 };

 // プレゼンテーション画面の利用可能性がわかるとすぐに Promise が解決します。
 const request = new PresentationRequest(presUrls);
 request
 .getAvailability()
 .then((availability) => {
 // 利用可能性オブジェクトが生きている間ずっと、操作を行うユーザーエージェントにより
 // availability.value が最新に保たれる可能性があります。ウェブ開発者は、
 // 不要になったらすぐにオブジェクトを破棄することが推奨されます。
 handleAvailabilityChange(availability.value);
 availability.onchange = () => {
 handleAvailabilityChange(availability.value);
 };
 })
 .catch(() => {
 // このプラットフォームは利用可能性の監視に対応しておらず、
 // プレゼンテーション画面の探索は request.start() が呼ばれるまで行われません。
 // 簡単のためにデバイスが利用可能なように見せかけます。
 // ボタンの第 3 の状態を実装してもいいでしょう。
 handleAvailabilityChange(true);
 });
</script>
```

### 新しいプレゼンテーションを開始する

`controller.html` で:

```html
<script>
 presentBtn.onclick = () => {
 // 新しいプレゼンテーションを開始します
 request
 .start()
 // 成功時、プレゼンテーションへの接続が setConnection に渡されます。
 .then(setConnection);
 // 失敗時は、ユーザーが選択ダイアログをキャンセルしたか、画面が見つかりませんでした。
 };
</script>
```

### プレゼンテーションに再接続する

`controller.html` ファイルで:

```html
<button id="reconnectBtn" style="display: none;">再接続</button>
<script>
 const reconnect = () => {
 // 存在するなら、localStorage から presId を読み込みます
 const presId = localStorage["presId"];
 // プレゼンテーションに再接続するには、presId が必要です。
 if (presId) {
 request
 .reconnect(presId)
 // 成功時、プレゼンテーションへの新しい接続が setConnection に渡されます。
 .then(setConnection);
 // presUrl と presId に対応する接続が見つからなかったか、エラーが発生しました。
 }
 };
 // 操作器を開いた時、自動的に再接続します。
 document.addEventListener("DOMContentLoaded", reconnect);
 // 手動での再接続もできるようにします。
 reconnectBtn.onclick = reconnect;
</script>
```

### 操作を行うユーザーエージェントによるプレゼンテーションの開始

`controller.html` ファイルで:

```html
<script>
 navigator.presentation.defaultRequest = new PresentationRequest(presUrls);
 navigator.presentation.defaultRequest.onconnectionavailable = (evt) => {
 setConnection(evt.connection);
 };
</script>
```

ページで `presentation.defaultRequest` を設定することで、操作を行うユーザーエージェントがプレゼンテーションを開始する際に用いる `PresentationRequest` を指定できます。

### 接続状態の監視とデータのやり取り

`controller.html` で:

```html
<button id="disconnectBtn" style="display: none;">切断</button>
<button id="stopBtn" style="display: none;">停止</button>
<button id="reconnectBtn" style="display: none;">再接続</button>
<script>
 let connection;

 // 接続中のプレゼンテーションがあるなら、切断ボタンと停止ボタンを表示します
 const stopBtn = document.querySelector("#stopBtn");
 const reconnectBtn = document.querySelector("#reconnectBtn");
 const disconnectBtn = document.querySelector("#disconnectBtn");

 stopBtn.onclick = () => {
 connection?.terminate();
 };

 disconnectBtn.onclick = () => {
 connection?.close();
 };

 function setConnection(newConnection) {
 // 再接続を試みているのでなければ、既存のプレゼンテーションから切断します
 if (
 connection &&
 connection !== newConnection &&
 connection.state !== "closed"
 ) {
 connection.onclose = undefined;
 connection.close();
 }

 // 新しい接続をセットし、プレゼンテーション ID を保存します
 connection = newConnection;
 localStorage["presId"] = connection.id;

 function showConnectedUI() {
 // ユーザーがプレゼンテーションの切断や終了をできるようにします
 stopBtn.style.display = "inline";
 disconnectBtn.style.display = "inline";
 reconnectBtn.style.display = "none";
 }

 function showDisconnectedUI() {
 disconnectBtn.style.display = "none";
 stopBtn.style.display = "none";
 reconnectBtn.style.display = localStorage["presId"] ? "inline" : "none";
 }

 // 接続の状態を監視します
 connection.onconnect = () => {
 showConnectedUI();

 // メッセージハンドラーを登録します
 connection.onmessage = (message) => {
 console.log(`メッセージを受信: ${message.data}`);
 };

 // プレゼンテーションページに最初のメッセージを送信します
 connection.send("Say hello");
 };

 connection.onclose = () => {
 connection = null;
 showDisconnectedUI();
 };

 connection.onterminate = () => {
 // 存在すれば、localStorage から presId を削除します
 delete localStorage["presId"];
 connection = null;
 showDisconnectedUI();
 };
 }
</script>
```

### 利用可能な接続の監視と挨拶

`presentation.html` で:

```js
const addConnection = (connection) => {
  connection.onmessage = (message) => {
    if (message.data === "Say hello") connection.send("hello");
  };
};

navigator.presentation.receiver.connectionList.then((list) => {
  list.connections.forEach((connection) => {
    addConnection(connection);
  });
  list.onconnectionavailable = (evt) => {
    addConnection(evt.connection);
  };
});
```

### メッセージとともにロケールの情報を渡す

`controller.html` ファイルで:

```html
<script>
 connection.send('{"string": "你好，世界!", "lang": "zh-CN"}');
 connection.send('{"string": "こんにちは、世界!", "lang": "ja"}');
 connection.send('{"string": "안녕하세요, 세계!", "lang": "ko"}');
 connection.send('{"string": "Hello, world!", "lang": "en-US"}');
</script>
```

`presentation.html` ファイルで:

```html
<script>
 connection.onmessage = (message) => {
 const messageObj = JSON.parse(message.data);
 const spanElt = document.createElement("SPAN");
 spanElt.lang = messageObj.lang;
 spanElt.textContent = messageObj.string;
 document.body.appendChild(spanElt);
 };
</script>
```

仕様書
---

| Specification |
| --- |
| Presentation API # interface-presentation |

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

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

関連情報
----

Presentation API polyfill に、W3C の Second Screen Working Group で標準化中の Presentation API 仕様書の JavaScript ポリフィルがあります。このポリフィルの主目的は、Presentation API が異なるプレゼンテーションの仕組みの上にどのように実装されうるかを探ることです。


HTMLDocument - Web API

HTMLDocument
============

歴史的な理由から、`Window` オブジェクトは `window.HTMLDocument` プロパティを持ち、その値は `Document` インターフェイスです。つまり、`HTMLDocument` は `Document` の別名と考えることができ、`HTMLDocument` のメンバーのドキュメントは `Document` インターフェイスのドキュメントの下で見つかります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldocument |

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

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


Audio Output Devices API - Web API

Audio Output Devices API
========================

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

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

**Audio Output Devices API** により、ウェブアプリケーションがユーザーに音声の再生に用いる出力デバイスを選択させることができます。

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

 オペレーティングシステムには、ユーザーが音声をスピーカーから再生するか、Bluetooth ヘッドセットから再生するか、もしくは他の音声出力デバイスから再生するかを選ぶことができる機能があるものが多いです。
 この API は、ウェブページ内でアプリケーションが同様の機能を提供することを可能にします。

権限ポリシーで許可されている場合でも、ユーザーは一部の出力デバイスから音声を再生するべきではない場所に居る可能性があるので、特定の音声出力デバイスへのアクセスには明示的なユーザーの許可が必要です。

 この API は、ドキュメントの `Permissions-Policy` HTTP ヘッダーの `speaker-selection` (en-US) ディレクティブによって許可されている場合、ユーザーが希望する音声出力デバイスを選択できるようにする `MediaDevices.selectAudioOutput()` メソッドを提供します。
 これにより選択されたデバイスはユーザーの許可が得られるので、`MediaDevices.enumerateDevices()` により列挙したり、`HTMLMediaElement.setSinkId()` により音声出力デバイスとして設定したりできるようになります。

 音声デバイスは、自由に接続したり切断したりできます。
 このような変化に対応したいアプリケーションは、`devicechange` イベントを監視し、`enumerateDevices()` を用いて `sinkId` が返されたデバイスに含まれているかを判定できます。
 これにより、たとえば、再生を停止したり再開したりできます。

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

### インターフェイスの拡張

Audio Output Devices API は以下の API を拡張し、以下の機能を追加します。

#### MediaDevices

`MediaDevices.selectAudioOutput()`

 このメソッドは、ユーザーに特定の音声出力デバイス、たとえばスピーカーやヘッドセットを選択させます。
 デバイスを選択すると、そのデバイスを使用するユーザーの許可が得られ、ID を含むそのデバイスの情報を返します。

#### HTMLMediaElement

`HTMLMediaElement.setSinkId()`

このメソッドは、出力用の音声デバイスの ID を設定し、許可が得られていればそのデバイスを使用するようにします。

`HTMLMediaElement.sinkId`

このプロパティは出力に使用されている音声デバイスの一意な ID を返します。デフォルトのユーザーエージェントデバイスが使用されている場合は空文字列を返します。

セキュリティの要件
---------

この API へのアクセスは、以下の制限を受けます。

* 全てのメソッドやプロパティは安全なコンテキストでのみ呼びだせます。
* `MediaDevices.selectAudioOutput()` はユーザーから選択されたデバイスを音声の出力先として使用する許可を得ます。
    + アクセスは HTTP の権限ポリシーの `speaker-selection` (en-US) により制限される可能性があります。
    + ユーザーによる一時的な有効化が必要です。
     このメソッドを呼び出すには、ユーザーがページまたは UI 要素を操作する必要があります。
* `HTMLMediaElement.setSinkId()` は許可された ID を音声の出力先として設定します。
    + アクセスは HTTP の権限ポリシーの `speaker-selection` (en-US) により制限される可能性があります。
    + デフォルト以外のデバイス ID を設定するにはユーザーの許可が必要です。
        - この許可は、`MediaDevices.selectAudioOutput()` によって開くプロンプトで選択することで得られます。
        - ユーザーが `MediaDevices.getUserMedia()` により既に同じグループのメディア入力デバイスを使用することを許可している場合、出力デバイスを使用する許可が暗黙的に得られます。

許可の状態は、Permissions API の `navigator.permissions.query()` に `speaker-selection` 権限を含む `permissionDescriptor` を渡すことで取得できます。

例
-

これは、ボタンのクリックにより呼び出される関数の中で `selectAudioOutput()` を用い、選択されたデバイスを音声の出力先に設定する例です。

 このコードは、まず `selectAudioOutput()` に対応しているかを確認します。対応している場合、それを用いて出力先を選択し、デバイス ID を返します。
 そして、音声をデフォルトの出力先を用いて再生し、`setSinkId()` を呼び出して出力先を選択されたデバイスに切り替えます。

```js
document.querySelector("#myButton").addEventListener("click", async () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log(
      "selectAudioOutput() に未対応か、安全なコンテキストではありません。",
    );
    return;
  }

  // デバイスを選択するためのプロンプトを表示する
  const audioDevice = await navigator.mediaDevices.selectAudioOutput();

  // audio 要素を作成し、デフォルトのデバイスで音声の再生を開始する
  const audio = document.createElement("audio");
  audio.src = "https://example.com/audio.mp3";
  audio.play();

  // 出力先を選択された音声出力デバイスに切り替える
  audio.setSinkId(audioDevice.deviceId);
});
```

出力の詳細を記録すると、たとえば以下の出力が得られます。

```js
console.log(
  `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
);
// audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
```

仕様書
---

| Specification |
| --- |
| Audio Output Devices API  |

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

### api.MediaDevices.selectAudioOutput

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

### api.HTMLMediaElement.setSinkId

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

### api.HTMLMediaElement.sinkId

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

### http.headers.Permissions-Policy.speaker-selection

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


クリップボード API - Web API

クリップボード API
===========

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
**クリップボード API** は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。

**メモ:** この API はウェブワーカーでは利用できません。（`WorkerNavigator` に公開されていません）。

この API は、 `document.execCommand()` を使用したクリップボードへのアクセスを置き換えるように設計されています。

**メモ:** **クリップボード**は、短期間のデータ保存やデータ転送に使用されるデータバッファで、文書間やアプリケーション間で使用することができます。
 通常、無名で一時的なデータバッファーとして実装されており、ペーストバッファーと呼ばれることもあります。環境内のほとんどまたはすべてのプログラムから定義されたプログラミングインターフェイスを通じてアクセス可能です。

一般的なアプリケーションでは、これらのインターフェイスに対して、キーバインド、メニュー選択などのユーザー入力を対応付けることでクリップボード機能にアクセスします。

クリップボードへのアクセス
-------------

`Clipboard` オブジェクトをインスタンス化して生成するのではなく、グローバル変数の `Navigator.clipboard` を通してシステムクリップボードにアクセスすることができます。

```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```

このスニペットはクリップボードからテキストを読み取り、最初に見つかった `editor` クラスを持つ要素に追加します。 `readText()` (および場合によっては `read()`) はクリップボードにテキストがないときには空文字列を返すので、このコードは安全です。

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

`Clipboard` 安全なコンテキスト用

システムクリップボードに対してテキストやデータを読み書きするインターフェイスを提供します。これは仕様書では「非同期クリップボード API」と呼ばれています。

`ClipboardEvent` 安全なコンテキスト用

クリップボードの変更に関する情報を提供するイベント、すなわち `cut`, `copy`, `paste` イベントを表します。これは仕様書では「クリップボードイベント API」と呼ばれています。

`ClipboardItem` 安全なコンテキスト用

データの読み書きの際に使用する単一項目形式を表します。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

関連情報
----

* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article


XSLTProcessor - Web API

XSLTProcessor
=============

**`XSLTProcessor`** は、XSLT スタイルシート変換を XML 文書に適用して、新しい XML 文書を出力として生成します。 XSLT スタイルシートをロードし、 `<xsl:param>` 引数の値を操作し、変換処理を文書に適用するメソッドを持っています。

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

`XSLTProcessor()` (en-US)

新しい `XSLTProcessor` を作成します。

メソッド
----

`XSLTProcessor.importStylesheet()` (en-US)

XSLT スタイルシートをインポートします。指定されたノードがドキュメントノードの場合は、完全な XSL Transform またはリテラルの結果要素の変換を渡すことができます。それ以外の場合は、`<xsl:stylesheet>` または `<xsl:transform>` 要素でなければなりません。

`XSLTProcessor.transformToFragment()` (en-US)

`XSLTProcessor.importStylesheet()` (en-US) 関数を使用してインポートしたスタイルシートを適用して、ノードソースを変換します。結果として得られる文書フラグメントの文書オーナーは所有者ノードです。

`XSLTProcessor.transformToDocument()` (en-US)

`XSLTProcessor.importStylesheet()` (en-US) 関数を使用してインポートされたスタイルシートを適用して、ノードソースを変換します。

結果のオブジェクトはスタイルシートのメソッド出力に依存します。

| メソッド出力 | 結果の型 |
| --- | --- |
| `html` | `HTMLDocument` |
| `xml` | `XMLDocument` |
| `text` | `XMLDocument` と単一のルート要素 `<transformiix:result>` に子としてテキストがついたもの |

`XSLTProcessor.setParameter()` (en-US)

インポートされた XSLT スタイルシートに引数を設定します。 (`<xsl:param>` の値を設定します)。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.getParameter()` (en-US)

XSLT スタイルシートから引数の値を取得します。 `namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.removeParameter()` (en-US)

パラメータが以前に設定されていた場合は削除します。これにより、`XSLTProcessor` はスタイルシートで指定されたパラメータの既定値を使用します。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.clearParameters()` (en-US)

`XSLTProcessor` からすべての設定パラメータを削除します。 `XSLTProcessor` は XSLT スタイルシートで指定されているデフォルトを使用します。

`XSLTProcessor.reset()` (en-US)

すべてのパラメータとスタイルシートを `XSLTProcessor` から削除します。

プロパティ
-----

*このインターフェイスにはプロパティがありません。*

例
-

1. 基本的な例
2. 高度な例
3. 追加の例
仕様書
---

| Specification |
| --- |
| DOM Standard # interface-xsltprocessor |

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

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

関連情報
----

* Mozilla JavaScript インターフェイスを使用した XSL 変換


InputEvent - Web API

InputEvent
==========

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`InputEvent`** インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。

Event

UIEvent

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

`InputEvent()`

`InputEvent` オブジェクトを作成します。

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

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

`InputEvent.data` 読取専用

文字列で、挿入された文字を返します。変更により挿入されたテキストがない（例えば文字を削除した）場合は、空文字列になることがあります。

`InputEvent.dataTransfer` 読取専用

編集可能なコンテンツに追加されたリッチテキストまたはプレーンテキストデータ、あるいは削除されたプレーンテキストデータに関する情報を保持する `DataTransfer` オブジェクトを返します。

`InputEvent.inputType` 読取専用

テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を返します。

`InputEvent.isComposing` 読取専用

論理値で、イベントが `compositionstart` の後かつ `compositionend` の前に発生したかを示す値を返します。

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

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

`InputEvent.getTargetRanges()`

入力イベントが取り消されない場合、DOM の変更に影響される静的範囲を配列で返します。

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # interface-InputEvent |
| UI Events # interface-inputevent |

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

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

関連情報
----

* `beforeinput` イベント
* `input` イベント


HTMLUnknownElement - Web API

HTMLUnknownElement
==================

**`HTMLUnknownElement`** インターフェイスは不正な HTML 要素である事を表します。`HTMLElement` インターフェイスを継承しますが、追加のメソッドやプロパティは実装しません。

プロパティ
-----

固有プロパティはありません。`HTMLElement` インターフェイスから継承するプロパティのみ利用可能です。

メソッド
----

固有メソッドはありません。`HTMLElement` インターフェイスから継承するメソッドのみ利用可能です。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlunknownelement |

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

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

関連情報
----

* このインターフェイスを持つ非標準要素及び廃止要素 : `<bgsound>` 、 `<isindex>` 、 `<multicol>` 、 `<nextid>` 、 `<rb>` 、 `<spacer>`


ストリーム API - Web API

ストリーム API
=========

ストリーム API を使用すると、 JavaScript がネットワーク経由で受信したデータのストリームにプログラムでアクセスし、開発者の希望どおりに処理できます。

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

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

ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。ブラウザーはメディア資産を受信する際にすでにこのような動作を行っています。動画はコンテンツのダウンロードが進むにつれてバッファーされ再生されますし、画像も読み込みが進むにつれて徐々に表示されることがあります。

しかし、この機能はこれまで JavaScript では利用できませんでした。以前は、ある種のリソース（動画やテキストファイルなど）を処理したい場合、ファイル全体をダウンロードして、適切な形式にデシリアライズされるのを待ち、それからすべてのデータを処理しなければなりませんでした。

ストリーム API を使えば、バッファーや文字列、blob などを生成する必要なく、利用できるようになったらすぐに、JavaScript で生のデータを少しずつ処理し始めることができます。

![ストリーム API の基本概念は、ネットワークからデータをいくつかのデータパケットに分割して取得することです。データは処理され、データパケットのストリームとしてブラウザーに送信されます。](/ja/docs/Web/API/Streams_API/concept.png)

さらに利点もあります。 ストリームの開始または終了の検出、ストリームの連鎖、エラー処理と必要に応じたストリームのキャンセル、ストリームの読み取り速度への対応が可能です。

ストリームの使い方は、レスポンスをストリームとして利用できるかどうかにかかっています。例えば、読み取りリクエストが成功すると返されるレスポンス本体は `ReadableStream` となり、`ReadableStream.getReader()` で作成したリーダーで読み取ることができます。

より複雑な用途では、例えばサービスワーカー内でデータを処理するために、 `ReadableStream()` コンストラクターを使用して独自のストリームを作成することができます。

`WritableStream` を使用してストリームにデータを書き込むこともできます。

**メモ:** ストリームの理論と実践の詳細については、ストリーム API の概念、読み取り可能なストリームの使用、読み取り可能なバイトストリームの使用、書き込み可能なストリームの使用の記事をご覧ください。

ストリームのインターフェイス
--------------

### 読み取り可能なストリーム

`ReadableStream`

読み取り可能なデータのストリームを表します。 Fetch API のレスポンスストリーム、または開発者定義のストリーム（独自の `ReadableStream()` コンストラクターなど）を処理するために使用できます。

`ReadableStreamDefaultReader`

ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。

`ReadableStreamDefaultController`

`ReadableStream` の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリーム向けではないストリーム用です。

### 書き込み可能なストリーム

`WritableStream`

シンク (sink) と呼ばれる宛先にストリーミングデータを書き込むための標準的な抽象化を提供します。このオブジェクトには、組み込みの背圧とキューイング機能があります。

`WritableStreamDefaultWriter`

データのチャンクを書き込み可能なストリームに書き込むために使用できる既定の書き込み可能なストリームのライターを表します。

`WritableStreamDefaultController`

`WritableStream` の状態を制御できるコントローラーを表します。 `WritableStream` を構築するとき、基になるシンクには、対応する `WritableStreamDefaultController` インスタンスが与えられて操作します。

### 変換ストリーム

`TransformStream`

ストリームオブジェクトのパイプチェーンを通して渡されるデータを変換するストリームオブジェクトの抽象化したものを表します。

`TransformStreamDefaultController`

変換ストリームに関連付けられた `ReadableStream` と `WritableStream` を操作するためのメソッドを提供します。

### 関連するストリームの API と操作

`ByteLengthQueuingStrategy`

ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略 (byte length queuing strategy) を提供します。

`CountQueuingStrategy`

ストリームを構築するときに使用できる組み込みのチャンクカウントキューイング戦略 (chunk counting queuing strategy) を提供します。

### 他の API の拡張

`Request`

新しい `Request` オブジェクトが構築されると、その `RequestInit` 辞書の `body` プロパティで `ReadableStream` を渡すことができます。 次に、この `Request` を `fetch()` に渡して、ストリームのフェッチを開始することができます。

`Response.body`

成功したフェッチリクエストによって返されたレスポンスの本体で、既定で `ReadableStream` として取り出すことができ、リーダーを装着することができます。

### ByteStream 関連のインターフェイス

`ReadableStreamBYOBReader`

開発者が提供するストリームデータの読み取りに使用できる BYOB（"bring your own buffer"、独自のバッファーを持ち込む）リーダー（独自の `ReadableStream()` コンストラクターなど）を表します。

`ReadableByteStreamController`

`ReadableStream` の状態と内部キューを制御するためのコントローラーを表します。 バイトストリームコントローラーは、バイトストリーム用のものです。

`ReadableStreamBYOBRequest`

`ReadableByteStreamController` 内のプルインリクエストを表します。

例
-

ストリーム API のドキュメントに合わせてサンプルのディレクトリーを作成しました。 mdn/dom-examples/streams を参照してください。例として、次のものがあります。

* Simple stream pump（単純なストリームポンプ）: この例は、 ReadableStream を使用してそのデータを別のストリームに渡す方法を示しています。
* Grayscale a PNG（PNG のグレースケール化）: この例は、PNG の ReadableStream をグレースケールに変換する方法を示しています。
* Simple random stream（単純なランダムストリーム）: この例は、カスタムストリームを使用してランダムな文字列を生成し、それらをチャンクとしてキューに入れてから、再度読み取る方法を示しています。
* Simple tee example（単純な tee の例）: この例は、単純なランダムストリームの例を拡張したもので、ストリームを tee 化して、両方の結果のストリームの独立して読み取る方法を示しています。
* Simple writer（単純なライター）: この例では、書き込み可能なストリームに書き込み、ストリームをデコードして、コンテンツを UI に書き込む方法を示します。
* Unpack chunks of a PNG（PNG のチャンクをアンパックする）: この例は、PNG ファイルのデータを PNG のチャンクのストリームに変換することにより、 `pipeThrough()` を使用して ReadableStream を他のデータ型のストリームに変換する方法を示します。

他の開発者による例

* Progress Indicators with Streams, Service Workers, & Fetch
仕様書
---

| Specification |
| --- |
| Streams Standard # rs-class |
| Streams Standard # ws-class |

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

### api.ReadableStream

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

### api.WritableStream

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

関連情報
----

* ストリーム API の概念
* 読み取り可能なストリームの使用
* 読み取り可能なバイトストリームの使用
* 書き込み可能なストリームの使用


BroadcastChannel - Web API

BroadcastChannel
================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel`** インターフェイスは、特定のオリジンの閲覧コンテキストが加入できる名前付きチャンネルを表します。これにより、同じオリジンの異なる文書間（異なるウィンドウ、タブ、フレーム、iframe）の通信を可能にします。 メッセージは、チャンネルに参加しているすべての `BroadcastChannel` オブジェクトで発生する `message` イベントを介して配信されます。

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

EventTarget

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

`BroadcastChannel()`

名前付きチャンネルにリンクするオブジェクトを作成します。

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

*このインターフェイスは、その親である `EventTarget` からもプロパティを継承します。*

`BroadcastChannel.name` 読取専用

チャンネルの名前を表す文字列を返します。

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

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

`BroadcastChannel.postMessage()`

同じチャンネルに参加しているそれぞれの `BroadcastChannel` オブジェクトに、任意の種類のオブジェクトのメッセージを送信します。

`BroadcastChannel.close()`

チャンネルオブジェクトを閉じます。 これは、新しいメッセージを取得しないことを示し、最終的にガベージコレクションされることを許可します。

イベント
----

`message`

 メッセージがチャンネルに到着したときに発生します。
 `onmessage` プロパティからも利用できます。

`messageerror`

 逆シリアル化できないメッセージが到着したときに発生します。
 `onmessageerror` プロパティからも利用できます。

仕様書
---

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

関連情報
----

* 閲覧コンテキスト間で通信するための、もう一つの重量級の方法: `ServiceWorker`.
* ブロードキャストチャンネル API の概要


USBOutTransferResult - Web API

USBOutTransferResult
====================

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) でのみ利用できます。

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

WebUSB API の `USBOutTransferResult` インターフェイスは、`USBDevice` インターフェイスの `transferOut()` および `controlTransferOut()` メソッドを呼び出した結果を提供します。これは、USB ホストから USB デバイスへのデータ転送の要求の結果を表します。

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

`USBOutTransferResult()`
Experimental

指定の `status` および `bytesWritten` フィールドを持つ新しい `USBOutTransferResult` オブジェクトを生成します。

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

`USBOutTransferResult.bytesWritten` 読取専用
Experimental

転送要求によりデバイスに送られたバイト数を返します。

`USBOutTransferResult.status` 読取専用
Experimental

転送要求の状態を返します。以下のいずれかです。

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferOut()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbouttransferresult |

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

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


WGSLLanguageFeatures - Web API

WGSLLanguageFeatures
====================

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

WebGPU API の **`WGSLLanguageFeatures`** インターフェイスは、この WebGPU の実装が対応している WGSL 言語の拡張を報告する Set 風オブジェクトです。

`WGSLLanguageFeatures` オブジェクトは `GPU.wgslLanguageFeatures` プロパティ経由で参照します。

**メモ:** API をサポートしているすべてのブラウザーの WebGPU ですべての WGSL 言語の拡張が使えるわけではありません。使うことにした拡張をすべて徹底的にテストすることを推奨します。

利用可能な機能
-------

利用可能な WGSL 言語の拡張は実装や物理デバイスによって異なる可能性があり、時間の経過によっても変わる可能性があります。そのため、ここでは列挙しません。完全なリストは、WGSL の仕様書内の WGSL 言語の拡張を参照してください。

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

以下のプロパティは、すべての読み取り専用の Set 風オブジェクトで使用可能です。

`size`
Experimental

集合に含まれる値の数を返します。

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

以下のメソッドは、すべての読み取り専用の Set 風オブジェクトで使用可能です。

`has()`
Experimental

指定の値の要素が集合に含まれるか否かを表す論理値を返します。

`values()`
Experimental

集合内の各要素の **値** を挿入した順に出力する新しいイテレーターオブジェクトを返します。

`keys()`
Experimental

`values()` の別名です。

`entries()`
Experimental

集合内の各要素に対応する **配列 `[value, value]`** が挿入した順に含まれる新しいイテレーターオブジェクトを返します。

`forEach()`
Experimental

集合内の各要素について挿入した順に指定のコールバック関数を 1 度ずつ呼び出します。

例
-

```js
if (!navigator.gpu) {
  throw Error("WebGPU に対応していません。");
}

const wgslFeatures = navigator.gpu.wgslLanguageFeatures;

// 集合のサイズを返す
console.log(wgslFeatures.size);

// values() を用いて集合のすべての値を走査する
const valueIterator = wgslFeatures.values();
for (const value of valueIterator) {
  console.log(value);
}

// ...
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpuwgsllanguagefeatures |

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

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

関連情報
----

* WebGPU API


HTMLLIElement - Web API

HTMLLIElement
=============

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

EventTarget

Node

Element

HTMLElement

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

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

`HTMLLIElement.type`
非推奨

文字列で、箇条書き記号の種類を `"disc"`, `"square"`, `"circle"` のいずれかで表します。リストの種別を定義する標準の方法は CSS の `list-style-type` プロパティによる方法なので、スクリプトから設定する場合は CSSOM のメソッドを使用してください。

`HTMLLIElement.value`

`long` 型で、 `<ol>` の内部での*リスト要素*の位置を順序で示します。これは HTML の `<li>` 要素の `value` 属性を反映しています。 `0` より小さくすることもできます。 `<li>` 要素が `<ol>` 要素の子である場合、このプロパティは意味を持ちません。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

関連情報
----

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


KeyboardLayoutMap - Web API

KeyboardLayoutMap
=================

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

**`KeyboardLayoutMap`** はキーボード API のインターフェイスで、読み取り専用のオブジェクトであり、特定の物理キーに関連付けられた文字列を取得するための関数を備えています。

`KeyboardLayoutMap` インスタンスは読み取り専用の `Map` 風オブジェクトであり、各キーはキーボード上の固有の物理キーを識別する文字列（「キーコード」）であり、対応する値は関連するキー属性値（キーボードレイアウトナドによって影響を受ける可能性があります）です。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

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

`KeyboardLayoutMap.entries` 読取専用
Experimental

指定されたオブジェクト自身の列挙可能なプロパティ `[key, value]` ペアの配列を、 `for...in` ループで指定されたものと同じ順序で返します（`for-in` ループでは、プロトタイプチェーン内のプロパティも列挙される点が異なります）。

`KeyboardLayoutMap.keys` 読取専用
Experimental

配列の各インデックスのキーを格納した新しい配列イテレーターオブジェクトを返します。

`KeyboardLayoutMap.size` 読取専用
Experimental

`KeyboardLayoutMap` オブジェクトの要素数を返します。

`KeyboardLayoutMap.values` 読取専用
Experimental

`KeyboardLayoutMap` オブジェクトの各インデックスの値を格納した新しい配列イテレーターオブジェクトを返します。

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

`KeyboardLayoutMap.forEach()` 読取専用
Experimental

指定された関数を `KeyboardLayoutMap` の各要素に対して一度ずつだけ実行します。

`KeyboardLayoutMap.get()`
Experimental

`KeyboardLayoutMap` オブジェクトから、指定されたキーを持つ要素を返します。

`KeyboardLayoutMap.has()`
Experimental

`KeyboardLayoutMap` オブジェクトに指定したキーを持つ要素があるかどうかを示す論理値を返します。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応する場所またはレイアウトに依存した文字列を取得する方法を示しています。

```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| Keyboard Map # keyboardlayoutmap-interface |

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

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


CSSRuleList - Web API

CSSRuleList
===========

`CSSRuleList` は読み取り専用の `CSSRule` オブジェクトの順序付きコレクションを表します。

`CSSRuleList` オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるので `live` オブジェクトと見なされます。

`CSSRule` オブジェクトが返す基本ルールを編集するには、 `CSSStyleSheet` のメソッドである `CSSStyleSheet.insertRule()` と `CSSStyleSheet.deleteRule()` を使用します。

このインターフェイスにはコンストラクターがありません。 `CSSRuleList` のインスタンスは `CSSStyleSheet.cssRules` と `CSSKeyframesRule.cssRules` から返却されます。

プロパティ
-----

`CSSRuleList.length`読取専用

このコレクション内の `CSSRule` オブジェクトの数を表す整数を返します。

メソッド
----

`CSSRuleList.item()`

単一の `CSSRule` を取得します。

例
-

以下の例には、 3 つのルールがあるスタイルシートがあります。 `CSSStyleSheet.cssRules` を使用すると `CSSRuleList` を返し、それがコンソールに出力されます。

リスト内のルールの数は、 `CSSRuleList.length` を使用してコンソールに出力されます。最初の `CSSRule` は `0` を `CSSRuleList.item` の引数に指定することで返されます。この例では `body` セレクターのルールセットが返されます。

### CSS

```css
body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > \* {
  background-color: #3740ff;
  color: #fff;
}
```

### JavaScript

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

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssrulelist-interface |

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

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

関連情報
----

* `CSSRule`


SpeechSynthesis - Web API

SpeechSynthesis
===============

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

Web Speech API の **`SpeechSynthesis`** インターフェイスは、speech サービスのための制御インターフェイスです。これは、端末で利用可能な合成音声についての情報を取得するために使用されます。読み上げの開始および一時停止、他のコマンドで制御します。

プロパティ
-----

*`SpeechSynthesis` は、その親インターフェイスである `EventTarget` からのプロパティも継承します。*

`SpeechSynthesis.paused` (en-US) 読取専用

`真偽値`。`SpeechSynthesis` オブジェクトが一時停止状態の場合に `true` を返します。

`SpeechSynthesis.pending` (en-US) 読取専用

`真偽値`。発声 (utterance) キューにまだ発話されていないものがある場合に `true` を返します。

`SpeechSynthesis.speaking` (en-US) 読取専用

`真偽値`。`SpeechSynthesis` が一時停止状態であっても、発声が現在発話処理中の場合に `true` を返します。

### イベントハンドラー

`SpeechSynthesis.onvoiceschanged` (en-US)

`SpeechSynthesis.getVoices()` (en-US) メソッドにより返される `SpeechSynthesisVoice` (en-US) オブジェクトのリストが変更された時に発火します。

メソッド
----

*`SpeechSynthesis` は、その親インターフェイスである `EventTarget` からのメソッドも継承します。*

`SpeechSynthesis.cancel()` (en-US)

すべての発声を発声キューから削除します。

`SpeechSynthesis.getVoices()` (en-US)

現在の端末上のすべての利用可能な音声を表す、`SpeechSynthesisVoice` (en-US) オブジェクトのリストを返します。

`SpeechSynthesis.pause()` (en-US)

`SpeechSynthesis` オブジェクトを一時停止状態にします。

`SpeechSynthesis.resume()` (en-US)

`SpeechSynthesis` オブジェクトを一時停止でない状態にします。つまり、一時停止状態であった場合に再開します。

`SpeechSynthesis.speak()` (en-US)

`utterance` を発声キューに追加します。これは、それ以前にキューに追加された他の発声が発話された後に発話されます。

例
-

私たちの基本的な 音声合成のデモ では、最初に `window.speechSynthesis` を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 `SpeechSynthesis.getVoices()` (en-US) を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

`inputForm.onsubmit` ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト `<input>` に入力されたテキストを含む新しい `SpeechSynthesisUtterance` インスタンスを作成します。その発声にユーザーが `<select>` 要素で選択した音声を設定し、`SpeechSynthesis.speak()` (en-US) メソッドを通して発声の発話を開始します。

```js
var synth = window.speechSynthesis;

var inputForm = document.querySelector("form");
var inputTxt = document.querySelector(".txt");
var voiceSelect = document.querySelector("select");

var pitch = document.querySelector("#pitch");
var pitchValue = document.querySelector(".pitch-value");
var rate = document.querySelector("#rate");
var rateValue = document.querySelector(".rate-value");

var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (i = 0; i < voices.length; i++) {
    var option = document.createElement("option");
    option.textContent = voices[i].name + " (" + voices[i].lang + ")";

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function (event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # tts-section |

ブラウザーの実装状況
----------

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

関連項目
----

* Web Speech API


Magnetometer - Web API

Magnetometer
============

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

Sensor APIs の **`Magnetometer`** インターフェイスは、デバイスのプライマリー磁気センサーで検出される磁場の情報を提供します。

このセンサーを使用するには、ユーザーが Permissions API により `'magnetometer'` デバイスセンサーを使用する許可を与える必要があります。さらに、この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

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

`Magnetometer()`
Experimental

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

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

`Magnetometer.x` 読取専用
Experimental

デバイスの x 軸方向の磁場を表す `double` 値を返します。

`Magnetometer.y` 読取専用
Experimental

デバイスの y 軸方向の磁場を表す `double` 値を返します。

`Magnetometer.z` 読取専用
Experimental

デバイスの z 軸方向の磁場を表す `double` 値を返します。

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

*`Magnetometer` には独自のメソッドはありません。しかし、親インターフェイスの `Sensor` および `EventTarget` からメソッドを継承しています。*

イベント
----

*`Magnetometer` には独自のイベントはありません。しかし、親インターフェイスの `Sensor` からイベントを継承しています。*

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-interface |

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

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


Attr - Web API

Attr
====

**`Attr`** インターフェイスは要素の属性の一つをオブジェクトとして表します。多くの場合、属性値を直接文字列として取得しますが（例: `Element.getAttribute()`）、一部の関数（例: `Element.getAttributeNode()`）や反復処理の場面では `Attr` のインスタンスを返します。

EventTarget

Node

Attr
`Attr` 型のオブジェクトの核となる考え方は、**名前**と**値**の関連付けです。属性は**名前空間**の一部であることもあり、この場合、名前空間を識別する URI と、名前空間の省略形である接頭辞も持っています。

最終的に名前空間接頭辞を無視した場合は**ローカル**とみなされ、名前空間の接頭辞がある場合はそれを含み、コロン (`:`) でローカル名との間を区切った場合は**修飾されている**とみなされます。名前空間の外にある属性、名前空間の中にあって接頭辞が定義されていない属性、名前空間の中にあって接頭辞が定義されている属性の 3 つの場合があります。

| 属性 | 名前空間名 | 名前空間接頭辞 | 属性のローカル名 | 属性の修飾名 |
| --- | --- | --- | --- | --- |
| `myAttr` | *なし* | *なし* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | *なし* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | `myns` | `myAttr` | `myns:myAttr` |

**メモ:** このインターフェイスは、SVG、HTML、MathML のいずれかの要素である `Element` のツリー表現に存在する属性のみを表します。例えば `<table>` 要素に対する `HTMLTableElement` のような、その要素に関連付けられたインターフェイスの*プロパティ*を表すことはありません。（属性とそれがどのようにプロパティに*反映*されるかについての詳細はこの記事を参照してください。）

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

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

`localName` 読取専用

文字列で、属性の修飾名のローカル部分を表します。

`name` 読取専用

属性の*修飾名*です。この属性が名前空間内にない場合は、`localName` プロパティと同じになります。

`namespaceURI` 読取専用

文字列で、この属性の名前空間の URI を表します。名前空間がない場合は `null` となります。

`ownerElement` 読取専用

この属性が所属する `Element` です。

`prefix` 読取専用

文字列で、この属性の名前空間接頭辞を表します。接頭辞のない名前空間や名前空間が指定されていない場合は `null` となります。

`specified` 読取専用
非推奨

このプロパティは常に `true` を返します。

`value`

この属性の値です。文字列で、このプロパティで設定したり取得したりすることができます。

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

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

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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

関連情報
----

* 他のノード: `CDATASection`, `CharacterData`, `Comment`, `Document`, `Element`, `ProcessingInstruction`, `Text`