KeyboardEvent - Web API

KeyboardEvent
=============

**`KeyboardEvent`** オブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作（または修飾キーとの組み合わせ）を表します。イベントの種類 (`keydown`, `keypress`, `keyup`) はキーボード操作が発生した種類を識別します。

**メモ:** `KeyboardEvent` は、単にユーザーがキーボードのキーで行った操作が何であるかを低水準で示すものであり、その操作のその場面における意味は持ちません。テキストの入力を処理したい場合は、代わりに `input` イベントを使用してください。ユーザーが他の種類のテキスト入力、例えば、タブレット端末やタブレット機器による手書き入力システムなどを使用している場合、キーボードイベントが発生することはありません。

Event

UIEvent

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

`KeyboardEvent()`

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

定数
--

`KeyboardEvent` インターフェースは、以下の定数を定義しています。

### キーボード上の位置

以下の定数は、キーイベントがキーボードのどの部分から発生したかを識別します。これらは、 `KeyboardEvent.DOM_KEY_LOCATION_STANDARD` などとしてアクセスされます。

キーボード上の位置の識別子| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_KEY_LOCATION_STANDARD` | 0x00 | このイベントによって記述されたキーは、キーボードの特定の範囲にあるものではないことを表します。テンキー上にあるわけでもなく（NumLock キーでない限り）、キーボードの左右で重複しているキーについては、何らかの理由でその位置と関連付けないことになっています。
例としては、標準的な PC 101 US キーボードの英数字キー、 NumLock キー、スペースバーなどがあります。 |
| `DOM_KEY_LOCATION_LEFT` | 0x01 | このキーは、キーボード上の複数の位置に存在する可能性があるものであり、この場合は、キーボードの左側にあるものです。
例としては、左の Ctrl キー、 Macintosh キーボードの左の Command キー、左の Shift キーなどがあります。 |
| `DOM_KEY_LOCATION_RIGHT` | 0x02 | このキーは、キーボード上の複数の位置に存在する可能性があるものであり、この場合は、キーボードの右側にあるものです。
例としては、右の Shift キーや右の Alt キー（Mac キーボードの Option キー）などがあります。 |
| `DOM_KEY_LOCATION_NUMPAD` | 0x03 | このキーは、テンキー上に配置されているか、キーが複数の場所から発信される場合は、テンキーに関連付けられた仮想キーとなります。 NumLock キーはこのグループには該当せず、常に位置を `DOM_KEY_LOCATION_STANDARD` として符号化されます。
例としては、テンキーの数字、テンキー側の Enter キー、テンキー側の小数点などがあります。 |

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

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

`KeyboardEvent.altKey` 読取専用

論理値で、このキーイベントが発生した際に `Alt` （macOS の場合は `Option` または `⌥`）キーが押されていれば `true` を返します。

`KeyboardEvent.code` 読取専用

文字列で、このイベントが表す物理キーのコード値を返します。

**警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 `Keyboard.getLayoutMap()` を使用してください。

`KeyboardEvent.ctrlKey` 読取専用

論理値で、そのキーイベントが発生した際に `Ctrl` キーが押されていれば `true` を返します。

`KeyboardEvent.isComposing` 読取専用

論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。

`KeyboardEvent.key` 読取専用

文字列で、このイベントが表すキーのキー値を表します。

`KeyboardEvent.locale` 読取専用

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

**メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

`KeyboardEvent.location` 読取専用

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記のキーボード上の位置にあります。

`KeyboardEvent.metaKey` 読取専用

論理値で、このキーイベントが発生した際に `Meta` キー（Mac キーボードでは `⌘ Command` キー、 Windows キーボードでは Windows キー (`⊞`)）が押されていれば `true` を返します。

`KeyboardEvent.repeat` 読取専用

論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。

`KeyboardEvent.shiftKey` 読取専用

論理値で、このキーイベントが発生した際に `Shift` キーが押されていれば `true` を返します。

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

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

`KeyboardEvent.getModifierState()`

そのイベントが発生した際に修飾キー (`Alt` / `Shift` / `Ctrl` / `Meta`) が押されていたかどうかを表す論理値を返します。

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

`KeyboardEvent.initKeyEvent()`
非推奨

`KeyboardEvent` オブジェクトを初期化します。これは Firefox でのみ実装されていたものですが、もう Firefox でも対応していません。代わりに `KeyboardEvent()` コンストラクターを使用してください。

`KeyboardEvent.initKeyboardEvent()`
非推奨

`KeyboardEvent` オブジェクトを初期化します。これは非推奨になりました。代わりに `KeyboardEvent()` コンストラクターを使用してください。

廃止されたプロパティ
----------

`KeyboardEvent.char`
Non-standard

非推奨
 読取専用

このキーの文字値を表す文字列を返します。キーが表示可能な文字に対応している場合、この値はその文字を含む空でない Unicode 文字列となります。キーが表示可能な表現を持たない場合は、これは空文字列です。

**メモ:** キーが複数の文字を挿入するマクロとして使用されている場合、このプロパティの値は最初の文字だけでなく、文字列全体になります。

`KeyboardEvent.charCode`
非推奨
読取専用

このキーの Unicode 参照番号を表す数値を返します。この属性は、`keypress` イベントでのみ使用されます。 `char` 属性が複数の文字を含むキーの場合、これはその属性の最初の文字の Unicode 値となります。 Firefox 26 では、これは表示可能な文字のコードを返します。

**警告:** この属性は非推奨です。可能であれば、代わりに `KeyboardEvent.key` を使用してください。

`KeyboardEvent.keyCode`
非推奨
 読取専用

押されたキーの修飾されていない値を示す、 システムや実装に依存した数値コードを数値で返します。

**警告:** この属性は非推奨です。可能であれば、代わりに `KeyboardEvent.key` を使用してください。

`KeyboardEvent.keyIdentifier`
Non-standard

非推奨
 読取専用

このプロパティは標準外であり、`KeyboardEvent.key` に置き換えられ非推奨になりました。これは DOM Level 3 Events の古い版に含まれていました。

`KeyboardEvent.keyLocation`
Non-standard

非推奨
 読取専用

これは `KeyboardEvent.location` の標準外で非推奨の別名です。これは DOM Level 3 Events の古い版に含まれていました。

`UIEvent.which`
非推奨
 読取専用

押されたキーの修飾されていない値を示す、 システムや実装に依存した数値コードを数値で返します。これは通常 `keyCode` と同じです。

**警告:** この属性は非推奨です。可能であれば、代わりに `KeyboardEvent.key` を使用してください。

イベント
----

以下のイベントは `KeyboardEvent` 型に基づいています。以下のリストでは、各イベントは、そのイベントの `Element` のハンドラーのドキュメントにリンクしおり、これは一般的にすべての宛先、例えば `Element`、`Document`、`Window` に適用されます。

`keydown`

キーが押されました。

`keyup`

キーが離されました。

### 廃止されたイベント

`keypress`
非推奨

通常は文字値を生成するキーが押されました。このイベントは端末への依存度が高いため、廃止されました。使用すべきではありません。

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

イベントには `keydown`, `keypress`, `keyup` の 3 種類があります。 Gecko ではほとんどのキーにおいて、以下のようにキーイベントが連続して発生します。

1. そのキーが最初に押された時点で `keydown` イベントが発生します。
2. そのキーが修飾キーでなかった場合、 `keypress` イベントが発生します。
3. ユーザーがキーから指を離した時点で `keyup` イベントが発生します。
### 特殊な場合

Caps Lock や Num Lock、 Scroll Lock などのキーは LED 表示も切り替わります。 Windows と Linux では、このようなキーは `keydown` と `keyup` イベントのみが発生します。

**メモ:** Linux の Firefox 12 以前では `keypress` イベントも発生していました。

しかし Mac OS X のイベントモデルに関する制約から、Mac OS X の Caps Lock は `keydown` イベントのみが発生します。（2007 年モデル以前の）ノート型では Num Lock にも対応していましたが、今日の Mac OS X では外部キーボードにおいても Num Lock に対応していません。 Num Lock キーがある古い MacBook 上では、Num Lock キーによってイベントは何も発生しません。また、 F14 キーが接続されている外部キーボードであれば、 Gecko は Scroll Lock に対応しています。古い特定のバージョンの Firefox では、このキーによって `keypress` イベントが発生していました。この矛盾する挙動は Firefox バグ 602812 で修正されました。

### 自動リピートの扱い

キーが押されたままになると自動リピートが始まります。これによって以下のようにイベントが連続して発生します。

1. `keydown`
2. `keypress`
3. `keydown`
4. `keypress`
5. <<ユーザーがキーから指を離すまで繰り返し>>
6. `keyup`

この流れは DOM Level 3 仕様書に定義されているものです。しかし、これには以下のような注意点があります。

#### Ubuntu 9.4 など一部の GTK 環境における自動リピート

GTK を用いた環境の中には、自動リピート時にネイティブの key-up イベントが発生するものがあります。このため、キーが連続して押されているのか自動リピートなのかを Gecko 側から認識することはできません。そのようなプラットフォームでの自動リピート時では、以下のようにキーイベントが連続して発生します。

1. `keydown`
2. `keypress`
3. `keyup`
4. `keydown`
5. `keypress`
6. `keyup`
7. <<ユーザーがキーから指を離すまで繰り返し>>
8. `keyup`

こういった環境では残念ながら、自動リピートなのか連打されただけなのかをウェブコンテンツ側から区別することはできません。

例
-

```js
document.addEventListener(
  "keydown",
  (event) => {
    const keyName = event.key;

    if (keyName === "Control") {
      // do not alert when only Control key is pressed.
      return;
    }

    if (event.ctrlKey) {
      // Even though event.key is not 'Control' (e.g., 'a' is pressed),
      // event.ctrlKey may be true if Ctrl key is pressed at the same time.
      alert(`Combination of ctrlKey + ${keyName}`);
    } else {
      alert(`Key pressed ${keyName}`);
    }
  },
  false,
);

document.addEventListener(
  "keyup",
  (event) => {
    const keyName = event.key;

    // As the user releases the Ctrl key, the key is no longer active,
    // so event.ctrlKey is false.
    if (keyName === "Control") {
      alert("Control key was released");
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # interface-keyboardevent |

`KeyboardEvent` インターフェイスの草案は数多く提案されてきました。まず最初は DOM Events Level 2 でしたが意見がまとまらず破棄され、続いて DOM Events Level 3 が提案されました。これにより、標準外な初期化メソッドが実装されてしまいました (Gecko では DOM Events Level 2 の初期に定義されていた `KeyboardEvent.initKeyEvent()` が、他のブラウザーでは DOM Events Level 3 の初期に定義されていた `KeyboardEvent.initKeyboardEvent()` です)。しかし両者のメソッドは、現代的なコンストラクターである `KeyboardEvent()` で置き換えられてました。

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

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

### 互換性のメモ

* Firefox 65 では、 `keypress` イベントは表示可能でないキーでは発生しなくなりました（Firefox バグ 968056）が、 `Enter` キー、 `Shift` + `Enter` キー、 `Ctrl` + `Enter` キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。
関連情報
----

* `KeyboardEvent.code`.
* `KeyboardEvent.key`.
* `KeyboardEvent.getModifierState()`


BluetoothCharacteristicProperties - Web API

BluetoothCharacteristicProperties
=================================

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

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

Web Bluetooth API の **`BluetoothCharacteristicProperties`** インターフェイスは、指定の `BluetoothRemoteGATTCharacteristic` で有効な操作を提供します。

このインターフェイスは、`BluetoothRemoteGATTCharacteristic.properties` を呼ぶと返されます。

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

`authenticatedSignedWrites` 読取専用
Experimental

キャラクタリスティックの値への署名付き書き込みが許可されているならば `true` となる `boolean` 値を返します。

`broadcast` 読取専用
Experimental

Server Characteristic Configuration Descriptor によりキャラクタリスティックの値のブロードキャストが許可されているならば `true` となる `boolean` 値を返します。

`indicate` 読取専用
Experimental

キャラクタリスティックの値のアクノリッジメントありのインジケーションが許可されているならば `true` となる `boolean` 値を返します。

`notify` 読取専用
Experimental

キャラクタリスティックの値のアクノリッジメントなしのノーティフィケーションが許可されているならば `true` となる `boolean` 値を返します。

`read` 読取専用
Experimental

キャラクタリスティックの値の読み取りが許可されているならば `true` となる `boolean` 値を返します。

`reliableWrite` 読取専用
Experimental

キャラクタリスティックへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。

`writableAuxiliaries` 読取専用
Experimental

キャラクタリスティックディスクリプターへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。

`write` 読取専用
Experimental

キャラクタリスティックへのレスポンスありの書き込みが許可されているならば `true` となる `boolean` 値を返します。

`writeWithoutResponse` 読取専用
Experimental

キャラクタリスティックへのレスポンスなしの書き込みが許可されているならば `true` となる `boolean` 値を返します。

例
-

以下の例では、GATT キャラクタリスティックが値の変化の通知に対応しているかを調べる方法を示します。

```js
let device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ["heart\_rate"] }],
});
let gatt = await device.gatt.connect();
let service = await gatt.getPrimaryService("heart\_rate");
let characteristic = await service.getCharacteristic("heart\_rate\_measurement");
if (characteristic.properties.notify) {
  characteristic.addEventListener(
    "characteristicvaluechanged",
    async (event) => {
      console.log(`心拍数測定の受信: ${event.target.value}`);
    },
  );
  await characteristic.startNotifications();
}
```

仕様書
---

| Specification |
| --- |
| Web Bluetooth # characteristicproperties-interface |

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

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


TextTrack - Web API

TextTrack
=========

`TextTrack` インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の `<track>` 要素に関連付けられたテキストトラックを記述および制御します。

EventTarget

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

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

`TextTrack.activeCues` 読取専用

現在アクティブなテキストトラックキューのセットをリストする `TextTrackCueList` オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。

`TextTrack.cues` 読取専用

トラックのすべてのキューを含む `TextTrackCueList`。

`TextTrack.id` 読取専用

トラックがある場合は、それを識別する文字列です。 ID がない場合、この値は空文字列 (`""`) です。 `TextTrack` が `<track>` 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。

`TextTrack.inBandMetadataTrackDispatchType` 読取専用

文字列で、トラックの帯域内メタデータトラックディスパッチ種別を示します。

`TextTrack.kind` 読取専用

文字列で、 `TextTrack` が記述するテキストトラックの kind を示します。 値は許可されている値の何れかでなければなりません。

`TextTrack.label` 読取専用

テキストトラックのラベルがあれば、それを含む人間が読める文字列です。 それ以外の場合、これは空文字列 (`""`) になります。 空文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。

`TextTrack.language` 読取専用

文字列で、テキストトラックの内容が書かれているテキスト言語を指定します。 値は、HTML の `lang` 属性と同じように、 RFC 5646: Tags for Identifying Languages (BCP 47 とも) で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は `"en-US"`、ブラジルポルトガル語の場合は `"pt-BR"` になります。

`TextTrack.mode`

文字列で、トラックの現在のモードを指定します。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値はテキストトラックモード定数にリストされています。既定値は `disabled` ですが、 `<track>` 要素の `default` 論理属性が指定されていた場合は、既定のモードは `started` になります。

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

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

**メモ:** `TextTrackCue` インターフェイスは、 `VTTCue` などの他のキューインターフェイスの親クラスとして使用される抽象クラスです。したがって、キューを追加または削除する場合は、`TextTrackCue` を継承するキューの種類のいずれかを入力することになります。

`TextTrack.addCue()`

(`TextTrackCue` オブジェクトとして指定された) キューをトラックのキューのリストに追加します。

`TextTrack.removeCue()`

トラックのキューのリストから (`TextTrackCue` オブジェクトとして指定された) キューを取り除きます。

イベント
----

`cuechange`

 キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。
 `oncuechange` プロパティからも利用できます。

例
-

以下の例は、新しい `TextTrack` を動画に追加し、 `TextTrack.mode` を使用して表示するように設定します。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # texttrack |

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

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

関連情報
----

* WebVTT
* `TextTrackCueList`
* `VTTCue`
* `<track>`
* `HTMLTrackElement`


UI イベント - Web API

UI イベント
=======

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

UI イベント API は、マウスやキーボード入力などのユーザーとの対話を処理するためのシステムを定義します。これには以下のものが含まれます。

* キー入力やマウスクリックなど、特定のユーザー操作で発行されるイベント。これらのイベントのほとんどは `Element` インターフェイス上で発生しますが、リソースの読み込みとアンロードに関連するイベントは `Window` インターフェイス上で発生します。
* これらのイベントのハンドラーに渡される、イベントインターフェイス。これらのインターフェイスは `Event` を継承しており、ある種類のユーザーとの対話に特化した追加情報を提供します。例えば、 `KeyboardEvent` は `keydown` イベントハンドラーに渡され、押されたキーに関する情報を提供します。
インターフェイス
--------

`CompositionEvent`

コンポジションイベントのハンドラーに渡されます。コンポジションイベントにより、ユーザーが物理キーボードでは利用できない文字を入力することができます。（訳注：かな漢字変換による入力などが該当します。）

`FocusEvent`

フォーカスを受けたり失ったりする要素に関連するフォーカスイベントのハンドラーに渡されます。

`InputEvent`

例えば `<input>` 要素を使用して、ユーザーが何らかの入力を行うことに関連付けられた入力イベントのハンドラーに使用します。

`KeyboardEvent`

キーボードを押す／離すイベントのハンドラーに渡されます。

`MouseEvent`

マウスの移動、マウスオーバーやマウスアウト、マウスボタンの押す／離すなどのマウスイベントのイベントハンドラーに渡されます。なお、`auxclick`、`click`、`dblclick` イベントでは `PointerEvent` オブジェクトが渡されます。

`MouseScrollEvent`
非推奨

非推奨です。 Firefox 専用のスクロールイベント用標準外インターフェイスです。代わりに `WheelEvent` を使用してください。

`MutationEvent`
非推奨

変化イベントハンドラーに渡され、 DOM の変化を通知できるように設計されています。これで非推奨です。代わりに `MutationObserver` を使用してください。

`UIEvent`

他の UI イベントが継承するベースであり、 `load` や `unload` などのイベントに渡されるイベントインターフェイスでもあります。

`WheelEvent`

`wheel` イベントのハンドラーに渡されます。このイベントは、ユーザーがマウスホイールやタッチパッドなどのユーザーインターフェイス部品を回転させたときに発生します。

イベント
----

`abort`

リソースの読み込みが（例えば、ユーザーがキャンセルしたために）中止された場合に発行されます。

`auxclick`

ユーザーがポインターの主要ボタン以外のボタンをクリックしたときに発行されます。

`beforeinput`

ユーザー入力によって DOM が更新される直前に発行されます。

`blur`

要素がフォーカスを失ったときに発行されます。

`click`

ユーザーがポインターの主要ボタンをクリックしたときに発行されます。

`compositionend`

テキスト生成システム（音声入力プロセッサーなど）がそのセッションを完了した場合に発行されます（例えばユーザーが閉じられた場合など）。

`compositionstart`

ユーザーがテキスト生成システム（訳注：かな漢字変換など）で新しいセッションを開始したときに発行されます。

`compositionupdate`

テキスト生成システムがそのテキストを新しい文字で更新し、 `CompositionEvent` の `data` プロパティの更新を反映したときに発行されます。

`contextmenu`

コンテキストメニューを呼び出す直前に発行されます。

`dblclick`

ユーザーがポインターの主要ボタンをダブルクリックしたときに発行されます。

`error`

リソースが読み込まれなかったり、処理できなかったりした場合に発行されます（例えば、画像が無効であったり、スクリプトにエラーがあったりした場合）。

`focus`

要素がフォーカスを受け取ったときに発行されます。

`focusin`

要素がフォーカスを受け取る寸前に発行されます。

`focusout`

要素のフォーカスが失われる寸前に発行されます。

`input`

DOM がユーザー入力（例えばテキスト入力）で更新された直後に発行されます。

`keydown`

ユーザーがキーを押したときに発行されます。

`keypress`
非推奨

ユーザーがキーを押したときに、そのキーが文字を生成する場合にのみ発行されます。代わりに `keydown` を使用してください。

`keyup`

ユーザーがキーを離したときに発行されます。

`load`

スタイルシートや画像などの依存リソースをすべて含めて、ページ全体が読み込まれたときに発行されます。

`mousedown`

ポインターがある要素の上にあるときに、ユーザーがマウスや他のポインティングデバイスのボタンを押すと発行されます。

`mouseenter`

マウスや他のポインティングデバイスが、ある要素またはそのいずれかの子孫の境界の内側に移動したときに発行されます。

`mouseleave`

マウスや他のポインティングデバイスが、ある要素とその子孫のすべての境界の外に移動したときに発行されます。

`mousemove`

マウスや他のポインティングデバイスが、ある要素の上を移動したときに発行されます。

`mouseout`

マウスや他のポインティングデバイスが、ある要素の境界の外に移動したときに発行されます。

`mouseover`

マウスや他のポインティングデバイスが、ある要素の上に移動したときに発行されます。

`mouseup`

ポインターが要素の上にあるときに、ユーザーがマウスや他のポインティングデバイスのボタンを離したときに発行されます。

`unload`

文書または子リソースがアンロードされるときに発行されます。

`wheel`

ユーザーがマウスホイールやタッチパッドなどのインターフェイス部品を回転させたときに発行されます。

例
-

### マウスイベント

この例では、マウスイベントを、イベントが発生した X 座標と Y 座標とともにログ出力します。マウスを黄色と赤の四角の中に移し、クリックまたはダブルクリックしてみてください。

#### HTML

```html
<div id="outer">
  <div id="inner"></div>
</div>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>
```

#### CSS

```css
body {
  display: flex;
  gap: 1rem;
}

#outer {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

#inner {
  height: 100px;
  width: 100px;
  background-color: red;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}
```

#### JavaScript

```js
const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

outer.addEventListener("click", (event) => {
  log(event);
});

outer.addEventListener("dblclick", (event) => {
  log(event);
});

outer.addEventListener("mouseover", (event) => {
  log(event);
});

outer.addEventListener("mouseout", (event) => {
  log(event);
});

outer.addEventListener("mouseenter", (event) => {
  log(event);
});

outer.addEventListener("mouseleave", (event) => {
  log(event);
});

function log(event) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  const line = `${event.type}(${event.clientX}, ${event.clientY})`;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});
```

#### 結果

### キーボードイベントと入力イベント

この例では、`keydown`、`beforeinput`、`input` のイベントをログ出力します。テキストエリアに入力してみてください。 `Shift` などのキーでは `keydown` イベントが発生しますが、 `input` イベントは発生しないことに注意してください。

#### HTML

```html
<textarea id="story" rows="5" cols="33"></textarea>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>
```

#### CSS

```css
body {
  display: flex;
  gap: 1rem;
}

#story {
  padding: 0.5rem;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}
```

#### JavaScript

```js
const story = document.querySelector("#story");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

story.addEventListener("keydown", (event) => {
  log(`${event.type}(${event.key})`);
});

story.addEventListener("beforeinput", (event) => {
  log(`${event.type}(${event.data})`);
});

story.addEventListener("input", (event) => {
  log(`${event.type}(${event.data})`);
});

function log(line) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events  |

関連情報
----

* ポインターイベント API
* タッチイベント


XMLDocument - Web API

XMLDocument
===========

**XMLDocument** インターフェイスは XML ドキュメントを示します。汎用的な `Document` を継承し、特定のメソッドやプロパティを追加しません: それでも２つのタイプのドキュメントでは、いくつかのアルゴリズムの動作がことなります。

EventTarget

Node

Document

XMLDocumentプロパティ
-----

*また、 `Document` からプロパティを継承します。*

`XMLDocument.async`
Non-standard

非推奨

`XMLDocument.load()` (en-US) と併用して、非同期リクエストを示します。

メソッド
----

*また、 `Document` からメソッドを継承します。*

`XMLDocument.load()` (en-US)
Non-standard

非推奨

XML ドキュメントをロードします。

仕様
--

| Specification |
| --- |
| DOM Standard # xmldocument |

ブラウザー実装状況
---------

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

関連項目
----

* The DOM interfaces index.


TextTrackCueList - Web API

TextTrackCueList
================

**`TextTrackCueList`** は配列風オブジェクトで、動的に更新される `TextTrackCue` オブジェクトのリストを表します。

このインターフェイスにはコンストラクターはありません。このオブジェクトのインスタンスを `TextTrack.cues` で取得し、これが `TextTrack` オブジェクト内のすべてのキューを返します。

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

`TextTrackCueList.length` 読取専用

`unsigned long` で、リスト内のキューの数です。

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

`TextTrackCueList.getCueById()`

渡された識別子を持つ最初の `TextTrackCue` オブジェクトを返します。

例
-

`HTMLMediaElement.textTracks` プロパティは、`TextTrackList` (en-US) オブジェクトを返します。これは、メディアにリンクされたテキストトラックごとに 1 つずつ、すべての `TextTrack` オブジェクトを列挙します。次に `TextTrack.cues` プロパティは、その具体的なトラックのキューを格納した `TextTrackCueList` を返します。

```js
const video = document.getElementById("video");
video.onplay = () => {
  console.log(video.textTracks[0].cues);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # texttrackcuelist |

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

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


IDBDatabase - Web API

IDBDatabase
===========

IndexedDB API の `IDBDatabase` インターフェイスは、データベースへの接続を提供します。`IDBDatabase` オブジェクトで、データベースのトランザクションを開き、データベースのオブジェクト（データ）を生成したり、操作したり、削除したりできます。このインターフェイスはデータベースのバージョンを取得したり、統合したりする唯一の方法を提供します。

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

**メモ:** IndexedDB 内で行う全ての操作は、データベース内のデータとの作用を表すトランザクションの文脈で起こります。IndexedDB 内の全てのオブジェクト (オブジェクトストア、インデックス、カーソルを含みます) は、特定のトランザクションに紐づいています。そのため、トランザクション外では、コマンドを実行したり、データにアクセスしたり、何かを開いたりできません。

EventTarget

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

`IDBDatabase.name` 読取専用

文字列で、接続しているデータベース名が入ります。

`IDBDatabase.version` 読取専用

64 ビット整数で、接続しているデータベースのバージョンが入ります。データベースが初めて作られた場合、この属性は空文字列です。

`IDBDatabase.objectStoreNames` 読取専用

接続しているデータベースのオブジェクトストア名のリストを含む`DOMStringList`。

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

EventTarget から継承しています。

`IDBDatabase.close()`

即座に応答して、別スレッドでデータベースを閉じます。

`IDBDatabase.createObjectStore()`

新しくオブジェクトストアかインデックスを生成して返します。

`IDBDatabase.deleteObjectStore()`

接続中のデータベース内の与えられた名前のオブジェクトストアを、参照しているインデックスとともに削除します。

`IDBDatabase.transaction()`

オブジェクトストアにアクセスできる`IDBTransaction.objectStore`メソッドを含むトランザクションオブジェクト (`IDBTransaction`) を即座に返します。別スレッドで実行されます。

イベント
----

`addEventListener()` を用いるか、このインターフェイスの `oneventname` プロパティにイベントリスナーを代入することで、これらのイベントを待ち受けできます。

`close`

データベースへの接続が予期せず閉じられたとき発行されるイベントです。

`versionchange`

データベースの構造の変更が要求されたとき発行されるイベントです。

`IDBTransaction` からのイベントバブリングにより、`IDBDatabase` で以下のイベントが利用可能です。

`IDBTransaction` `abort`

トランザクションが中止されたときに発行されるイベントです。

`IDBTransaction` `error`

要求がエラーを返し、イベントが接続オブジェクトにバブリングしたとき発行されるイベントです。

例
-

次のコードスニペットでは、データベースを非同期で開き (`IDBFactory`)、成功と失敗の場合にイベントを登録し、アップグレードが必要な場合には、新しいオブジェクトストアを生成しています (`IDBdatabase`)。 完璧に動作する例は、To-do Notifications アプリケーション (動く例を見る) を見てください。

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

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

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

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

  // displayData() 関数を実行し、タスクリストに既に IDB にある全ての to-do リストデータを入れます。
  displayData();
};

// このイベントハンドラーは、新しいバージョンのデータベースの作成が必要なことを表すイベントを処理します。
// これは、データベースが作成されていないときや、上の行の window.indexedDB.open に
// 新しいバージョン番号が渡されたときです。

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = (event) => {
    note.innerHTML += "<li>データベースの読み込みに失敗しました｡</li>";
  };

  // IDBDatabase.createObjectStore を用いてデータベースにオブジェクトストアを作成します。

  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // オブジェクトストアにどのようなデータ項目が入るかを定義します。

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += "<li>オブジェクトストアが作成されました。</li>";
};
```

次の行は、データベースでトランザクションを開いて、そしてオブジェクトストアを開いて、中のデータを操作しています。

```js
const objectStore = db
  .transaction("toDoList", "readwrite")
  .objectStore("toDoList");
```

仕様書
---

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

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

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

関連情報
----

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


CSSSkew() - Web API

CSSSkew()
=========

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

**`CSSSkew()`** コンストラクターは、新しい `CSSSkew` オブジェクトを返します。これは、CSS の `transform` プロパティの `skew()` の値を表します。

構文
--

```js
new CSSSkew(ax, ay)
```

### 引数

`ax`

構築される `CSSSkew` オブジェクトの `ax` (X 軸) 角度を表す値です。これは `CSSNumericValue` である必要があります。

`ay`

構築される `CSSSkew` オブジェクトの `ay` (Y 軸) 角度を表す値です。これは `CSSNumericValue` である必要があります。

例
-

To do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-cssskew |

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

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


CSSSkew.ay - Web API

CSSSkew.ay
==========

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

**`ay`** は `CSSSkew` インターフェイスのプロパティで、 Y 軸（または縦軸）に沿って要素を歪ませるために使用される角度を取得または設定します。

値
-

`CSSNumericValue` です。

例
-

To do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-ay |

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

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


CSSSkew.ax - Web API

CSSSkew.ax
==========

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

**`ay`** は `CSSSkew` インターフェイスのプロパティで、 X 軸（または横軸）に沿って要素を歪ませるために使用される角度を取得または設定します。

値
-

`CSSNumericValue` です。

例
-

To do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-ax |

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

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


Document: fragmentDirective プロパティ - Web API

Document: fragmentDirective プロパティ
=================================

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

**`fragmentDirective`** は `Document` インターフェイスの読み取り専用プロパティで、現在の文書の `FragmentDirective` を返します。

値
-

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

例
-

対応するブラウザーの開発ツールを使用して、1 つ以上の一致するテキストフラグメントがあるタブで、以下を実行してみてください。

```js
document.fragmentDirective;
```

以下のような構造を持つ `FragmentDirective` オブジェクトインスタンスが返されるはずです。

```js
items: [
  {
    prefix: "",
    textStart: "Module Workers",
    textEnd: "",
    suffix: "support",
    type: "text",
  },
  {
    prefix: "feedback on",
    textStart: "usability",
    textEnd: "",
    suffix: "",
    type: "text",
  },
];
```

この機能は、現在は主に機能検出を目的としていますが、将来的には、翻訳ヒントなど他の情報を記載するために展開することができます。

仕様書
---

| Specification |
| --- |
| URL Fragment Text Directives # dom-document-fragmentdirective |

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

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

関連情報
----

* テキストフラグメント
* `::target-text`


Document.getAnimations() - Web API

Document.getAnimations()
========================

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

`getAnimations()` メソッドは `Document` インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての `Animation` オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。

構文
--
```

var allAnimations = Document.getAnimations();
```

### 引数

なし。

### 返値

`Animation` オブジェクトの `Array` で、それぞれの要素は呼び出された `Document` の配下にある要素に現在関連付けられているアニメーション 1 つを表します。

例
-

次のコードスニペットは、ページ上のすべてのアニメーションの `Animation.playbackRate` を半分にすることで速度をゆっくりにします。

```js
document.getAnimations().forEach(function (animation) {
  animation.playbackRate \*= 0.5;
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-documentorshadowroot-getanimations |

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

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

関連情報
----

* ウェブアニメーション API
* CSS アニメーション
* CSS トランジション
* `Element.getAnimations()` - 単一の要素 (`Element`) とその子孫にあるアニメーションのみを読み取る
* `Animation`


Document: readyState プロパティ - Web API

Document: readyState プロパティ
==========================

**`Document.readyState`** プロパティは `document` の読み込み状態を記述します。

このプロパティの値が変化すると、 `readystatechange` イベントが `document` オブジェクトに発行されます。

### 値

文書の `readyState` は次のうちのいずれかになります。

`loading`

この文書 (`document`) はまだ読み込み中です。

`interactive`

文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。この状態は、 `DOMContentLoaded` イベントが発行されようとしていることを示します。

`complete`

文書とすべてのサブリソースの読み込みが完了しました。この状態は `load` イベントが発行されようとしていることを示しています。

例
-

### さまざまな準備状態

```js
switch (document.readyState) {
  case "loading":
    // この文書はまだ読み込み中。
    break;
  case "interactive": {
    // この文書は読み込みが終了した。 DOM 要素にアクセスできるようになった。
    // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。
    const span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  }
  case "complete":
    // ページが完全に読み込み完了。
    console.log(
      `最初の CSS ルール: ${document.styleSheets[0].cssRules[0].cssText}`,
    );
    break;
}
```

### readystatechange を DOMContentLoaded イベントの代替とする

```js
// DOMContentLoaded イベントの代替
document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    initApplication();
  }
};
```

### readystatechange を load イベントの代替とする

```js
// Alternative to load event
document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};
```

### readystatechange を DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用

```js
document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # current-document-readiness |

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

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

関連情報
----

* 関連イベント:
    + `readystatechange` イベント
    + `DOMContentLoaded` イベント
    + `load` イベント


Document.rootElement - Web API

Document.rootElement
====================

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

**`Document.rootElement`** は `Element` を返します。これは
 `<svg>` 要素の場合は `document` のルート要素で、それ以外の場合は `null` です。これはすべてのルート要素を返す `Document.documentElement` に置き換えられて非推奨になりました。

構文
--

```js
const element = document.rootElement;
```

メモ
--

文書が空ではない SVG 要素の場合、`rootElement` は `SVGSVGElement` (en-US) となり、 `documentElement` と同じものになります。

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGDocument\_\_rootElement |


Document.createEvent() - Web API

Document.createEvent()
======================

**警告:** `createEvent` とともに使用される多くのメソッド (`initCustomEvent` など) は非推奨です。代わりに イベントのコンストラクター を使用してください。

指定された型の イベント を作成します。返されるオブジェクトは最初に初期化する必要があり、その後で `EventTarget.dispatchEvent` へ渡すことができます。

構文
--

```js
var event = document.createEvent(type);
```

* `event` は作成された イベント オブジェクトです。
* `type` は作成するイベント型を表す文字列です。取り得るイベント型は `"UIEvents"`, `"MouseEvents"`, `"MutationEvents"`, `"HTMLEvents"` のいずれかです。詳しくは注の項目を参照してください。
例
-

```js
// イベントを作成します。
var event = document.createEvent("Event");

// イベントの名前を 'build' に定義します。
event.initEvent("build", true, true);

// イベントを待受します。
elem.addEventListener(
  "build",
  function (e) {
    // e.target が elem に対応する
  },
  false,
);

// ターゲットは任意の Element やほかの EventTarget にすることができます。
elem.dispatchEvent(event);
```

注
-

`createEvent()` に渡すのに適したイベント型を表す文字列は DOM 標準で定義されています。ステップ 2 の表をご覧ください。現在はほとんどのイベントオブジェクトにコンストラクターがあり、それらはイベントオブジェクトのインスタンスを生成するために推奨される、現代的な方法であることに注意してください。

Gecko は非標準のイベントオブジェクトの別名をサポートしています。詳細は以下の表を参照してください。

| イベントモジュール | 標準イベントオブジェクト | Gecko が対応する別名 |
| --- | --- | --- |
| テキストイベントモジュール | `TextEvent` | `TextEvents` |
| キーボードイベントモジュール | `KeyboardEvent` | `KeyEvents` |
| 基本イベントモジュール | `Event` | `Events` |

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-document-createevent |

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

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

関連情報
----

* イベントの作成と発行


Document.applets - Web API

Document.applets
================

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

`Document` インターフェイスの **`applets`** プロパティは、文書内のアプレットのリストを返します。

**メモ:** `<applet>` 要素は Gecko 56 および 2015 年後期の Chrome から削除されました。それ以来、これらのブラウザーで `document.applets` を呼び出しても空の `HTMLCollection` しか返しません。 WebKit および Edge でも削除が検討されています。

構文
--
```

var nodeList = document.applets;
```

### 値

`HTMLCollection`例
-

```js
// 2番目のアプレットが取得したいアプレットであると分かっている場合
my_java_app = document.applets[1];
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-applets |

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

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


Document.body - Web API

Document.body
=============

**`Document.body`** プロパティは、その文書の `<body>` または `<frameset>` ノードを表し、そのような要素がなければ `null` になります。

構文
--
```

const objRef = document.body
document.body = objRef
```

例
-

```js
// Given this HTML: <body id="oldBodyElement"></body>
alert(document.body.id); // "oldBodyElement"

const aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"
```

注
-

`document.body` は文書の内容を持つ要素です。 `<body>` の内容を持つ文書では `<body>` 要素を返し、フレームセット文書では、これは最も外側の `<frameset>` 要素を返します。

`body` プロパティは設定が可能ですが、文書に新しい `body` を設定すると、既存の `<body>` 要素の子ノードは全て削除されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-body-dev |

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

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

関連情報
----

* `document.head`


Document: fullscreen プロパティ - Web API

Document: fullscreen プロパティ
==========================

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

廃止された `Document` インターフェイスの **`fullscreen`** プロパティは読み取り専用で、文書が現在全画面モードで表示されているかどうかを報告します。

このプロパティは読み取り専用ですが、変更されても（厳格モードでも）例外を投げません。セッターは何もしないので、無視されます。

**メモ:** このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 `Document.fullscreenElement` が `null` ではないことで確認することができます。

返値
--

真偽値であり、文書が全画面モードで表示されているときに `true`、それ以外の場合に `false` になります。

例
-

このシンプルな関数は、現在全画面モードがアクティブになっているかどうかを、廃止された `fullscreen` プロパティを使用して報告しています。

```js
function isDocumentInFullScreenMode() {
  return document.fullscreen;
}
```

一方、次の例では、現在の `fullscreenElement` プロパティを使用して同じことを確認しています。

```js
function isDocumentInFullScreenMode() {
  return document.fullscreenElement !== null;
}
```

`fullscreenElement` が `null` でなければ、これは `true` を返し、全画面モードで表示されていることを示します。

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # dom-document-fullscreen |

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

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

関連情報
----

* 全画面 API
* 全画面 API ガイド
* `Document.fullscreenEnabled`


Document.writeln() - Web API

Document.writeln()
==================

テキストの文字列とその直後に続く改行文字を文書に書き込みます。

構文
--
```

document.writeln(line);
```

### 引数

* `line` はテキストの行を含む文字列です。
例
-
```

document.writeln("<p>パスワードを入力してください:</p>");
```

メモ
--

**document.writeln** は `document.write` と同じですが、改行文字を追加します。

**メモ:** **document.writeln** は (**document.write** と同様に) XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" [`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が `application/xhtml+xml` の MIME タイプで提供されたときに発生します。詳細は W3C XHTML FAQ で確認することができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-writeln-dev |

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

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


Document.URL - Web API

Document.URL
============

`Document` インターフェイスの **`URL`** プロパティは読取専用で、文書の位置を文字列で返します。

構文
--

```js
const url = document.URL;
```

例
-

### JavaScript

```js
document.getElementById("url").textContent = document.URL;
```

### HTML

```html
<p id="urlText">
  URL:<br />
  <span id="url">URL goes here</span>
</p>
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-url① |

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

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

関連情報
----

* 同じ値を返す `document.documentURI` プロパティ


Document: execCommand() メソッド - Web API

Document: execCommand() メソッド
============================

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

HTML 文書がデザインモード (`designMode`) に切り替わっていると、その `document` オブジェクトは **`execCommand`** メソッドを公開して、フォーム入力欄や `contentEditable` を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。

多くのコマンドは、文書の選択範囲に対して影響を及ぼしますが（太字、イタリック、など）、他にも新しい要素の挿入（リンクの追加）や行全体に影響するもの（字下げ）もあります。 `contentEditable` を使用した場合、 `execCommand()` は現在アクティブな編集可能要素に影響を及ぼします。

クリップボード API は多くの場合、`execCommand` の代わりに使用することができますが、`execCommand` が便利なこともあります。特に、クリップボード API は `insertText` コマンドの代わりを提供していません。これは `textarea` や `input` 要素でアンドゥバッファー（編集履歴）に保存してからカーソル位置のテキストをプログラムから置き換えるのに使うことができます。

構文
--

```js
execCommand(aCommandName, aShowDefaultUI, aValueArgument)
```

### 引数

`aCommandName`

文字列で、実行するコマンドの名前を指定します。以下のコマンドが使用できます。

`backColor`

文書の背景色を変更します。 `styleWithCss` モードでは、文書ではなく含まれているブロックの背景色に影響します。この場合、引数として `<color>` 値の文字列を渡す必要があります。

`bold`

選択範囲または挿入位置の太字のオンとオフを切り替えます。

`contentReadOnly`

内容の文書の読み取り専用または編集可能を切り替えます。引数として true または false の論理値が必要です。

`copy`

現在の選択範囲をクリップボードにコピーします。この動作が有効になる条件は、ブラウザーによって様々であり、時の経過により発展する可能性があります。このコマンドが使用可能かどうかは、ブラウザーの互換性の節で確認してください。

`createLink`

選択範囲からハイパーリンクを作成しますが、選択範囲が`ある`ときだけです。ハイパーリンクの `href` の引数として、URI 文字列が必要です。 URI は少なくとも1文字を含む必要があり、ホワイトスペースでもかまいません。

`cut`

現在の選択範囲を除去して、クリップボードにコピーします。いつこの動作が有効になるかはブラウザーによって様々であり、条件は時期によって変化しています。使用方法の詳細は互換性一覧表で確認してください。

`decreaseFontSize`

選択範囲の前後または挿入位置に `<small>` タグを追加します。

`defaultParagraphSeparator`

編集可能なテキスト領域に新しい段落が作成された時の、段落区切りを変更します。詳しくはマークアップ生成の違いを参照してください。

`delete`

現在の選択範囲を削除します。

`enableAbsolutePositionEditor`

絶対配置の要素を移動させるためのグラバーを有効化または無効化します。 Firefox 64 以降では、既定で無効です。 (Firefox バグ 1490641)

`enableInlineTableEditing`

表の行/列の挿入・削除コントロールを有効または無効にします。 Firefox 64 以降では、既定で無効です。 (Firefox バグ 1490641)

`enableObjectResizing`

画像、表、絶対配置の要素、などの大きさの変更が可能なオブジェクトにおいて、大きさ変更用のハンドルを有効化または無効化します。 Firefox 64 以降では、既定で無効です。 (Firefox バグ 1490641)

`fontName`

選択範囲または挿入位置のフォント名を変更します。引数としてフォント名の文字列（`"Arial"` など）が必要です。

`fontSize`

選択範囲または挿入位置のフォントサイズを変更します。引数として `1` - `7` の整数値が必要です。

`foreColor`

選択範囲または挿入位置のフォント色を変更します。引数として 16 進表記で色の値の文字列が必要です。

`formatBlock`

現在の選択範囲を含む行の前後に HTML ブロックレベル要素を追加し、すでに存在する場合は、その行を含むブロック要素に置き換えます (Firefox では `<blockquote>` は例外です。 — これはブロック要素を囲みます)。引数としてタグ名の文字列が必要です。実質的にすべてのブロックレベル要素を利用することができます。（古い Edge は見出しタグ `H1`–`H6`, `ADDRESS`, `PRE` のみに対応しており、`"<H1>"` のように山かっこで囲む必要があります。）

`forwardDelete`

カーソル位置より前の文字を 1 文字削除します。これは、 Windows のキーボードで Delete キーを押すのと同じ動作です。

`heading`

選択範囲または挿入位置の行の周りに見出し要素を追加します。引数としてタグ名の文字列（つまり `"H1"` や `"H6"`）が必要です。 (Safari は対応していません。)

`hiliteColor`

選択範囲または挿入位置の背景色を変更します。引数として color 値の文字列が必要です。この機能は `useCSS` を `true` にしないと使えません。

`increaseFontSize`

選択範囲または挿入位置に `<big>` タグを追加します。

`indent`

選択範囲または挿入位置を含む行を字下げします。Firefox では、選択範囲が字下げレベルの異なる複数行にわたる場合、選択範囲内の最も字下げの少ない行のみが字下げされます。

`insertBrOnReturn`

Enter キーで `<br>` 要素を挿入するか現在のブロック要素を二分割するかを制御します。

`insertHorizontalRule`

挿入位置に `<hr>` 要素を挿入するか、選択範囲を置き換えるかします。

`insertHTML`

挿入位置に HTML 文字列を挿入します (選択範囲は削除されます)。引数として正しい HTML 文字列が必要です。(Internet Explorer では対応していません。)

`insertImage`

挿入位置に画像を挿入します (選択範囲は削除されます)。引数として画像の `src` のための URL 文字列が必要です。この文字列の要求事項は、 `createLink` と同じです。

`insertOrderedList`

選択範囲または挿入位置に番号付き順序付きリストを生成します。

`insertUnorderedList`

選択範囲または挿入位置行頭記号付き順序なしリストを生成します。

`insertParagraph`

選択範囲の前後または現在の行に段落を挿入します。

`insertText`

挿入位置に与えられたプレーンテキストを挿入します (選択範囲は削除されます)。

`italic`

選択範囲または挿入位置のイタリック体のオンとオフを切り替えます。

`justifyCenter`

選択範囲または挿入位置を中央揃えにします。

`justifyFull`

選択範囲または挿入位置を両端揃えにします。

`justifyLeft`

選択範囲または挿入位置を左寄せにします。

`justifyRight`

選択範囲または挿入位置を右寄せにします。

`outdent`

選択範囲または挿入位置を含む行の字下げを戻します。

`paste`

クリップボードのコンテンツを挿入位置に貼り付け（ペースト）します（現在の選択範囲は置き換えられます）。ウェブコンテンツでは無効です。

`redo`

前回の undo コマンドを元に戻します。

`removeFormat`

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

`selectAll`

編集可能領域のすべてのコンテンツを選択します。

`strikeThrough`

選択範囲または挿入位置の取り消し線のオンとオフを切り替えます。

`subscript`

選択範囲または挿入位置の下付き文字のオンとオフを切り替えます。

`superscript`

選択範囲または挿入位置の上付き文字のオンとオフを切り替えます。

`underline`

選択範囲または挿入位置の下線のオンとオフを切り替えます。

`undo`

最後に実行したコマンドを取り消します。

`unlink`

選択されたハイパーリンクからアンカー要素を削除します。

`useCSS`
非推奨

生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。

**メモ:** この引数は論理が逆です（つまり、`false` で CSS が使用され、`true` で HTML が使用される）。これは `styleWithCSS` に置き換えられ、非推奨になりました。

`styleWithCSS`

`useCSS` コマンドを置き換えるものです。`true` はマークアップ時に `style` 属性が生成または変更され、false では書式要素が生成されます。

`AutoUrlDetect`

ブラウザーの自動リンクの動作を変更します。

`aShowDefaultUI`

論理値で、既定のユーザーインターフェイスを表示するかどうかを指示します。 Mozilla では未実装です。

`aValueArgument`

入力引数を必要とするコマンド向けのもので、その情報を提供する文字列です。例えば、 `insertImage` では挿入する画像の URL です。引数が不要な場合は `null` を指定してください。

### 返値

論理値で、コマンドが対応していないか無効であれば `false` になります。

**メモ:** `document.execCommand()` はユーザーの操作の中で行われた場合にのみ `true` を返します。コマンドを呼び出す前に、ブラウザーが対応しているかどうかを調べるために返値を使用しないでください。 Firefox 82 以降は、`document.execCommand()` を重ねて呼び出すと常に `false` を返します。

例
-

execCommand と contentEditable 要素の使用方法の例 (CodePen) です。

### insertText の使用

この例では、2 つの非常に基本的な HTML エディターを示しています。`<textarea>` 要素を用いたものと、 `<pre>` 要素に `contenteditable` 属性を設定したものを用いたものです。

"Bold" または "Italic" ボタンをクリックすると、要素に適切なタグが挿入され、`insertText` を使用して編集履歴が保存されるので、ユーザーは操作を元に戻すことができます。

#### HTML

```html
<h2>textarea</h2>

<div class="actions" data-for="textarea">
  <button data-el="b">Bold</button>
  <button data-el="i">Italic</button>
</div>

<textarea class="editarea">Some text.</textarea>

<h2>contenteditable</h2>

<div class="actions" data-for="pre">
  <button data-el="b">Bold</button>
  <button data-el="i">Italic</button>
</div>

<pre contenteditable="true" class="editarea">Some text.</pre>
```

#### JavaScript

```js
// Prepare action buttons
const buttonContainers = document.querySelectorAll(".actions");

for (const buttonContainer of buttonContainers) {
  const buttons = buttonContainer.querySelectorAll("button");
  const pasteTarget = buttonContainer.getAttribute("data-for");

  for (const button of buttons) {
    const elementName = button.getAttribute("data-el");
    button.addEventListener("click", () =>
      insertText(`<${elementName}></${elementName}>`, pasteTarget),
    );
  }
}

// Inserts text at cursor, or replaces selected text
function insertText(newText, selector) {
  const textarea = document.querySelector(selector);
  textarea.focus();

  let pasted = true;
  try {
    if (!document.execCommand("insertText", false, newText)) {
      pasted = false;
    }
  } catch (e) {
    console.error("error caught:", e);
    pasted = false;
  }

  if (!pasted) {
    console.error("paste unsuccessful, execCommand not supported");
  }
}
```

#### 結果

仕様書
---

この機能は現行の仕様書に含まれていません。標準化の予定もありません。

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

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

関連情報
----

* クリップボード API
* `HTMLElement.contentEditable`
* `document.designMode`


Document.title - Web API

Document.title
==============

**`document.title`** プロパティは、現在の文書の題名を取得または設定します。

構文
--
```

var docTitle = document.title;
```

*docTitle* は *document* の題名を含む文字列です。題名が `document.title` に設定することで上書きされている場合は、その値を含みます。そうでなければ、マークアップの中で指定された題名を含みます (下記のメモを参照)。
```

document.title = newTitle;
```

`newTitle` は文書の新しい題名です。代入すると、 `document.title` の返値、文書に表示される題名 (ウィンドウのタイトルバーやタブなど)、文書の DOM (HTML 文書の `<title>` 要素の内容など) にも反映されます。

例
-

```js
<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>

  <script>
    alert(document.title); // "Hello World!" と表示
    document.title = "Goodbye World!";
    alert(document.title); // "Goodbye World!" と表示
  </script>

</body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # document.title |

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

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


document.links - Web API

document.links
==============

概要
--

`links` プロパティは、文書中の、 `href` 属性の値を持つすべての `<area>` 要素とアンカー要素のコレクションを返します。

構文
--
```

nodeList = document.links;
```

例
-

```js
var links = document.links;

for (var i = 0; i < links.length; i++) {
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");

  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}
```

仕様書
---

* DOM Level 2 HTML: links


Document.createElement() - Web API

Document.createElement()
========================

HTML 文書において、 **`document.createElement()`** メソッドは *tagName* で指定された HTML 要素を生成し、または *tagName* が認識できない場合は `HTMLUnknownElement` を生成します。

構文
--

```js
let element = document.createElement(tagName[, options]);
```

### 引数

*tagName*

生成される要素の型を特定する文字列です。生成される要素の `nodeName` は *tagName* の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 `createElement()` は要素を生成する前に *tagName* を小文字に変換します。 Firefox, Opera, Chrome では、 `createElement(null)` は `createElement("null")` のように動作します。

*options*省略可

省略可能な `ElementCreationOptions` オブジェクトで、 `is` という名前のプロパティをひとつ持ち、その値は前に `customElements.define()` を使用して定義したカスタム要素の名前です。詳しくはウェブコンポーネントの例を参照してください。

### 返値

新しい `Element` です。

**メモ:** 文書が HTMLDocument である場合、新しい HTMLElement を返しますが、これが最も一般的です。それ以外の場合は新しい Element を返します。

例
-

### 基本的な例

この例では新しい `<div>` を生成し、 id が "`div1`" である要素の前に挿入します。

#### HTML

```html
<!doctype html>
<html>
  <head>
    <title>||Working with elements||</title>
  </head>
  <body>
    <div id="div1">The text above has been created dynamically.</div>
  </body>
</html>
```

#### JavaScript

```js
document.body.onload = addElement;

function addElement() {
  // 新しい div 要素を作成します
  const newDiv = document.createElement("div");

  // いくつかの内容を与えます
  const newContent = document.createTextNode("Hi there and greetings!");

  // テキストノードを新規作成した div に追加します
  newDiv.appendChild(newContent);

  // DOM に新しく作られた要素とその内容を追加します
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
```

#### 結果

### ウェブコンポーネントの例

 以下の例の断片は expanding-list-web-component
 の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は `HTMLUListElement` を拡張し、 `<ul>` 要素を表します。

```js
// 要素のためのクラスを作成
class ExpandingList extends HTMLUListElement {
  constructor() {
    // コンストラクターでは常に super を最初に呼び出す
    super();

    // コンストラクターの定義は簡略化のため省略します。
    ...
  }
}

// 新しい要素を定義
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
```

この要素のインスタンスをプログラムで生成したければ、次の行のような呼び出しを使用します。

```js
let expandingList = document.createElement("ul", { is: "expanding-list" });
```

新しい要素には `is` 属性が与えられ、その値はカスタム要素のタグ名になります。

**メモ:** カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createelement① |

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

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

関連情報
----

* `Node.removeChild()`
* `Node.replaceChild()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Node.hasChildNodes()`
* `document.createElementNS()` — 要素の名前空間 URI を明示的に指定するために使用


Document: exitFullscreen() メソッド - Web API

Document: exitFullscreen() メソッド
===============================

`Document` の **`exitFullscreen()`** メソッドは、この文書で現在全画面モードで表示されている要素が全画面モードを抜け、画面を以前の状態に戻すことを要求します。これはふつう、以前の `Element.requestFullscreen()` の呼び出しの効果を取り消します。

構文
--

```js
exitFullscreen()
```

### 引数

なし。

### 返値

ユーザーエージェントが全画面モードから完全に抜けたら解決される `Promise` です。全画面モードから抜けようとしてエラーが発生したら、プロミスの `catch()` ハンドラーが呼び出されます。

例
-

この例ではマウスボタンで中をクリックするたびに、現在の文書が全画面表示になったり戻ったりします。

```js
document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};
```

**メモ:** もっと完全な例については、`Element.requestFullscreen()` の例をご覧ください。

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-exitfullscreen① |

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

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

関連情報
----

* 全画面 API
* 全画面 API のガイド
* `Element.requestFullscreen()`
* `Document.fullscreenElement`
* `:fullscreen` および `::backdrop`
* `<iframe>` の `allowfullscreen` 属性


Document.fullscreenEnabled - Web API

Document.fullscreenEnabled
==========================

`Document` インターフェイスの **`fullscreenEnabled`** プロパティは読み取り専用で、全画面モードが使用できるかを示します。全画面モードは文書内にウィンドウ化されたプラグインを含まないページ、および文書内のすべての `<iframe>` 要素が `allowfullscreen` 属性を持つページに限り使用することができます。

このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。

構文
--
```

var isFullscreenAvailable = document.fullscreenEnabled;
```

### 値

`Boolean` 値であり、文書や要素が `Element.requestFullscreen()` を呼び出すことで全画面モードに移行できるのであれば `true` です。全画面モードが利用できないのであれば、値は `false` になります。

例
-

この例では、 `<video>` 要素に全画面モードへの移行を試みる前に `fullscreenEnabled` の値をチェックし、利用できない場合には移行を試みないようにします。

```js
function requestFullScreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullScreen();
  } else {
    console.log("現在ブラウザーは全画面モードを使用することができません");
  }
}
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenenabled① |

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

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

関連情報
----

* Fullscreen API
* Fullscreen API ガイド
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreenElement`
* `:fullscreen` および `::backdrop`
* `<iframe>` 要素の `allowfullscreen` 属性


Document: scroll イベント - Web API

Document: scroll イベント
=====================

**`scroll`** イベントは、文書のビューまたは要素がスクロールされたときに発生します。
 スクロールが完了したことを検出するには、 `Document: scrollend イベント`を参照してください。
 要素のスクロールには、 `Element: scroll イベント`を参照してください。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("scroll", (event) => {});

onscroll = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

### スクロールイベントの間引き

`scroll` イベントは高い確率で生じることができるため、イベントハンドラーは DOM の変更といった計算上の処理コストの高い操作を実行すべきではありません。その代わり、次のように `requestAnimationFrame()`、`setTimeout()`、`CustomEvent` などを使ってイベントを間引くことをお勧めします。

ただし、入力イベントやアニメーションフレームは同じような割合で発生するため、そのため下記のような最適化は不要の場合が多いことに注意してください。 この例では `requestAnimationFrame` の `scroll` イベントを最適化しています。

```js
let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // 子のスクロール位置で何かを行う
}

document.addEventListener("scroll", (event) => {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

関連情報
----

* Document: `scrollend` イベント
* Element: `scroll` イベント
* Element: `scrollend` イベント


Document.createRange() - Web API

Document.createRange()
======================

**`Document.createRange()`** メソッドは、新しい `Range` オブジェクトを返します。

構文
--
```

range = document.createRange();
```

*range* は生成された `Range` オブジェクトです。

例
-

```js
let range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
```

注
-

`Range` を生成したあと、大部分のメソッドを使用するには境界を設定する必要があります。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-document-createrange |

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

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


Document.requestStorageAccess() - Web API

Document.requestStorageAccess()
===============================

**`requestStorageAccess()`** は `Document` インターフェイスのメソッドで、ファーストパーティのストレージへのアクセスが許可されたら解決し、アクセスが拒否されたら拒否される `Promise` を返します。

ストレージへのアクセスが許可される条件
-------------------

ストレージへのアクセスは、以下の一連のチェックに基づいて許可されます。

1. 文書がすでにアクセスを許可されていれば、解決。
2. 文書のオリジンが null であれば、拒否。
3. 文書のフレームが主フレームであれば、解決。
4. 副フレームのオリジンが主フレームのものと同じであれば、解決。
5. 副フレームがサンドボックス化されていなければ、 7 へ飛ぶ。
6. 副フレームにトークン `allow-storage-access-by-user-activation` がなければ、拒否。
7. 副フレームの親フレームが最上位フレームでなければ、拒否。
8. ブラウザーがユーザージェスチャーを処理中でなければ、拒否。
9. ブラウザーが持っている追加の規則をチェック。例えば、ホワイトリスト、ブラックリスト、端末上の分類、ユーザー設定、クリックジャック防止の推測、ユーザーへの明示的な権限の確認など。いくつかの規則が満たされていなければ、拒否。
10. 文書にクッキーやその他のサイトストレージへのアクセスを許可し、将来の `Document.hasStorageAccess()` および `requestStorageAccess()` の呼び出しのためにその事実を保存。

上記のすべての要件が満たされていると仮定すると、Firefox は、ユーザーセッション存続期間の最大 24 時間で、現在のセッションのファーストパーティのオリジンのしきい値数まで、要求側のオリジンへのストレージアクセスを自動的に許可します。 要求側のオリジンがストレージアクセス許可の最大許容数を超えた後、同じ閲覧セッション中に `requestStorageAccess()` を呼び出すと、ユーザーに確認します。

オリジンが取得できる同時ストレージアクセス許可の最大数は、現在のセッションでアクセスしている最上位のオリジンの数の 1% または 5 のいずれか大きい方として現在定義されている正の整数です。しきい値は eTLD+1 のレベルで適用されるため、例えば、`foo.example.com` と `bar.example.com` に対する 2 つのストレージアクセス許可は、制限に対する単一の例外としてのみカウントされます。

`requestStorageAccess()` 呼び出しの時点で、要求側のオリジンがストレージアクセスを持っている場合...

...オリジン数が最大値より少ない場合:

* ユーザーに確認しません。
* オリジンには、現在の最上位オリジンに対する一時的なストレージアクセス許可が与えられます。
* 要求側のオリジンのストレージにアクセスできるオリジンの数は、 1 ずつ増加します。
    + この数は、互換性ヒューリスティック (en-US)によって自動アクセス許可が与えられたときにも増加することに注意してください。
* 一時ストレージアクセス許可は次のとおりです。
    + ブラウザーセッションの終了時に無効になります。
    + ディスクに永続化されません（例えば、ブラウザーがクラッシュすると持続しません）。
    + 長時間のブラウザーセッションの場合は、24時間後にリセットします。

...オリジン数が最大値以上の場合:

* ユーザーに確認します。
* ユーザーが「許可」または「任意のサイトで許可」をクリックすると、要求は解決されます。
* ユーザーが「許可しない」をクリックすると、ストレージアクセス要求は拒否され、要求側のオリジンは別のユーザーインタラクションを受け取ると再要求できます。
* ユーザーがストレージを許可する場合、要求側のオリジンは現在の最上位オリジンの永続ストレージアクセス許可を与えられます。
* 要求側のオリジンのストレージにアクセスできるオリジンの数は、 1 ずつ増加します。
* 永続ストレージアクセスの権限は次のとおりです。
    + ディスクに永続化され、将来のブラウザーセッションで有効のままになります。
    + 30 日後にリセットします。

一時的または永続的なストレージアクセス許可が期限切れになると、要求側のオリジンのストレージアクセスを持つオリジンの数が1ずつ減ります。

**メモ:** 要求側のオリジンが追跡オリジン (tracking origin) として分類 (en-US)されていない場合、アクセス要求には、ページが再読み込みされると消滅する一時的なストレージアクセス許可が自動的に付与されます。 この場合、ユーザーにはプロンプトが表示されないため、`requestStorageAccess()` を呼び出しても、`Document.hasStorageAccess()` によって返される値を変更する以外に副作用はありません。

デバッグ
----

ストレージアクセス許可のしきい値により、Firefox がユーザーにアクセスをプロンプトする条件の下でウェブサイトをテストすることがより難しくなる場合があります。 テストを簡単にするために、`about:config` に次の 2 つの設定を追加して `requestStorageAccess()` 呼び出し時のプロンプトを制御できるようにしました。

* `dom.storage_access.auto_grants` を `false` に設定して、一時ストレージアクセス許可の自動許可を無効にすることができます。 追跡者 (trackers) として分類されたオリジンによる `requestStorageAccess()` の呼び出しはすべて、プロンプトを起動します。
* `dom.storage_access.max_concurrent_auto_grants` は、ユーザーがプロンプトを受け取り始めるストレージアクセス許可のしきい値数を制御します。 例えば、`requestStorageAccess()` が呼び出される最初のサイトでアクセスを自動的に許可し、その後プロンプトを表示するように Firefox を構成した場合、`dom.storage_access.max_concurrent_auto_grants` 設定の値を 1 に調整する必要があります。
構文
--

```js
var promise = document.requestStorageAccess();
```

### 引数

なし。

### 返値

ファーストパーティのストレージへのアクセスが許可されたら `undefined` で履行され、アクセスが拒否されたら拒否される `Promise` です。

プロミスが解決されると、プロミスが履行されたか拒否されたかに関わらず、ユーザージェスチャーが処理されているかのように解決ハンドラーが実行されます。

* 前者の場合、コードはユーザーのアクティベーションを必要とする API の呼び出しを開始でき、物事を前に進めることができます。
* 後者の場合、コードはユーザーになぜ要求に失敗したのか、何を続けることができるかを知らせるために実行することができます (例えば、必要な場合はログインを促すなど)。
例
-

```js
document.requestStorageAccess().then(
  () => {
    console.log("access granted");
  },
  () => {
    console.log("access denied");
  },
);
```

仕様書
---

この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ記事の Introducing
Storage Access API、および Storage Access API proposal in the
Privacy CG で見ることができます。

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

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

関連情報
----

Storage Access API


Document.characterSet - Web API

Document.characterSet
=====================

**`Document.characterSet`** プロパティは読み取り専用で、文書の文字エンコーディングを表す文字列を返します。 (文字エンコーディングは文字セットであり、入力されたバイト列をどのように文字として解釈するか規定します。)

**メモ:** 「文字セット」と「文字エンコーディング」は似ていますが違うものです。プロパティ名に反してエンコーディングを返します。

ユーザーは、 Content-Type ヘッダーの中や `<meta charset="utf-8">` などのインラインで開発者が指定した文字エンコーディングを上書きできます。例えば Firefox では `表示 → テキストエンコーディング` メニューから可能です。このような上書き手段は開発者が誤って指定したエンコーディングによって文字化けを引き起こされたときに直すために提供されています。

**メモ:** プロパティ `document.charset` および `document.inputEncoding` は、`document.characterSet` への古いエイリアスです。これらは使用しないでください。

構文
--

```js
var string = document.characterSet;
```

例
-

```html
<button onclick="console.log(document.characterSet);">
  Log character encoding
</button>
<!-- "ISO-8859-1" や "UTF-8" など、文書の文字セットが開発者コンソールに表示されます -->
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-characterset① |

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

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


Document: hasFocus() メソッド - Web API

Document: hasFocus() メソッド
=========================

**`hasFocus()`** は `Document` インターフェイスのメソッドで、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示す論理値を返します。
 このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。

**メモ:** 文書を見ている時、文書内でフォーカスを持つ要素は常にアクティブ要素ですが、アクティブ要素がフォーカスを持っているとは限りません。
 例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。

構文
--

```js
hasFocus()
```

### 引数

なし。

### 返値

 文書内のアクティブ要素にフォーカスがない場合は `false` を返します。
 文書内のアクティブ要素にフォーカスがある場合は `true` を返します。

例
-

 この例は、文書がフォーカスを持っているかどうかを検査します。
 `checkPageFocus()` という関数は、`document.hasFocus()` の結果に応じて段落要素を更新します。
 新しいウィンドウを開くと文書からフォーカスがなくなり、元のウィンドウに戻すとフォーカスが回復します。

### HTML

```html
<p id="log">フォーカスのチェック結果はこちらに表示されます。</p>
<button id="newWindow">新しいウィンドウを開く</button>
```

```
body {
  padding: 1rem;
  background: gray;
  text-align: center;
  font-size: 1.5rem;
}
```

### JavaScript

```js
const body = document.querySelector("body");
const log = document.getElementById("log");

function checkDocumentFocus() {
  if (document.hasFocus()) {
    log.textContent = "この文書にフォーカスがあります。";
    body.style.background = "white";
  } else {
    log.textContent = "この文書にはフォーカスがありません。";
    body.style.background = "gray";
  }
}

function openWindow() {
  window.open(
    "https://developer.mozilla.org/",
    "MDN",
    "width=640,height=320,left=150,top=150",
  );
}

document.getElementById("newWindow").addEventListener("click", openWindow);
setInterval(checkDocumentFocus, 300);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-hasfocus-dev |

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

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

関連情報
----

* `Document.activeElement`
* ページ可視性 API の使用


Document.childElementCount - Web API

Document.childElementCount
==========================

**`Document.childElementCount`** は読み取り専用のプロパティで、文書の子要素の数を返します。

特定の要素の子要素の数を取得する場合は、 `Element.childElementCount` を参照してください。

構文
--

```js
document.childElementCount;
```

例
-

```js
document.children;
// HTMLCollection で、ふつうは <html> 要素をこの文書の唯一の子として含んでいる

document.childElementCount;
// 1
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

関連情報
----

* `Element.childElementCount`
* `DocumentFragment.childElementCount`


Document.open() - Web API

Document.open()
===============

**`Document.open()`** メソッドは、書き込みのために文書を開きます。

これはいくらかの副作用を招きます。例を挙げます。

* 文書、文書内のノード、文書のウィンドウに現在登録されているイベントリスナーがすべて除去されます。
* すべての既存のノードが文書から除去されます。
構文
--
```

document.open();
```

### 引数

なし。

### 返値

`Document` オブジェクトインスタンスです。

例
-

以下の簡単なコードは、文書を開き、その内容をいくつかの異なる HTML の断片に置き換えてから、再び閉じます。

```js
document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();
```

注
-

ページが読み込まれたあとで `document.write()` が呼び出されると、自動的に `document.open()` が呼び出されます。

Firefox や Internet Explorer では何年も前から、すべてのノードの削除に加えて、 JavaScript の変数なども追加で消去していました。今はそうではありません。document non-spec'ed parameters to document.open

### Gecko 固有のメモ

Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。

Gecko 1.9.2 以降、 `document.open()` はプリンシパルをスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 `wrappedJSObject` を使用しても、 `document.write()` をクロームからの信頼できない文書に呼び出すことはできません。考え方についてはセキュリティチェックの基本を参照してください。

引数 3 つの document.open()
-----------------------

あまり知られていませんが、あまり使われていない引数 3 つ版の `document.open()` があり、これは `Window.open()` のエイリアスです (詳細はそのページを参照してください)。

この呼び出しは、例えば github.com を新しいウィンドウで開き、オープナーは `null` に設定してみます。

```js
document.open("https://www.github.com", "", "noopener=true");
```

引数 2 つの document.open()
-----------------------

ブラウザーは以下の形で、引数 2 つの `document.open()` に対応してきました。

```js
document.open(type, replace);
```

`type` は書き込もうとしているデータの MIME タイプ (`text/html` など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリが書き込まれている文書の現在の履歴エントリを置き換えることを指定していました。

この形式は現在では廃止されています。エラーは発生せず、代わりに `document.open()` に転送されます (つまり、引数なしで実行した場合と同等です)。 履歴の置換動作は常に行われるようになりました。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-open-dev |

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

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

関連情報
----

* `Document`
* `Window.open()`


Document.implementation - Web API

Document.implementation
=======================

**`Document.implementation`** プロパティは、現在の文書に関連付けられた `DOMImplementation` オブジェクトを返します。

値
-

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

例
-

```js
const modName = "HTML";
const modVer = "2.0";
const conformTest = document.implementation.hasFeature(modName, modVer);

console.log(`DOM ${modName} ${modVer} supported?: ${conformTest}`);

// DOM Level 2 HTML module に対応している場合、"DOM HTML 2.0 supported?: true" とアラート表示されます。
```

モジュール名 (Core, HTML, XML, 等) の一覧は Conformance Section で入手可能です。

メモ
--

W3C's DOM Level 1 勧告では `hasFeature` メソッドのみが定義されているので、ブラウザーが DOM モジュールに対応しているかどうかを判断する方法の一つです。 (上記の例と What does your user agent claim to support? を参照してください)。利用できるのであれば、 `DOMImplementation` の他のメソッドが、単一文書の外のものを制御するサービスを提供します。例えば、 `DOMImplementation` インターフェイスは `createDocumentType` メソッドを含んでおり、実装によって管理された 1 つ以上の文書に DTD が作成されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-implementation① |

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

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


Document.domain - Web API

Document.domain
===============

`Document` インターフェイスの **`domain`** プロパティは、同一オリジンポリシーで使用される現在の文書のオリジンのうち、ドメインの部分を取得または設定します。

このプロパティが正常に設定されると、オリジンのポート番号の部分も `null` に設定されます。

構文
--
```

const domainString = document.domain
document.domain = domainString
```

### 値

現在の文書のオリジンのうち、ドメインの部分です。

### 例外

`SecurityError`

以下の状況のうちの一つで、 `domain` を設定することが試みられた。

* 文書がサンドボックス化された `<iframe>` の中にある場合
* 文書に閲覧コンテキストがない場合
* 文書の影響ドメインが `null` の場合
* 指定された値が文書の影響ドメインと一致しない (または登録可能なドメインの接頭辞ではない) 場合
* `Feature-Policy` の `document-domain` が有効の場合

例
-

### ドメイン名の取得

`http://developer.mozilla.org/ja/docs/Web` の URI において、この例は `currentDomain` に "`developer.mozilla.org`" の文字列を設定します。

```js
const currentDomain = document.domain;
```

### ウィンドウを閉じる

文書が `www.example.xxx/good.html` のような "`www.example.xxx`" のドメインを持つ場合、この例はウィンドウを閉じようとします。

```js
const badDomain = "www.example.xxx";

if (document.domain === badDomain) {
  // 単なる例: window.close() は効果がないことがある
  window.close();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # relaxing-the-same-origin-restriction |

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

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

関連情報
----

* 同一オリジンポリシー


Document.vlinkColor - Web API

Document.vlinkColor
===================

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

**`Document.vlinkColor`** プロパティは、文書内のユーザーが訪問済みのリンクの色を取得または設定します。

構文
--
```

color = document.vlinkColor
document.vlinkColor = color
```

### 引数

* `color` は、色を表す単語 (`red` など) または 16 進値 (`#ff0000` など) の文字列です。
メモ
--

* Mozilla Firefox ではこのプロパティの初期値は紫 (16 進で `#551a8b`) です。
* `Document.vlinkColor` は DOM Level 2 HTML では非推奨です。
* 推奨される代替方法は、 HTML の `<a>` 要素において CSS で `:visited` 擬似クラスの色を設定または取得する方法です (例えば `a:visited {color:red;}`)。
* 他の代替方法に `document.body.vLink` がありますが、これは HTML 4.01 で非推奨となり、 CSS で代替されました。
ブラウザーの互換性
---------

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


Document.getElementById() - Web API

Document.getElementById()
=========================

`Document` の **`getElementById()`** メソッドは、 `id` プロパティが指定された文字列に一致する要素を表す `Element` オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

ID を持たない要素にアクセスする必要がある場合は、 `querySelector()` で何らかのセレクターを使用して要素を検索することができます。

構文
--
```

var element = document.getElementById(id);
```

### 引数

`id`

探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

### 返値

指定された ID に一致する DOM 要素オブジェクトを記述した `Element` オブジェクト、または文書内に一致する要素がなければ `null` です。

例
-

### HTML

```html
<html>
  <head>
    <title>getElementById example</title>
  </head>
  <body>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
```

### JavaScript

```js
function changeColor(newColor) {
  var elem = document.getElementById("para");
  elem.style.color = newColor;
}
```

### 結果

使用上のメモ
------

コードが機能するためには、メソッドの名前の中の `"Id"` は、大文字と小文字を正しく表記し*なければなりません*。 `getElementByID()` は自然に見えますが、妥当では*なく*動作しません。

`Document.querySelector()` や `Document.querySelectorAll()` などの他の要素検索メソッドとは異なり、 `getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。

### 例

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p id="test1">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
 var parentDOM = document.getElementById("parent-id");
 var test1 = parentDOM.getElementById("test1");
 // throw error
 // Uncaught TypeError: parentDOM.getElementById is not a function
 </script>
  </body>
</html>
```

もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `<div id="main">` 要素の代わりに `null` を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。

**文書内にない要素** は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に `Node.insertBefore()` またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。

```js
var element = document.createElement("div");
element.id = "testqq";
var el = document.getElementById("testqq"); // el は null になります
```

**HTML 以外の文書**の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は XHTML, XUL などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

関連情報
----

* `Document`: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。
* `Document.querySelector()`: `'div.myclass'` のようなセレクターを通したクエリのためのもの。
* xml:id - `getElementById()` による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ


Document.evaluate() - Web API

Document.evaluate()
===================

XPath 式やその他与えられたパラメータに基づいて `XPathResult` (en-US) を返します。

構文
--
```

var xpathResult = document.evaluate(
 xpathExpression,
 contextNode,
 namespaceResolver,
 resultType,
 result
);
```

* `xpathExpression` は評価される Xpath を示す文字列です。
* `contextNode` はクエリの*コンテキストノード*を指定します(XPath の仕様を参照してください)　コンテキストノードとして `document` を渡すのが一般的です。
* `namespaceResolver` は、任意の名前空間接頭辞を受け取り、その接頭辞に関連付けられた名前空間 URI を文字列として返す関数です。接頭辞が文書の中でマッチされるように、XPath 自身の中で接頭辞を解決するために使われます。HTML 文書向け、または名前空間接頭辞を使わないときは `null` を指定するのが一般的です。
* `resultType` は返り値である `XPathResult` のタイプに対応する整数です。XPathResult コンストラクタの名前付き定数プロパティ (例えば `XPathResult.ANY_TYPE`) を使用してください。これらは 0 から 9 までの整数に対応しています。
* `result` は結果として使われる既存の `XPathResult` です。`null` を指定するのが最も一般的です。`null` は新しい `XPathResult を生成します。`
例
-

```js
var headings = document.evaluate(
  "/html/body//h2",
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
/\* Search the document for all h2 elements.
 \* The result will likely be an unordered node iterator. \*/
var thisHeading = headings.iterateNext();
var alertText = "Level 2 headings in this document are:\n";
while (thisHeading) {
  alertText += thisHeading.textContent + "\n";
  thisHeading = headings.iterateNext();
}
alert(alertText); // Alerts the text of all h2 elements
```

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as `//h2`. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits *every* node from the root and all subnodes looking for possible matches.

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

```js
document.evaluate(".//h2", document.body, null, XPathResult.ANY\_TYPE, null);
```

Notice in the above `document.body` has been used as the context instead of `document` so the XPath starts from the body element. (In this example, the `"."` is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving `//h2`) the query would start from the root node (`html`) which would be more wasteful.)

See Introduction to using XPath in JavaScript for more information.

注釈
--

* XPath expressions can be evaluated on HTML and XML documents.
* While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.
戻り値の分類
------

(Merge with Template:XPathResultConstants?

These are supported values for the `resultType` parameter of the `evaluate` method:

| Result Type | Value | Description |
| --- | --- | --- |
| `ANY_TYPE` | 0 | Whatever type naturally results from the given expression. |
| `NUMBER_TYPE` | 1 | A result set containing a single number. Useful, for example, in an XPath expression using the `count()` function. |
| `STRING_TYPE` | 2 | A result set containing a single string. |
| `BOOLEAN_TYPE` | 3 | A result set containing a single boolean value. Useful, for example, an an XPath expression using the `not()` function. |
| `UNORDERED_NODE_ITERATOR_TYPE` | 4 | A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
| `ORDERED_NODE_ITERATOR_TYPE` | 5 | A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
| `UNORDERED_NODE_SNAPSHOT_TYPE` | 6 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
| `ORDERED_NODE_SNAPSHOT_TYPE` | 7 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
| `ANY_UNORDERED_NODE_TYPE` | 8 | A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression. |
| `FIRST_ORDERED_NODE_TYPE` | 9 | A result set containing the first node in the document that matches the expression. |

Results of `NODE_ITERATOR` types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

Results of `NODE_SNAPSHOT` types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

仕様
--

| Specification |
| --- |
| DOM Standard # dom-xpathevaluatorbase-evaluate |

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

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

関連項目
----

* DOM:document.createExpression (en-US)
* XPath Code Snippets
* Check for browser support


Document.close() - Web API

Document.close()
================

**`Document.close()`** メソッドは、 `Document.open()` で開かれた文書への書き込みを終了します。

構文
--
```

document.close();
```

例
-
```

// 書きこむ文書を開きます。
document.open();

// 文書の内容を書き込みます。
document.write("<p>たったひとつの内容。</p>");

// 文書を閉じます。
document.close();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-close-dev |

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

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


Document.getElementsByTagName() - Web API

Document.getElementsByTagName()
===============================

**`getElementsByTagName`** は `Document` インターフェイスのメソッドで、指定されたタグ名を持つ要素の `HTMLCollection` を返します。ルートノードを含めた文書全体が検索されます。返された `HTMLCollection` は生きたものであり、つまり `document.getElementsByTagName()` を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.

構文
--
```

var elements = document.getElementsByTagName(name);
```

* *elements* は生きた `HTMLCollection` であり、見つかった要素がツリーに出現する順に並んでいます (ただし、下記のメモを見てください)。
* *name* は文字列で、要素の名前を表します。特殊な文字列 "\*" は全ての要素を表します。

**メモ:** 最新の W3C 仕様書 では `elements` は `HTMLCollection` です。しかし、 WebKit ブラウザーではこのメソッドは `NodeList` を返します。詳しくは Firefox バグ 14869 を見てください。

例
-

以下の例では、 `getElementsByTagName()` は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが `name` パラメータと一致する子要素を探します。これは `document.getElementsByTagName()` と、機能的に同等な `Element.getElementsByTagName()` は、 DOM ツリー内の特定の要素から検索を始めることを示します。

ボタンをクリックすると `getElementsByTagName()` を使用して、特定の親 (文書自体または 2 つの `<div>` 要素の何れかに囲まれたもの) の子孫の段落要素を数えます。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");
 var num = allParas.length;
 alert("この文書には " + num + " 個の段落があります");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");
 var num = div1Paras.length;
 alert("#div1 には " + num + " 個の段落があります");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");
 var num = div2Paras.length;
 alert("#div2 には" + num + " 個の段落があります");
 }
 </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">文書内のすべての p 要素を表示</button
 ><br />

    <button onclick="div1ParaElems();">
      div1 要素内のすべての p 要素を表示</button
 ><br />

    <button onclick="div2ParaElems();">
      div2 要素内のすべての p 要素を表示
    </button>
  </body>
</html>
```

注
-

HTML 文書上で呼び出された場合、 `getElementsByTagName()` は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は `document.getElementsByTagNameNS()` が便利です。 Firefox バグ 499656 を参照してください。

`document.getElementsByTagName()` は、検索が文書全体を含むという点以外は `Element.getElementsByTagName()` と類似しています。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagname① |

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

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

関連情報
----

* `Element.getElementsByTagName()`
* `document.getElementById()` : `id` によって検索した要素への参照を返す
* `document.getElementsByName()` : `name` によって検索した要素への参照を返す
* `document.querySelector()` : `'div.myclass'` のような CSS セレクターによって要素への参照を返す


Document.anchors - Web API

Document.anchors
================

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

**`anchors`** は `Document` インターフェイスの読み取り専用のプロパティで、文書中のすべてのアンカーのリストを返します。

構文
--

```js
nodeList = document.anchors;
```

### 値

`HTMLCollection` です。

例
-

```js
if (document.anchors.length >= 5) {
  dump("found too many anchors");
}
```

文書中のアンカーを基に目次を作成して文書に挿入する例を以下に示します。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script>
 function init() {
 var toc = document.getElementById("toc");
 var i, li, newAnchor;
 for (i = 0; i < document.anchors.length; i++) {
 li = document.createElement("li");
 newAnchor = document.createElement("a");
 newAnchor.href = "#" + document.anchors[i].name;
 newAnchor.textContent = document.anchors[i].text;
 li.appendChild(newAnchor);
 toc.appendChild(li);
 }
 }
 </script>
  </head>
  <body onload="init()">
    <h1>Title</h1>
    <h2><a name="contents">Contents</a></h2>
    <ul id="toc"></ul>

    <h2><a name="plants">Plants</a></h2>
    <ol>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ol>

    <h2><a name="veggies">Veggies</a></h2>
    <ol>
      <li>Carrots</li>
      <li>Celery</li>
      <li>Beats</li>
    </ol>
  </body>
</html>
```

JSFiddle で確認

メモ
--

後方互換性のため、返されるアンカーのセットには `name` 属性を付けて作成されたアンカーのみが含まれ、 `id` 属性付きで作成されたものは含まれません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-anchors |

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

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


Document.styleSheetSets - Web API

Document.styleSheetSets
=======================

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

**`styleSheetSets`** プロパティは読み取り専用で、現在有効なすべてのスタイルシートセットの生きたリストを返します。

値
-

利用可能なスタイルシートセットのリストです。

例
-

"sheetList" という ID を持つ `<ul>` （リスト）要素がある場合、次のようなコードで、利用可能なすべてのスタイルシートセットの名前を入力することができます。

```js
const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (let i = 0; i < sheets.length; i++) {
  const item = document.createElement("li");

  item.textContent = sheets[i];
  list.appendChild(item);
}
```

注
-

有効なスタイルシートセットのリストは、その文書に有効なすべてのスタイルシートを `Document.styleSheets` 属性で並べられている順に列挙し、題名を持つそれぞれのスタイルシートの `title` をリストに追加することによって構築されます。重複するものは（大文字小文字を区別する比較を使用して）リストから削除されます。

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

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

関連情報
----

* `Stylesheet`
* `Document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()`


Document.doctype - Web API

Document.doctype
================

現在の文書に関連付けられた文書型宣言 (Document Type Declaration) (DTD) を返します。返されるオブジェクトは、 `DocumentType` インターフェイスを持ちます。 `DocumentType` を生成するには `DOMImplementation.createDocumentType()` を使用してください。

構文
--
```

doctype = document.doctype;
```

* `doctype` : 読み取り専用のプロパティです。
例
-

```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

メモ
--

現在の文書に関連付けられている DTD が存在しないは `null` が返されます。

DOM レベル 2 では、文書型宣言の編集に対応していません。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |

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

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


Document.embeds - Web API

Document.embeds
===============

`Document` インターフェイスの **`embeds`** プロパティは読み取り専用で、現在の文書の埋め込み `<object>` 要素のリストを返します。

構文
--
```

nodeList = document.embeds
```

### 値

`HTMLCollection` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |

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

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


Document: elementsFromPoint() メソッド - Web API

Document: elementsFromPoint() メソッド
==================================

**`elementsFromPoint()`** は `Document` インターフェイスのメソッドで、指定された（ビューポートからの相対位置の）座標にあるすべての要素の配列を返します。
 要素はビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

これは `elementFromPoint()` メソッドと同じような方法で動作します。

構文
--

```js
elementsFromPoint(x, y)
```

### 引数

`x`

点の水平座標です。

`y`

点の垂直座標です。

### 返値

`Element` オブジェクトの配列で、ビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

例
-

### HTML

```html
<div>
  <p>Some text</p>
</div>
<p>Elements at point 30, 20:</p>
<div id="output"></div>
```

### JavaScript

```js
let output = document.getElementById("output");
if (document.elementsFromPoint) {
  let elements = document.elementsFromPoint(30, 20);
  elements.forEach((elt, i) => {
    output.textContent += elt.localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  });
} else {
  output.innerHTML =
    '<span style="color: red;">' +
    "Browser does not support <code>document.elementsFromPoint()</code>" +
    "</span>";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-document-elementsfrompoint |

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

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

関連情報
----

* `Document.elementFromPoint()`


Document.queryCommandState() - Web API

Document.queryCommandState()
============================

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

**`queryCommandState()`** メソッドは、現在の選択範囲に特定の `Document.execCommand()` コマンドが適用されているかどうかを知らせます。

構文
--

```js
queryCommandState(String command)
```

### 引数

`command` は `Document.execCommand()` のコマンドです。

### 返値

`queryCommandState()` は論理値、または状態が不明な場合は `null` を返す可能性があります。

例
-

### HTML

```html
<div contenteditable="true">Select a part of this text!</div>
<button onclick="makeBold();">Test the state of the 'bold' command</button>

<hr />

<div id="output"></div>
```

```
hr,
button {
  margin: 1rem 0;
}
```

### JavaScript

```js
function makeBold() {
  const state = document.queryCommandState("bold");
  let message;
  switch (state) {
    case true:
      message = "The bold formatting will be removed from the selected text.";
      break;
    case false:
      message = "The selected text will be displayed in bold.";
      break;
    default:
      message = "The state of the 'bold' command is indeterminable.";
      break;
  }
  document.querySelector("#output").textContent = `Output: ${message}`;
  document.execCommand("bold");
}
```

### 結果

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定もありません。

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

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

関連情報
----

* `HTMLElement.contentEditable`
* `document.designMode`
* `queryCommandState()` に関するブラウザーのバグ: Scribe's "Browser Inconsistencies" documentation


Document: location プロパティ - Web API

Document: location プロパティ
========================

**`Document.location`** は読み取り専用のプロパティで、この文書の URL に関する情報を持った `Location` オブジェクトを返します。これはその URL を変更したり他の URL を読み込んだりするためのメソッドも提供しています。

`Document.location` は*読み取り専用*の `Location` オブジェクトですが、文字列を代入することができます。つまり、 document.location が文字列であるかのように扱うことができます。 `document.location = 'http://www.example.com'` は `document.location.href = 'http://www.example.com'` の別名です。他の文字列を代入すると、ブラウザーは代入されたウェブサイトを読み込みます。

URL を文字列として受け取るだけであれば、読み取り専用の `document.URL` プロパティも利用することができます。

現在の文書が閲覧コンテキスト内にない場合、返値は `null` となります。

値
-

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

例
-

```js
console.log(document.location);
// Location オブジェクトをコンソールへ表示
```

仕様書
---

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

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

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

関連情報
----

* 返値のインターフェイスである `Location`
* 同様の情報で閲覧コンテキストに結びつけられている `Window.location`


Document.documentElement - Web API

Document.documentElement
========================

**`Document.documentElement`** は、その `document` のルート要素 (例えば、 HTML 文書の場合は `<html>` 要素) である `Element` を返します。

構文
--
```

const element = document.documentElement
```

例
-

```js
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;
// firstTier は <head> や <body> などの
// ルート要素の直接の子である NodeList

for (const child of firstTier) {
  // ルート要素のそれぞれの直接の子に対する処理
}
```

メモ
--

空ではない HTML 文章の場合、 `documentElement` は常に `<html>` 要素を返します。空ではない XML 文章の場合、 `documentElement` は常に文章のルート要素である何らかの要素を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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


Document: pictureInPictureElement プロパティ - Web API

Document: pictureInPictureElement プロパティ
=======================================

**`Document.pictureInPictureElement`** は読み取り専用プロパティで、 この文書内のピクチャインピクチャモードで現在表示されている `Element` を返します。ピクチャインピクチャモードが現在使用されていない場合は `null` を返します。

このプロパティは読み取り専用ですが、（厳格モードであっても）変更されても例外は発生しません。セッターは何もせず、無視されます。

値
-

現在ピクチャインピクチャモードになっている `Element` オブジェクトへの参照です。現在この `document` でピクチャインピクチャモードが使用されていない場合、返される値は `null` です。

例
-

この例では `pictureInPictureElement` が返す値を検査する関数 `exitPictureInPicture()` を表示しています。現在の文書がピクチャインピクチャモードでない（`pictureInPictureElement` が `null` である）場合、 `Document.exitPictureInPicture()` を実行してピクチャインピクチャモードを終了します。

```js
function exitPictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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

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

関連情報
----

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `:picture-in-picture`


Document.getElementsByName() - Web API

Document.getElementsByName()
============================

`Document` オブジェクトの **`getElementsByName()`** メソッドは、文書内で指定した `name` を持つ要素の `NodeList` コレクションを返します。

構文
--
```

var elements = document.getElementsByName(name);
```

* *elements* は、生きた `NodeList` コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。
* `name` は、要素の `name` 属性の値です。
例
-

```html
<!doctype html>
<html lang="en">
  <title>document.getElementsByName の使用例</title>

  <input type="hidden" name="up" />
  <input type="hidden" name="down" />

  <script>
 var up\_names = document.getElementsByName("up");
 console.log(up\_names[0].tagName); // "INPUT" と表示
 </script>
</html>
```

メモ
--

`name` 属性は、(X)HTML 文書にのみ適用可能です。

返却された `NodeList` コレクションには、 `<meta>` や `<object>` など、それに `name` 属性にまったく対応していない要素も含め、指定された `name` を持つ*すべての*要素が含まれます。

**警告:** **getElementsByName** メソッドは、 IE10 以前では動作が異なります。この場合、 `getElementsByName()` は指定された `id` 属性を持つ要素も返します。 `name` および `id` で同じ文字列を使用しないように注意してください。

**警告:** **getElementsByName** メソッドは IE では動作が異なります。この場合、 `getElementsByName()` は `name` 属性を許容しない要素 (`<span>` など) を返しません。

**警告:** IE および Edge では、 `NodeList` ではなく `HTMLCollection` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-getelementsbyname-dev |

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

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

関連情報
----

* `document.getElementById()` : 固有の `id` を持つ要素への参照を返す
* `document.getElementsByTagName()` : 同じタグ名の要素への参照を返す
* `document.querySelector()` : `'div.myclass'` のような CSS セレクターによって要素への参照をかえす


Document.preferredStyleSheetSet - Web API

Document.preferredStyleSheetSet
===============================

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

**`preferredStyleSheetSet`** プロパティは、ページ作者によって設定された推奨スタイルシートセットを返します。

値
-

作者の推奨するスタイルシートセットを示します。これはスタイルシート宣言の順序と HTTP の `Default-Style` ヘッダーから特定されます。

作者によって定義された推奨スタイルシートセットがない場合は、空文字列 (`""`) が返されます。

例
-

```js
if (document.preferredStyleSheetSet) {
  console.log("推奨スタイルシート: " + document.preferredStyleSheetSet);
} else {
  console.log("推奨スタイルシートがありません。");
}
```

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

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

関連情報
----

* `document.lastStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`


Document.createNSResolver() - Web API

Document.createNSResolver()
===========================

指定されたノードのスコープで定義を尊重する名前空間を解決する `XPathNSResolver` を生成します。

構文
--
```

nsResolver = document.createNSResolver(node);
```

### 引数

* `node` は名前空間の解決のためのコンテキストとして使用されるノードです。
### 返値

* `nsResolver` は XPathNSResolver オブジェクトです。
注
-

任意の DOM ノードをネームスペースを解決するように修正し、 XPath 式が文書内に現れたノードのコンテキストに対して容易に評価できるようにします。このアダプターは、 `lookupNamespaceURI` が呼び出されたときにノードの階層で使用可能な現在の情報を使用して、指定された接頭辞から `namespaceURI` を解決する際に、ノード上の DOM Level 3 メソッド `lookupNamespaceURI` のように機能します。 暗黙の `xml` 接頭辞も正しく解決されます。

なお、 XPath は、ヌル名前空間の要素と一致する接頭辞のない QNames を定義します。 XPath には、通常の要素参照に適用される既定の名前空間を選択する方法はありません (例えば `xmlns='http://www.w3.org/1999/xhtml'` における `p[@id='_myid'`])。ヌルではない名前空間の既定の要素を照合するには、 `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` のような形を使用して特定の要素を参照するか (このアプローチは名前空間が分からない可能性がある動的 XPath 式で動作します)、接頭辞付きの名前の条件を使用し、接頭辞と名前空間を対応付ける名前空間リゾルバーを作成するかしてください。後者のアプローチを採りたいと思うのであれば、ユーザー定義の名前空間リゾルバーの作成方法をお読みください。

`createNSResolver` は DOM Level 3 で導入されました。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathevaluatorbase-creatensresolver |

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

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

関連情報
----

* document.evaluate
* Javascript での XPath の使用


Document.defaultView - Web API

Document.defaultView
====================

ブラウザーにおいて、**`document.defaultView`** はドキュメントに関連付けられている `window` オブジェクトを返します。もし存在しない場合は `null` を返します。

構文
--

```js
var win = document.defaultView;
```

このプロパティは読み取り専用です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-defaultview-dev |

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

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


Document: startViewTransition() メソッド - Web API

Document: startViewTransition() メソッド
====================================

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

**`startViewTransition()`** はビュートランジション API のメソッドで、新しいビュートランジションを始め、それを表す `ViewTransition` オブジェクトを返します。

`startViewTransition()`を呼び出すと、ビュートランジションのプロセスで説明されている一連の手順が続きます。

構文
--

```js
startViewTransition(callback)
```

### 引数

`callback`

通常、ビュートランジションプロセス中に DOM を更新するために呼び出されるコールバック関数で、プロミス (`Promise`) を返します。コールバックは、 API が現在のページのスクリーンショットを導いたら呼び出されます。コールバックが返すプロミスが履行されると、次のフレームでビュートランジションが始まります。コールバックが返すプロミスが拒否された場合、トランジションは放棄されます。

### 返値

`ViewTransition` のオブジェクトインスタンスです。

例
-

### 基本的な使用方法

基本的なビュートランジションのデモでは、 `updateView()` 関数はビュートランジション API に対応しているブラウザーと対応していないブラウザーの両方に対応しています。対応しているブラウザーで、返値を気にせずにビュートランジションのプロセスを設定するには `startViewTransition()` を呼び出します。

```js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API


Document: styleSheets プロパティ - Web API

Document: styleSheets プロパティ
===========================

**`styleSheets`** は `Document` インターフェイスの読み取り専用プロパティで、 `CSSStyleSheet` オブジェクトの `StyleSheetList` を返します。これは、この文書に明示的にリンク埋め込まれたスタイルシートを表します。

値
-

返されるリストは次の順になります。

* `<link>` ヘッダーから受け取ったスタイルシートが先に、ヘッダーの順序で並べられます。
* DOM から受け取ったスタイルシートが後に、ツリー順に並べられます。
例
-

```js
function getStyleSheet(unique\_title) {
  for (const sheet of document.styleSheets) {
    if (sheet.title === unique_title) {
      return sheet;
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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


Document.xmlVersion - Web API

Document.xmlVersion
===================

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

XML 宣言（例えば `<?xml version="1.0"?>`）で指定されたバージョン番号を返し、宣言がなければ "1.0" を返します。

この属性は常に 1.0 を返していたので、本当は有用ではなく、 DOM Level 4 で削除されました。同様に、 Firefox 10 はもう実装していません。以前の主な使用法は、文書が HTML ではなく XML として表示するかどうかを検出するためでした。これは、（文書が XML ではない HTML モードの場合）小文字で要素を作成し、すべて大文字に変換されるかどうかを確認することによって検出することができます。

```js
if (document.createElement("foo").tagName == "FOO") {
  /\* 文書は XML ではない \*/
}
```

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定もありません。

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

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


Document: fullscreenerror イベント - Web API

Document: fullscreenerror イベント
==============================

`fullscreenerror` イベントは、ブラウザーが全画面モードに移行できないときに発生します。

`fullscreenchange` イベント イベントと同様、二つの `fullscreenerror` イベントが発行されます。 1 つ目はモード切替に失敗した `Element` へ送られ、 2 つ目はその要素を所有する `Document` へ送られます。

全画面モードへの切り替えに失敗する理由については、全画面 API のガイドを参照してください。

このイベントはキャンセルできません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("fullscreenerror", (event) => {});

onfullscreenerror = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
const requestor = document.querySelector("div");

function handleError(event) {
  console.error("全画面モードへの移行時にエラーが発生しました");
  console.log(event);
}

document.addEventListener("fullscreenerror", handleError);
// or
document.onfullscreenerror = handleError;

requestor.requestFullscreen();
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenerror |

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

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

関連情報
----

* `fullscreenchange`
* `Element`: `fullscreenerror` イベント
* 全画面 API
* 全画面 API のガイド


Document.plugins - Web API

Document.plugins
================

`Document` インターフェイスの **`plugins`** プロパティは読み取り専用で、現在の文書内にある `<embed>` 要素を表す 1 つ以上の `HTMLEmbedElement` を含んだ `HTMLCollection` オブジェクトを返します。

**メモ:** インストールされているプラグインの一覧には、このメソッドでなく `window.navigator.plugins` を使用してください。

構文
--
```

embedArrayObj = document.plugins
```

### 値

`HTMLCollection`、または文書内に embed がなければ `null` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-plugins-dev |

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

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

関連情報
----

* MSDN documentation


Document.queryCommandSupported() - Web API

Document.queryCommandSupported()
================================

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

**`Document.queryCommandSupported()`** メソッドは、指定しされたエディターコマンドにブラウザーが対応しているかどうかを報告します。

構文
--

```js
queryCommandSupported(command);
```

### 引数

`command`

対応しているかどうかを調べるコマンドです。

### 返値

論理値で、コマンドに対応していれば `true`、そうでなければ `false` を返します。

注
-

`'paste'` コマンドは機能が利用できないときだけでなく、呼び出しスクリプトにそのコマンドを実行するための権限が不足しているときにも `false` を返します。

例
-

```js
var flg = document.queryCommandSupported("SelectAll");

if (flg) {
  // ...何か行う
}
```

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定もありません。

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

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

関連情報
----

* `Document.execCommand()`
* `Document.queryCommandEnabled()` (en-US)


Document: readystatechange イベント - Web API

Document: readystatechange イベント
===============================

**`readystatechange`** event は、文書の `readyState` 属性が変化したときに発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onreadystatechange` |

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```

```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```

#### JS

```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = log.textContent + "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = log.textContent + `DOMContentLoaded\n`;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-readystatechange |

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

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

関連情報
----

* 関連イベント: `DOMContentLoaded`, `load`, `beforeunload`, `unload`


Document() - Web API

Document()
==========

**`Document`** コンストラクターは、ブラウザーに読み込まれたウェブページである `Document` オブジェクトを新たに生成し、そのページの内容へのエントリーポイントを提供します。

構文
--
```

new Document();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-document① |

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

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