recursal/MDN huggingface dataset:
BackgroundFetchRecord
=====================

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

Background Fetch API の **`BackgroundFetchRecord`** インターフェイスは、個々のリクエストと応答を表します。

`BackgroundFetchRecord` は `BackgroundFetchManager.fetch()` メソッドによって生成されるので、このインターフェイスにはコンストラクターがありません。

`fetch()` で要求された各リソースに対して、 `BackgroundFetchRecord` が 1 つずつ存在することになります。

プロパティ
-----

`request` 読取専用  
Experimental

`Request` を返します。

`responseReady` 読取専用  
Experimental

`Response` によって解決されるプロミスを返します。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `BackgroundFetchRecord.request` と `BackgroundFetchRecord.responseReady` の値を受け取り、コンソールにログ出力しています。


```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  console.log(`リクエスト：`, record.request);
  const response = await record.responseReady;
  console.log(`応答：`, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-record-interface |

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

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

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

**`Gamepad`** はゲームパッド API のインターフェイスで、それぞれのゲームパッドやその他のコントローラーを定義し、ボタン押下や軸位置や ID といった情報にアクセスできるようにします。

Gamepad オブジェクトを取得する方法は 2 つあります。 `gamepadconnected` または `gamepaddisconnected` イベントの `gamepad` プロパティか、 `Navigator.getGamepads()` から返される配列の任意の位置から取得します。

プロパティ
-----

`Gamepad.axes` 読取専用 

機器上に軸があるコントロールを表す配列です（例: アナログスティック）。

`Gamepad.buttons` 読取専用 

機器上のボタンを表す `gamepadButton` のオブジェクトの配列。

`Gamepad.connected` 読取専用 

ゲームパッドがシステムに繋がっているかを表す論理値。

`Gamepad.displayId` 読取専用  
非推奨

Non-standard

関連する *`VRDisplay`* の *`VRDisplay.displayId`* を返します）該当する場合）。ゲームパッドが表示されているシーンを制御している `VRDisplay` を返します。

`Gamepad.hand` 読取専用  
Experimental

コントローラーがどの手で握られているか、または握られる可能性が高いかを定義する列挙型です。

`Gamepad.hapticActuators` 読取専用  
Experimental

`GamepadHapticActuator` オブジェクトを格納した配列で、各オブジェクトはコントローラーで利用できる触覚フィードバックのハードウェアを表します。

`Gamepad.vibrationActuator` 読取専用  
Non-standard

`GamepadHapticActuator` オブジェクトで、コントローラーで利用できる触覚フィードバックのハードウェアを表します。

`Gamepad.id` 読取専用 

文字列で、コントローラーに関する識別情報を示します。

`Gamepad.index` 読取専用 

システムに現在接続しているそれぞれの機器を表す固有の整数値。

`Gamepad.mapping` 読取専用 

ブラウザーが機器上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。

`Gamepad.pose` 読取専用  
Experimental

WebVR コントローラーに関連するポーズ情報（3D 空間における位置や向きなど）を表す `GamepadPose` (en-US) オブジェクトです。

`Gamepad.timestamp` 読取専用 

このゲームパッドのデータが最後に更新された時刻を表す `DOMHighResTimeStamp` です。

例
-


```js
window.addEventListener("gamepadconnected", (e) => {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

仕様書
---

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

関連情報
----

* ゲームパッド API の利用
* ゲームパッド API
XRLightProbe
============

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

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

**`XRLightProbe`** は WebXR 機器 API のインターフェイスで、ユーザー環境のこの点の照明情報が入ります。 `XRLighting` オブジェクトは `XRSession.requestLightProbe()` (en-US) メソッドを使用して取得することができます。

このオブジェクト自体は照明値を保持しませんが、それぞれの `XRFrame` (en-US) の照明状態を収集するために使用します。 `XRLightProbe` の推定照明値については `XRLightEstimate` (en-US) を参照してください。

EventTarget

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

`XRLightProbe.onreflectionchange`

`reflectionchange` イベントのイベントハンドラープロパティです。

`XRLightProbe.probeSpace` 読取専用  
Experimental

照明推定が相対的な位置と方向を追跡する `XRSpace` (en-US) です。

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

なし。

イベント
----

`reflectionchange` 
Experimental

推定反射立方体マップが変更されるたびに発行されます。（これはユーザーが移動して環境の照明が変化したときに発生します。）

例
-

### セッションの `XRLightProbe` オブジェクトの取得

ライトプローブを取得するには、 `XRSession.requestLightProbe()` (en-US) メソッドを使用します。


```js
const lightProbe = await xrSession.requestLightProbe();
```

### `XRFrame` 内のプローブ位置姿勢の取得

ライトプローブの `probeSpace` を `XRFrame.getPose()` (en-US) に渡すと、ある位置姿勢のライトプローブを取得します。


```js
const probePose = xrFrame.getPose(lightProbe.probeSpace, xrReferenceSpace);
```

### `reflectionchange` イベントの使用

`XRLightProbe` を渡して、 `reflectionchange` イベントが発生するたびに推定反射立方体マップを取得します。`XRWebGLBinding.getReflectionCubeMap()` (en-US) も参照してください。


```js
const glBinding = new XRWebGLBinding(xrSession, gl);
const lightProbe = await xrSession.requestLightProbe();
let glCubeMap = glBinding.getReflectionCubeMap(lightProbe);

lightProbe.addEventListener("reflectionchange", () => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
});
```

仕様書
---

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # xrlightprobe-interface |

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

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

関連情報
----

* `XRSession.requestLightProbe()` (en-US)
XMLSerializer
=============

`XMLSerializer` インターフェイスは `serializeToString()` メソッドを提供します。これにより、 DOM ツリーを表す XML 文字列を構築することができます。

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

`serializeToString()`

文字列の形にシリアライズされたサブツリーを返します。

例
-

### XML を文字列にシリアライズ

最初の基本的な例は、文書全体を XML を含む文字列にシリアライズします。


```js
const s = new XMLSerializer();
const d = document;
const str = s.serializeToString(d);
saveXML(str);
```


このコードは、新しい `XMLSerializer` オブジェクトを作成し、シリアライズされる `Document` を `serializeToString()` に渡します。これは、渡した文書と同等の XML を返します。

### XML を基にした DOM にノードを挿入する

この例は、`Element.insertAdjacentHTML()` メソッドを使用して新しい DOM `Node` を `Document` の body に挿入します。これは、`Element` オブジェクトをシリアライズすることにより作成された XML を基にしています。

**メモ:** 実際は、`importNode()` メソッドを呼び出して新しいノードを DOM に挿入する代わりに、以下のいずれかのメソッドを呼び出して DOM ツリーに追加することになるでしょう。

* `Element.append()` / `Element.prepend()` および `Document.append()` (en-US) / `Document.prepend()` (en-US) メソッド
* `Element.replaceWith()` メソッド（既存のノードを新しいノードと置き換えるため）
* `Document.insertAdjacentElement()` および `Element.insertAdjacentElement()` メソッド

`insertAdjacentHTML()` は文字列を受け入れるますが、2 番目の引数として `Node` を受け入れないため、`XMLSerializer` を使用して先にノードを文字列に変換します。


```js
const inp = document.createElement("input");
const XMLS = new XMLSerializer();
const inp_xmls = XMLS.serializeToString(inp); // まず DOM ノードを文字列に変換

// 新たに作成されたノードを文書の body に挿入
document.body.insertAdjacentHTML("afterbegin", inp_xmls);
```


このコードは、`Document.createElement()` を呼び出して新しい `<input>` 要素を作成し、`serializeToString()` を使用して XML にシリアライズします。

完了したら、`insertAdjacentHTML()` を使用して `<input>` 要素を DOM に挿入します。

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # the-xmlserializer-interface |

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

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

関連情報
----

* XML の解釈とシリアライズ
* `XMLHttpRequest`
* `DOMParser`
RsaHashedKeyGenParams
=====================

Web Crypto API の辞書 **`RsaHashedKeyGenParams`** は、RSA ベース、すなわちアルゴリズムとして RSASSA-PKCS1-v1\_5, RSA-PSS, RSA-OAEP のいずれかを指定する鍵ペアを生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。使用したいアルゴリズムにより、`RSASSA-PKCS1-v1_5`, `RSA-PSS`, `RSA-OAEP` のいずれかに設定するべきです。

`modulusLength`

`Number`。RSA の法の長さ (ビット数) です。最低でも 2,048 にするべきです。 SP 800-131A Rev. 2 の例を参照してください。現在、4,096 にすることを薦めている組織もあります。

`publicExponent`

`Uint8Array`。公開指数です。他の値を用いるいい理由が無い限り、65,537 ( `[0x01, 0x00, 0x01]` ) を指定してください。

`hash`

用いるダイジェスト関数の名前を表す文字列です。`SHA-256`, `SHA-384`, `SHA-512` のうちのいずれかを指定できます。

**警告:** 技術的にはここに `SHA-1` を指定することもできますが、SHA-1 は脆弱であるとみなされているため強く非推奨です。

例
-

`SubtleCrypto.generateKey()` の例を参照してください。

仕様書
---

| Specification |
| --- |
| Web Cryptography API # dfn-RsaHashedKeyGenParams |

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

`SubtleCrypto.generateKey()` メソッドにおいて RSA ベースのアルゴリズムをどれかサポートしているブラウザーは、この型をサポートするはずです。

関連情報
----

* `SubtleCrypto.generateKey()`
Storage
=======

**`Storage`** はウェブストレージ API のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。

例えば、ドメインのセッションストレージを操作したい場合は、`Window.sessionStorage` メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、`Window.localStorage` を呼び出してください。

プロパティ
-----

`Storage.length` 読取専用 

`Storage` オブジェクトに保存されているデータアイテムの数を表す整数を返します。

メソッド
----

`Storage.key()`

数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。

`Storage.getItem()`

キーの名称を渡すと、キーに対する値を返します。

`Storage.setItem()`

キーの名称と値を渡すと、ストレージにキーを追加し、または既存のキーに対する値を更新します。

`Storage.removeItem()`

キーの名称を渡すと、ストレージからキーを削除します。

`Storage.clear()`

ストレージからすべてのキーを消去します。

例
-

ここでは、`localStorage` を呼び出して `Storage` オブジェクトにアクセスしています。始めに `!localStorage.getItem('bgcolor')` というコードを使用して、ローカルストレージにデータアイテムが含まれているかを確認します。含まれている場合は、`Storage.getItem()` を使用してデータアイテムを取得して、さらにそのデータを使用してページのスタイルを更新する `setStyles()` 関数を実行します。含まれていない場合は `populateStorage()` 関数を実行します。こちらは `Storage.setItem()` を使用してアイテムの値を設定してから、`setStyles()` 関数を実行します。


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**メモ:** 完全に動作する例として実行する様子を見るために、Web Storage Demo をご覧ください。

仕様書
---

| Specification |
| --- |
| HTML Standard # storage |

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

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

関連情報
----

* ウェブストレージ API の使用
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage`
Headers
=======

**`Headers`** はフェッチ API のインターフェイスで、 HTTP リクエスト／レスポンスヘッダー上のさまざまなアクションを実行します。アクションとしては、リクエストヘッダーのリストに対するヘッダーの取得、設定、追加、削除などがあります。

`Headers` オブジェクトは、初期状態では空で 0 個以上の名前と値のペアで構成される関連するヘッダーの連想リストを持っています。 `append()` （例を見てください）のようなメソッドを使用して、ヘッダーを追加することができます。このインターフェイスのすべてのメソッドで、ヘッダー名は大文字小文字を区別しないバイト列として照合されます。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

ヘッダーは関連するガードも持っています。ガードは `immutable`、`request`、`request-no-cors`、`response`、`none` のいずれかの値を取ります。これはヘッダーを変更する `set()` メソッドと `delete()` メソッド、`append()` メソッドに影響を与えます。詳細はガードを見てください。

`Headers` オブジェクトは `Request.headers` および `Response.headers` プロパティ経由で取得することができ、また新しい `Headers` オブジェクトを `Headers()` コンストラクターで生成することもできます。

`Headers` を実装したオブジェクトは、`entries()` の代わりに直接 `for...of` 構文で使用することができます。 `for (const p of myHeaders)` と `for (const p of myHeaders.entries())` は同等です。

**メモ:** 利用できるヘッダーについてはHTTP ヘッダー を参照してください。

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

`Headers()`

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

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

`Headers.append()`

`Headers` オブジェクト内の既存のヘッダーに新しい値を追加するか、まだ存在しない場合はヘッダーを追加します。

`Headers.delete()`

`Headers` オブジェクトからヘッダーを削除します。

`Headers.entries()`

このオブジェクトに含まれるすべてのキー/値のペアを通して処理するための `iterator` を返します。

`Headers.forEach()`

指定された関数を、この `Headers` オブジェクトのキー/値のペアそれぞれに対して一度ずつ実行します。

`Headers.get()`

`Headers` オブジェクトにある指定された名前を持つ、ヘッダーのすべての値を示す文字列の配列を返します。

`Headers.has()`

`Headers` オブジェクトが特定のヘッダーを含むかどうかを示す値を、論理値で返します。

`Headers.keys()`

このオブジェクトに含まれるキー/値のペアのすべてのキーを通して処理するための イテレーターを返します。

`Headers.set()`

オブジェクト内の既存のヘッダーに新しい値を設定するか、まだ存在しない場合はヘッダーを追加する。

`Headers.values()`

このオブジェクトに含まれるキー/値のペアのすべての値を通して処理するためのイテレーターを返します。


**メモ:** `Headers.set()` と `Headers.append()` の明確な違いは、複数の値を受け入れる特定のヘッダーが既に存在しているときの挙動です。`Headers.set()` は既存の値を新しい値で上書きしますが、`Headers.append()` は既存の値の末尾に新しい値を追加します。サンプルコードはそれぞれの専用ページで確認してください。

**メモ:** すべての Headers メソッドで、有効な HTTP ヘッダー名 ではない名前の参照を渡そうとすると `TypeError` が発生します。ヘッダーに immutable ガードがある場合、変更操作をしようとすると `TypeError` が発生します。します。そのほかの場外の場合は、単に失敗します。

**メモ:** ヘッダーを反復処理する時は、自動的に辞書順への並び替えが行われ、重複する名前は結合されます。

例
-

次のコードスニペットでは、`Headers()` コンストラクターを使用して新しいヘッダーを生成し、`append()` を使用して新しいヘッダーを追加しています。その後、 `get()` を使用してヘッダーの値を返します。


```js
const myHeaders = new Headers();

myHeaders.append("Content-Type", "text/xml");
myHeaders.get("Content-Type"); // 'text/xml' を返す。
```


同じことがコンストラクターにオブジェクトリテラルか配列リテラルの配列リテラルを渡すことでできます。


```js
let myHeaders = new Headers({
  "Content-Type": "text/xml",
});

// or, using an array of arrays:
myHeaders = new Headers([["Content-Type", "text/xml"]]);

myHeaders.get("Content-Type"); // should return 'text/xml'
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # headers-class |

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

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

関連項目
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
HTMLStyleElement
================

**`HTMLStyleElement`** インターフェイスは `<style>` 要素を表します。これは親である `HTMLElement` からプロパティとメソッドを継承しています。

このインターフェイスでは、（ほとんどの場合）保持している CSS を操作することはできません。CSS を操作するには、DOM を使用して指定された CSS プロパティを操作するために使用するオブジェクトの概要について、動的なスタイル情報の利用を参照してください。

EventTarget

Node

Element

HTMLElement

HTMLStyleElementプロパティ
-----

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

`HTMLStyleElement.media`

スタイル情報の意図する出力先媒体を表す HTML 属性を反映した文字列です。

`HTMLStyleElement.type` 
非推奨

この文で適用されるスタイルの種類を表す HTML 属性を反映する文字列です。

`HTMLStyleElement.disabled`

論理値で、関連するスタイルシートが無効かどうかを示します。

`HTMLStyleElement.sheet` 読取専用 

指定された要素に関連付けられた `CSSStyleSheet` オブジェクトを返します。存在しない場合は `null` を返します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlstyleelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<style>`
* 動的なスタイル情報の利用で CSS を操作する方法を確認してください
MediaSource
===========

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

**`MediaSource`**`インターフェイスは、``HTMLMediaElement`のデータを扱っています。MediaSource をオブジェクトは、ユーザが再生する`HTMLMediaElement`につけることができます。

プロパティ
-----

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

`MediaSource.sourceBuffers`読取専用 

`SourceBufferList`から成り立っています。

`MediaSource.activeSourceBuffers` 読取専用 

`SourceBufferList` から成り立っています。

`MediaSource.readyState` 読取専用 

値を列挙します。

*`MediaSource.duration`*

浮動小数点型です。

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

`MediaSource()` 読取専用 

コンストラクタはソースバッファと関連しない MediaSource オブジェクトを返します

Static なメソッド
------------

`MediaSource.isTypeSupported()`

与えられた MIME タイプが完全に実行できるかどうかの`Boolean`型を返します。

メソッド
----

*親インターフェイス`EventTarget`から、プロパティを継承しています。*

`MediaSource.addSourceBuffer()`

`MediaSource` オブジェクトに関連づけて作成し、 , `SourceBuffer` に与えられた MIME タイプを返します。

`MediaSource.removeSourceBuffer()`

メディアソースオブジェクトから、与えられた `SourceBuffer` を削除します。

`MediaSource.endOfStream()`

ストリームの終わりを合図します。最後には error を発するでしょう。


仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # mediasource |

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

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

関連項目
----

* 関連するインターフェイス: `SourceBuffer` と`SourceBufferList`.
HTMLPictureElement
==================

**`HTMLPictureElement`** インタフェースは、HTML の `<picture>` 要素を表します。これは固有のプロパティやメソッドを実装していません。

EventTarget

Node

Element

HTMLElement

HTMLPictureElementプロパティ
-----

*固有のプロパティはありませんが、親要素である `HTMLElement` から継承したプロパティがあります。*

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlpictureelement |

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

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

関連情報
----

* これを実装している `<picture>` HTML 要素。
* `HTMLImageElement` と `HTMLSourceElement` は、しばしば `<picture>` 要素と同時に使用されます。
CharacterData
=============

**`CharacterData`** は抽象インターフェイスで、文字を包含する `Node` オブジェクトを表します。これは抽象インターフェイスであり、`CharacterData` 型のオブジェクトは存在しません。抽象ではない `Text`、`Comment`、`CDATASection`、`ProcessingInstruction` といったインターフェイスによって実装されています。

EventTarget

Node

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

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

`CharacterData.data`

当該オブジェクトが包含するテキストデータを表す文字列です。

`CharacterData.length` 読取専用 

このオブジェクトに格納された文字列のサイズを表す数値を返します。

`CharacterData.nextElementSibling` 読取専用 

親要素の子のリストで、指定した要素の*直後*の兄弟である `Element` を返します。

`CharacterData.previousElementSibling` 読取専用 

親要素の子のリストで、指定した要素の*直前*の兄弟である `Element` を返します。

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

*親インターフェイスである `Node` および `EventTarget` からメソッドを継承しています。*

`CharacterData.after()`

一連の `Node` オブジェクトまたは文字列を、この `CharacterData` の親ノードの子リストの中、この `CharacterData` オブジェクトの直後に挿入します。

`CharacterData.appendData()`

指定した文字列を `CharacterData.data` の文字列に追加します。このメソッドから戻ると、`data` には結合した文字列が入ります。

`CharacterData.before()`

一連の `Node` オブジェクトまたは文字列を、この `CharacterData` の親ノードの子リストの中、この `CharacterData` オブジェクトの直前に挿入します。

`CharacterData.deleteData()`

`CharacterData.data` の文字列の指定したオフセット位置から、指定した数の文字を削除します。このメソッドから戻ると、 `data` には短縮された文字列になります。

`CharacterData.insertData()`

`CharacterData.data` の文字列の指定したオフセット位置に、指定した文字を挿入します。このメソッドから戻ると、 `data` には変更された文字列になります。

`CharacterData.remove()`

親要素の子のリストから、オブジェクトを削除します。

`CharacterData.replaceData()`

指定したオフセット位置から指定した量の文字列を、指定した文字列に置き換えます。このメソッドから戻ると、 `data` には変更された文字列になります。

`CharacterData.replaceWith()`

親ノードの子リストの文字を `Node` オブジェクトまたは文字列の集合で置き換えます。

`CharacterData.substringData()`

指定された長さの `CharacterData.data` の部分を含む、指定されたオフセットから始まる文字列を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-characterdata |

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

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

関連情報
----

* DOM 概要ページ.
* このインターフェイスを実装している具象インターフェイス: `Text`, `CDATASection`, `ProcessingInstruction`, `Comment`
XPathResult
===========

**`XPathResult`** インターフェイスは、指定されたノードのコンテキスト内で XPath 式を評価して発生した結果を表します。

XPath 式はさまざまな結果型を発生させる可能性があるため、このインターフェイスを使用すると、結果の型と値を決定して処理することが可能になります。

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

`XPathResult.booleanValue` 読取専用 

論理値で、 `resultType` が `BOOLEAN_TYPE` の場合に、結果の値を表します。

`XPathResult.invalidIteratorState` 読取専用 

イテレータが無効になったことを示します。 `resultType` が `UNORDERED_NODE_ITERATOR_TYPE` または `ORDERED_NODE_ITERATOR_TYPE` で、この結果を返してから文書が変更された場合は `true` となります。

`XPathResult.numberValue` 読取専用 

数値で、 `resultType` が `NUMBER_TYPE` の場合に、結果の値を表します。

`XPathResult.resultType` 読取専用 

型定数を定義した、結果の型を表す数値のコードです。

`XPathResult.singleNodeValue` 読取専用 

単一ノードの結果の値を表す `Node` です。 `null` になることもあります。

`XPathResult.snapshotLength` 読取専用 

結果スナップショットのノード数です。

`XPathResult.stringValue` 読取専用 

文字列で、 `resultType` が `STRING_TYPE` の場合に、結果の値を表します。

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

`XPathResult.iterateNext()`

結果がノード集合の場合、このメソッドはそれを反復処理し、次のノードを返すか、ノードがない場合は `null` を返します。

`XPathResult.snapshotItem()`

スナップショット集合のアイテムを返すか、インデックスがノードの範囲にない場合は `null` を返します。イテレーターの結果とは異なり、スナップショットは無効にはなりませんが、変化した場合には現在の文書に対応しなくなる可能性があります。

定数
--

| 結果の定義済みの型定数 | 値 | 説明 |
| --- | --- | --- |
| `ANY_TYPE` | `0` | 式を評価した結果として自然に得られる型を格納した結果集合です。結果がノード集合の場合、 `UNORDERED_NODE_ITERATOR_TYPE` が常に結果として得られる型であることに注意してください。 |
| `NUMBER_TYPE` | `1` | 単一の数値を格納した結果です。この例は、例えば `count()` 関数を使用した XPath 式の中で有益です。 |
| `STRING_TYPE` | `2` | 単一の文字列を格納した結果です。 |
| `BOOLEAN_TYPE` | `3` | 1 つの論理値を格納した結果です。これは例えば、`not()`関数を使用した XPath 式の中で有益なものです。 |
| `UNORDERED_NODE_ITERATOR_TYPE` | `4` | 式に一致するすべてのノードを格納した結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_ITERATOR_TYPE` | `5` | 式に一致するすべてのノードを格納した結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `UNORDERED_NODE_SNAPSHOT_TYPE` | `6` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_SNAPSHOT_TYPE` | `7` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `ANY_UNORDERED_NODE_TYPE` | `8` | 式に一致する単一のノードを格納した結果ノード集合です。このノードは、必ずしも文書内の式に一致する最初のノードであるとは限りません。 |
| `FIRST_ORDERED_NODE_TYPE` | `9` | 式に一致する文書内の最初のノードを格納した結果ノード集合です。 |

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-xpathresult |

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

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

関連情報
----

* `Document.evaluate()`
* `XPathExpression`
* Dottoro Web Reference - XPathResult object
FocusEvent
==========

**`FocusEvent`** はフォーカスに関するイベント、例えば `focus`、`blur`、`focusin`、`focusout` などを表します。

Event

UIEvent

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

`FocusEvent()`

指定した引数に基づいて、`FocusEvent` イベントを作成します。

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

*このインターフェイスは親である `UIEvent` および間接的に `Event` から、プロパティを継承しています*。

`FocusEvent.relatedTarget`

このイベントのセカンダリーターゲットを表す `EventTarget` です。一部の場合（タブ移動でページに出入りするときなど）では、セキュリティ上の理由からこのプロパティが `null` に設定されます。

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

*このインターフェイスには固有のメソッドはありません。親である `UIEvent` および間接的に `Event` から、メソッドを継承しています。*

イベントの順序
-------

*UI イベント* 仕様書では、フォーカスイベントは互いに相対的に 設定された順序で発生する と記載されており、さらに、要素 A から要素 B にフォーカスが移動したときに発行される典型的なイベントのシーケンスが記述されています。

1. `focusout`: 要素 A がフォーカスを失う前に送られます。
2. `focusin`: 要素 B がフォーカスを受け取る前に送られます。
3. `blur`: 要素 A がフォーカスを失った後に送られます。
4. `focus`: 要素 B がフォーカスを受け取った後に送られます。

しかし、現在のブラウザー実装では、この 4 つのイベントを異なる形で発行しています。

1. `blur`: 要素 A がフォーカスを失った後に送られます。
2. `focusout`: `blur` イベントが送られた後で送られます。
3. `focus`: 要素 B がフォーカスを失った後に送られます。
4. `focusin`: `focus` イベントが送られた後で送られます。
仕様書
---

| Specification |
| --- |
| UI Events # interface-focusevent |

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

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

関連情報
----

* `Event` 基本インターフェイス
StyleSheetList
==============

`StyleSheetList` インターフェイスは `StyleSheet` のリストを表します。

これは配列風のオブジェクトですが、 `Array` のメソッドを適用しての反復処理はできません。しかし標準の `for` ループと添字による反復処理、もしくは `Array` への変換ができます。

例
-

### for ループを使用して document の styleSheet オブジェクトを取得


```js
for (let i = 0; i < document.styleSheets.length; i++) {
  let styleSheet = document.styleSheets[i];
}
```

### Array のメソッドを適用してすべての CSS ルールを取得
```

const allCSS = [...document.styleSheets]
  .map(styleSheet => {
    try {
      return [...styleSheet.cssRules]
        .map(rule => rule.cssText)
        .join('');
    } catch (e) {
      console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
    }
  })
  .filter(Boolean)
  .join('\n');
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-stylesheetlist-interface |

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

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

**`Worker`** はウェブワーカー API のインターフェイスで、スクリプトで生成することができるバックグラウンドタスクを表し、作成元にメッセージを送り返すことができます。

ワーカーは `Worker("path/to/worker/script")` コンストラクターを呼び出すことで生成されます。

ワーカーは同じ親ページの同一オリジン内でホストされている限り、他の新しいワーカーを生成することができます（メモ: 入れ子になったワーカーは WebKit では未実装です）。

利用可能なすべてのインターフェイスと関数がすべて `Worker` の中で利用できるとは限りません。ワーカーはネットワーク通信のために `XMLHttpRequest` を使うことができますが、 `responseXML` 属性と `channel` 属性は常に `null` になります。（`fetch` も利用可能であり、このような制限はありません。）

EventTarget

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

`Worker()`

指定された URL にあるスクリプトを実行する専用ウェブワーカーのインスタンスを生成します。また、 Blob URL を用いてワーカーを生成することもできます。

プロパティ
-----

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

メソッド
----

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

`Worker.postMessage()`

ワーカーの内部スコープに、あらゆる JavaScript オブジェクトの形式のメッセージも送ることができます。

`Worker.terminate()`

ワーカーを直ちに終了させます。ワーカーに終了処理を行わせず、直ちに終了させます。 `ServiceWorker` のインスタンスはこのメソッドを備えていません。

イベント
----

`error`

ワーカー内でエラーが発生したときに発行されます。

`message`

ワーカーの親が、そのワーカーからメッセージを受信したときに発行されます。

`messageerror`

`Worker` オブジェクトが シリアライズ解除できないというメッセージを受け取ったときに発行されます。

`rejectionhandled`

プロミス (`Promise`) が拒否されるたびに発行されます。拒否を処理するハンドラーがあるかどうかは問いません。

`unhandledrejection`

拒否を処理するハンドラーのないプロミス (`Promise`) が拒否されたときに発行されます。

例
-

次のコード例では、 `Worker` オブジェクトを、 `Worker()` コンストラクターを用いて生成しています。


```js
const myWorker = new Worker("/worker.js");
const first = document.querySelector("input#number1");
const second = document.querySelector("input#number2");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};
```


完全な例は、 Basic dedicated worker example (専用ワーカーを実行) を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-worker-interface |

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

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

ワーカーの種類に応じて対応状況が異なります。詳しくは、それぞれの種類のワーカーのページをご覧ください。

### オリジンをまたいだワーカーのエラーの動作

古いバージョンのブラウザーでは、オリジンをまたいでワーカーのスクリプトを読み込もうとすると、 `SecurityError` が発生していました。最近は、 `error` イベントが発行されるようになりました。

関連情報
----

* ウェブワーカーの使用
* ウェブワーカーで使用可能な関数一覧
* 他の種類のワーカー: `SharedWorker`、サービスワーカー
* `OffscreenCanvas` (en-US) インターフェイス