recursal/MDN huggingface dataset:
document.images
===============

概要
--

`document.images` は、現在の HTML 文書の `Image` (en-US) のコレクションを返します。

構文
--
```

var htmlCollection = document.images;
```

例
-

特定の src 属性値を持つ img 要素が文書中に存在する場合にのみ何らかの処理を行う例を以下に示します。


```js
var ilist = document.images;

for (var i = 0; i < ilist.length; i++) {
  if (ilist[i].src == "banner.gif") {
    // bunner.gif が存在した場合の処理
  }
}
```

プロパティ
-----

`document.images.length`

文書中の画像の数を返す

注記
--

`document.images` は DOM HTML の一部であり、HTML 文書に於いてのみ動作します。

仕様書
---

* DOM Level 2 HTML: HTMLDocument.images
Document: selectionchange イベント
==============================

**`selectionchange`** イベントは Selection API の一部で、文書における現在のテキストの選択が変更された際に発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onselectionchange` |

例
-


```js
// addEventListener version
document.addEventListener("selectionchange", () => {
  console.log(document.getSelection());
});

// onselectionchange version
document.onselectionchange = () => {
  console.log(document.getSelection());
};
```

仕様書
---

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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

関連情報
----

* `selectstart`
* `Document.getSelection`
* `Selection`
Document.createAttribute()
==========================

**`Document.createAttribute()`** は、新しい属性ノードを生成して返します。生成されたオブジェクトは `Attr` を実装したノードです。この方法では DOM は、特定の要素にどんな種類の属性を追加できるかを強制しません。

**メモ:** 引数に渡される文字列は小文字に変換されます。

構文
--


```js
createAttribute(name);
```

### 引数

* `name` は属性の名前を含む文字列です。
### 返値

`Attr` ノードです。

### 例外

`InvalidCharacterError` `DOMException`

`name` が無効な XML name である場合（例えば、数字・ハイフン・ピリオドで始まっている場合や、英数字・アンダースコア・ハイフン・ピリオド以外の文字を含む場合）に発生します。

例
-


```js
const node = document.getElementById("div1");
const a = document.createAttribute("my\_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my\_attrib")); // "newVal"
```

仕様書
---

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

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

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

関連情報
----

* `Document.createAttributeNS()` (en-US)
* `Document.createElement()`
* `Element.setAttribute()`
* `Element.setAttributeNode()`
Document.createTouch()
======================

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

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

**`Document.createTouch()`** メソッドは、新しい `Touch` オブジェクトを生成して返します。

**メモ:** `TouchEvent()` コンストラクターを使用してください。

構文
--


```js
createTouch(view, target, identifier, pageX, pageY, screenX, screenY)
```

### 引数

**メモ:** すべての引数が省略可能です。

`view`

タッチが発生した `window` です。

`target`

タッチの `EventTarget` です。

`identifier`

`Touch.identifier` の値です。

`pageX`

`Touch.pageX` の値です。

`pageY`

`Touch.pageY` の値です。

`screenX`

`Touch.screenX` の値です。

`screenY`

`Touch.screenY` の値です。


**メモ:** このメソッドの以前のバージョンでは、以下の追加の引数を含んでいましたが、これらの引数は下記の標準のいずれにも含まれていません。従って、これらの引数は非推奨であり、使用されないと考えてください。

`clientX`

`Touch.clientX` の値です。

`clientY`

`Touch.clientY` の値です。

`radiusX`

`Touch.radiusX` の値です。

`radiusY`

`Touch.radiusY` の値です。

`rotationAngle`

`Touch.rotationAngle` の値です。

`force`

`Touch.force` の値です。

### 返値

`touch`

入力引数で記述されたように構成された `Touch` オブジェクトです。

例
-

この例は `Document.createTouch()` メソッドを使用して `Touch` オブジェクトを生成する様子を示しています。

以下のコードスニペットでは、2 つの `Touch` オブジェクトが `target` 要素に生成されます。


```js
const target = document.getElementById("target");

const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
```

仕様書
---

この機能は、現在のどの仕様にも属しません。標準化の予定はなくなりました。

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

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

関連情報
----

* タッチイベント
* `TouchList`
* `Touch`
* `Document.createTouchList()`
Document: createExpression() メソッド
=================================

このメソッドは、（繰り返して）評価を行うために使用することができる `XPathExpression` をコンパイルします。

このメソッドは、式を実行するのと同じ文書内で呼び出さなければなりません。

構文
--


```js
createExpression(xpathText, namespaceURLMapper)
```

### 引数

`xpathText`

文字列で、コンパイルする XPath 式です。

`namespaceURLMapper`

名前空間接頭辞を名前空間 URL に対応付ける関数（または必要がなければ null）です。

### 返値

`XPathExpression`例
-


```js
const xpathExpr = document.createExpression("//div");
const xpathResult = xpathExpr.evaluate(document); // XPathResult オブジェクトを返す
const nodeContext = document.querySelector("nav");
// XPathExpression "xpathExpr" を再利用
const otherResult = xpathExpr.evaluate(nodeContext); // XPathResult オブジェクトを返す
```

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

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

関連情報
----

* `Document.evaluate()`
* `XPathExpression`
Document.currentScript
======================

**`Document.currentScript`** プロパティは、現在処理中で、 JavaScript モジュールではないスクリプトの `<script>` 要素を返します。（モジュールの場合は代わりに `import.meta` を使用してください。）

重要なことですが、スクリプト内のコードがコールバックまたはイベントハンドラーとして呼び出されている場合は、 `<script>` 要素を参照しないことに注意してください。初期化時に処理されている要素のみを参照します。

値
-

`HTMLScriptElement` または null です。

例
-

次の例では、スクリプトが非同期で実行されているかどうかをチェックしています。


```js
if (document.currentScript.async) {
  console.log("非同期で実行中");
} else {
  console.log("同期で実行中");
}
```


実際の表示を確認

仕様書
---

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

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

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

関連情報
----

* `import.meta`
* `<script>`
* `document.afterscriptexecute_event`
* `document.beforescriptexecute_event`
Document.elementFromPoint()
===========================

**`elementFromPoint()`** メソッドは `Document` オブジェクト上で利用可能で、指定した座標（ビューポートからの相対座標）における最上位の要素 (`Element`) を返します。

指定された点の要素が他の文書（例えば `<iframe>` の文書）に属する場合、その文書の親要素（`<iframe>` 自身）が返される。指定された点の要素が無名または XBL で生成されたコンテンツ、例えばテキストボックスのスクロールバーである場合、最初の無名ではない祖先要素（例えばテキストボックス）が返されます。

`pointer-events` が `none` に設定されている要素は無視され、その下の要素が返されます。

このメソッドが他の文書（`<iframe>` のサブ文書など）で実行された場合、座標はメソッドが呼び出された文書からの相対座標となります。

指定した点が文書の可視領域外にある場合や、どちらかの座標が負の値である場合、結果は `null` となります。

要素内の特定の位置を見つける必要がある場合は、 `Document.caretPositionFromPoint()` を使用してください。

構文
--


```js
elementFromPoint(x, y);
```

### 引数

`x`

点の水平座標で、現在のビューポートの左端からの相対値です。

`y`

点の垂直座標で、現在のビューポートの上端からの相対値です。

### 返値

指定された座標にある最も上の要素（`Element` オブジェクト）です。

例
-

この例では、座標 `(2, 2)` の下にある段落要素の現在の色を設定するためのボタンを 2 つ作成しています。

### JavaScript


```js
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
```


`changeColor()` メソッドは、指定した位置にある要素を取得し、その要素の現在の前景色の `color` プロパティを `newColor` 引数で指定した色に設定します。

### HTML


```html
<p id="para1">こちらがテキストです</p>
<button onclick="changeColor('blue');">青</button>
<button onclick="changeColor('red');">赤</button>
```


HTMLには、色を変更する段落と、色を青に変更するボタン、色を赤に変更するボタンの 2 つが用意されています。

### 結果

仕様書
---

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

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

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

関連情報
----

* `Document.elementsFromPoint()`
Document.scrollingElement
=========================

**`scrollingElement`** は、`Document` インターフェースの読み込み専用プロパティです。スクロール可能な `Element` の参照を返します。スタンダードモードでは、ドキュメントのルート要素である `document.documentElement` になります。後方互換モードでは、`scrollingElement` は HTML の `body` 要素を返します。`body` 要素が存在しないか、それが スクロール可能 な場合は null を返します。構文
--
```

var element = document.scrollingElement;
```

例
-


```js
var scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;
```

仕様
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.releaseCapture()
=========================

**`releaseCapture()`** メソッドは、この文書内の要素でマウスキャプチャが有効になっている場合、それを解除します。
 マウスキャプチャが解除されると、キャプチャが有効になっている要素に全てのマウスイベントが送られるという状態は解除されます。

ある要素でマウスキャプチャを有効にするには `element.setCapture()` を呼び出すことで行われます。

構文
--


```js
releaseCapture();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

例 については `element.setCapture()` で確認してください。

仕様書
---

Internet Explorer の実装に基づく。

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

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

関連情報
----

* `element.setCapture()`
Document.linkColor
==================

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

**`Document.linkColor`** プロパティは、文書内のリンクの色を取得または設定します。

このプロパティは非推奨です。代替手段として、 CSS の `color` プロパティを HTML のアンカーリンク (`<a>`) または `:link` 疑似クラスで設定することができます。もう一つの代替手段に `document.body.link` がありますが、これは HTML 4.01 で非推奨になりました。

構文
--
```

color = document.linkColor
document.linkColor = color
```

### 引数

* `color`: 色を単語 (例えば `red`) または 16 進値 (例えば `#ff0000`) で表す文字列。
例
-


```js
document.linkColor = "blue";
```

仕様書
---

HTML5

`Document.linkColor` は DOM Level 2 HTML で非推奨になりました。

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

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

Mozilla Firefox におけるこのプロパティの既定値は、青 (16 進数で `#0000ee`) です。

関連情報
----

* `document.vlinkColor`
* `document.alinkColor`
Document.adoptNode()
====================

**`Document.adoptNode()`** は、ノードを他の文書からメソッドの文書へ移動します。取り込まれたノードおよびそのサブツリーは (もしあれば) 元の文書から削除され、 `ownerDocument` が現在の文書に変更されます。その後、ノードを現在の文書に挿入することができます。

構文
--
```

const importedNode = document.adoptNode(externalNode);
```

### 引数

`externalNode`

他の文書から取り込まれるノードです。

### 返値

インポートする文書のスコープ内にコピーされた `importedNode`。

このメソッドを呼び出した後、 `importedNode` および `externalNode` は同じオブジェクトになります。

**メモ:** `importedNode` の `Node.parentNode` は、まだ文書ツリーに挿入されていないので `null` です。

例
-


```js
const iframe = document.querySelector("iframe");
const iframeImages = iframe.contentDocument.querySelectorAll("img");
const newParent = document.getElementById("images");

iframeImages.forEach(function (imgEl) {
  newParent.appendChild(document.adoptNode(imgEl));
});
```

注
-

外部の文書から取り込まれるノードは、現在の文書に挿入する前に、次のいずれかを実行してください。

* `document.importNode()` を使用して複製する
* `document.adoptNode()` を使用して取り込む

**メモ:** **ベストプラクティス:** Firefox は現在はこの規則を強制しませんが、将来の互換性を向上するためにこの規則に従うことを強くお勧めします。

`Node.ownerDocument` の問題についての詳細は、 W3C DOM FAQ を参照してください。

仕様書
---

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

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

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

関連情報
----

* `document.importNode()`
Document.hasStorageAccess()
===========================

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

`Document` インターフェイスの **`hasStorageAccess()`** メソッドは、文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する `Promise` を返します。

詳しくは Storage Access API を参照してください。

構文
--
```

var promise = document.hasStorageAccess();
```

### 引数

なし。

### 返値

文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する `Promise` です。

Promise が解決され、関数が最初に呼び出されたときにユーザージェスチャーイベントを処理していた場合、解決ハンドラーはユーザージェスチャーが処理されているかのように実行されるため、ユーザーによるアクティベーションを必要とする API を呼び出すことができます。

例
-


```js
document.hasStorageAccess().then((hasAccess) => {
  if (hasAccess) {
    // ストレージへのアクセスはすでに許可されています。
  } else {
    // ストレージへのアクセスはまだ許可されていません。
    // requestStorageAccess() を呼び出す必要があります。
  }
});
```

仕様書
---

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

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

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

関連情報
----

Storage Access API
Document: fonts プロパティ
=====================

**`fonts`** は `Document` インターフェイスのプロパティで、文書の `FontFaceSet` インターフェイスを返します。

この機能は CSS フォント読み込み API の一部です。

値
-

 返値は文書の `FontFaceSet` インターフェイスです。
 `FontFaceSet` インターフェイスは新しいフォントを読み込んだり、以前読み込まれたフォントの状態をチェックしたりするのに有用です。

例
-

### すべてのフォントが読み込まれた後の操作の実行


```js
document.fonts.ready.then((fontFaceSet) => {
  // 使用するフォントをすべて読み込んだ後にのみ行う必要のある処理は、
  // ここで行います。
  const fontFaces = [...fontFaceSet];
  console.log(fontFaces);
  // サイトで使用していないフォントがアンロードされることがあります。
  console.log(fontFaces.map((f) => f.status));
});
```


このプロミスは、使用するすべてのフォントの読み込みとレイアウト処理が完了したときに履行されます。使用するフォントの集合は、宣言されたフォントの集合とは異なっても構いません。例えば、オプションのフォント（すなわち `font-display: optional` で宣言されたフォント）が時間内に読み込めなかった場合などです。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

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

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

関連情報
----

* `FontFaceSet` インターフェイス
* `FontFace`
Document.onafterscriptexecute
=============================

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

**`Document.onafterscriptexecute`** プロパティは、静的な `<script>` 要素のスクリプトの実行が終了したときに呼び出される関数を参照します。要素が `appendChild()` などで動的に追加された場合には呼び出されません。

構文
--
```

document.onafterscriptexecute = funcRef;
```


*funcRef* は関数の参照で、イベントが発行されると呼び出されます。イベントの `target` 属性が、実行が完了した `<script>` 要素に設定されます。

例
-


```js
function finished(e) {
  logMessage(`Finished script with ID: ${e.target.id}`);
}

document.addEventListener("afterscriptexecute", finished, true);
```


ライブ例を表示

仕様書
---

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

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

関連情報
----

* `Document.onbeforescriptexecute`
* `Document.currentScript`
Document: beforescriptexecute イベント
==================================

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

`beforescriptexecute` イベントは、静的な `<script>` が実行されようとするときに発行されます。このイベントは `appendChild()` のように動的に要素が追加された場合には発行されません。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
function starting(e) {
  logMessage(`スクリプト実行開始 (ID: ${e.target.id})`);
}

document.addEventListener("beforescriptexecute", starting, true);
// または
document.onbeforescriptexecute = starting;
```


ライブ例を表示

仕様書
---

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

関連情報
----

* `Document.afterscriptexecute_event`
* `Document.currentScript`
Document.designMode
===================

**`document.designMode`** は、文書全体を編集可能にするかどうかを制御します。妥当な値は `"on"` および `"off"` です。仕様書では、このプロパティの既定値は `"off"` です。 Firefox はこの標準仕様に従っています。初期のバージョンの Chrome や IE は既定で `"inherit"` です。 Chrome 43 以降では、既定値は `"off"` であり、 `"inherit"` には対応しなくなりました。 IE6 ～ 10 では、値が大文字です。

構文
--
```

var mode = document.designMode;
document.designMode = value;
```

### 値

`designMode` が on または off のどちらに設定されているか (または設定するか) を示す文字列です。有効な値は `on` および `off` です。

例
-

`<iframe>` の文書を編集可能にします。


```js
iframeNode.contentDocument.designMode = "on";
```

仕様書
---

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

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

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

関連情報
----

* Mozilla におけるリッチテキスト編集
* `HTMLElement.contentEditable`
Document: fullscreenElement プロパティ
=================================

**`Document.fullscreenElement`** プロパティは読み取り専用で、この文書内で現在全画面モードで表示されている `Element` を返し、全画面モードを使用していない場合は `null` を返します。

このプロパティは読み取り専用ですが、変更されても（厳格モードでも）例外は発生しません。設定しても何もせず、無視されます。

返値
--

現在全画面モードになっている `Element` オブジェクト。全画面モードがこの `document` で使用されていない場合、返値は `null` です。

例
-

この例は `isVideoInFullscreen()` 関数を表し、 `fullscreenElement` からの返値を調べています。文書が全画面モードで (`fullscreenElement` が `null` ではなく)、全画面の要素の `nodeName` が `VIDEO`、すなわち `<video>` 要素を表す場合、この関数は `true`、すなわち動画が全画面モードであることを表します。


```js
function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}
```

仕様書
---

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

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

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

関連情報
----

* 全画面 API
* 全画面 API ガイド
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `:fullscreen` and `::backdrop`
* `<iframe>` の `allowfullscreen` 属性
Document.createTouchList()
==========================

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

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

**`Document.createTouchList()`** メソッドは、新しい `TouchList` オブジェクトを生成して返します。

構文
--


```js
createTouchList(touch1)
createTouchList(touch1, touch2)
createTouchList(touch1, touch2, /\* … ,\*/ touchN)
```

### 引数

`touch1`, …, `touchN`

0 個以上の `Touch` オブジェクトです。 **メモ:** Firefox は `Touch` オブジェクトの配列も受け付けます。

### 返値

`list`

`TouchList` オブジェクトで、 `touches` 引数で指定された `Touch` オブジェクトを含みます。

例
-

この例は、 `Document.createTouchList()` メソッドを使用して `TouchList` オブジェクトを生成する様子を紹介しています。

以下のコードスニペットでは、いくつかの `Touch` オブジェクトがタッチ点と共に `target` 要素に生成され、 `TouchList` オブジェクトを作成するために使用されます。


```js
const target = document.getElementById("target");

// Create some touch points
const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);

// Create an empty TouchList objects
const list0 = document.createTouchList();

// Create a TouchList with only one Touch object
const list1 = document.createTouchList(touch1);

// Create a list with two Touch objects
const list2 = document.createTouchList(touch1, touch2);
```

仕様書
---

この機能は、現在のどの仕様にも属しません。標準化の予定はなくなりました。

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

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

関連情報
----

* タッチイベント
* `Touch`
* `TouchEvent`
* `TouchList`
* `Document.createTouch()`
Document.documentURI
====================

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

構文
--


```js
const uri = document.documentURI;
```

例
-

### JavaScript


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

### HTML


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

### 結果

仕様書
---

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

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

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

関連情報
----

* 同じ値を返す `document.URL` プロパティ
Document.clear()
================

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

**`Document.clear()`** メソッドは指定された文書全体を消去するもので、初期 (1.0 以前) の Mozilla アプリケーションにありました。

近年のバージョンの Mozilla ベースアプリケーションでも、 Internet Explorer や Netscape 4 でも、このメソッドは何も行いません。

構文
--
```

document.clear();
```

仕様書
---

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.exitPointerLock()
==========================

**`exitPointerLock()`** メソッドは、以前 `Element.requestPointerLock()` でリクエストされたポインターロックを非同期に解放します。

リクエストが成功したか失敗したかを追跡するには、 `pointerlockchange` および `pointerlockerror` イベントを待ち受けする必要があります。

構文
--


```js
exitPointerLock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-document-exitpointerlock |

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

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

関連情報
----

* `Document.pointerLockElement`
* `Element.requestPointerLock()`
* ポインターロック
Document.caretRangeFromPoint()
==============================

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

**`caretRangeFromPoint()`** は `Document` インターフェイスのメソッドで、指定された座標にある文書フラグメントの `Range` オブジェクトを返します。

構文
--


```js
caretRangeFromPoint(x, y);
```

### 引数

`x`

現在のビューポート内での水平位置。

`y`

現在のビューポート内での垂直位置。

### 返値

以下のうちの一つです。

* `Range`
* `Null` (x または y が負の数、ビューポート外、テキスト入力ノードがない場合)
例
-

下の**デモ**の段落のどこかをクリックすると、クリックした箇所に改行が挿入されます。そのためのコードは、デモの下にあります。

### デモ

以下のコードでは、まず `document.caretRangeFromPoint` の対応をチェックしますが、ブラウザーが対応していない場合は、次に `document.caretPositionFromPoint` をチェックし、代わりにそれを使用するようにしています。

### JavaScript


```js
function insertBreakAtPoint(e) {
  let range;
  let textNode;
  let offset;

  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  } else if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else {
    document.body.textContent =
      "[This browser supports neither" +
      " document.caretRangeFromPoint" +
      " nor document.caretPositionFromPoint.]";
    return;
  }
  // Only split TEXT\_NODEs
  if (textNode && textNode.nodeType == 3) {
    let replacement = textNode.splitText(offset);
    let br = document.createElement("br");
    textNode.parentNode.insertBefore(br, replacement);
  }
}

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
}
```

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```

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

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

**`Document.visibilityState`** は読み取り専用プロパティで、文書 (`document`) の可視性、つまりこの要素がこれで見えるようになったのはどのコンテキストであるかを返します。文書がバックグラウンドにあるのか、非表示のタブにあるのか、プリレンダリングのためにのみ読み込まれるのかを知るのに有用です。

利用可能な値は次のとおりです。

`visible`

ページのコンテンツは、少なくとも部分的に表示される場合があります。実際には、これはページが最小化されていないウィンドウのフォアグラウンドタブであることを意味します。

`hidden`

ページのコンテンツはユーザーには表示されません。実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、 OS の画面ロックがアクティブであることを意味します。

このプロパティの値が変更されると、 `visibilitychange` イベントが `Document` に送信されます。

これの一般的な用途は、文書がプリレンダリングされている場合に一部のアセットのダウンロードを防止したり、文書がバックグラウンドにあるか最小化されている場合に一部のアクティビティを停止したりすることです。

構文
--


```js
document.visibilityState
```

例
-


```js
document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
  // 振る舞いを変更します...
});
```

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: paste イベント
====================

**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 可 |
| インターフェイス | `ClipboardEvent` |
| イベントハンドラープロパティ | `onpaste` |

このイベントの本来の対象は、貼り付け操作を意図する対象である `Element` です。このイベントを `Document` インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: paste イベントを参照してください。

例
-


```js
document.addEventListener("paste", (event) => {
  console.log("paste action initiated");
});
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

関連情報
----

* 関連イベント: `cut`, `copy`
* `Element` を対象としたこのイベント: `paste`
* `Window` を対象としたこのイベント: `paste`