recursal/MDN huggingface dataset:
Document: visibilitychange イベント
===============================

`visibilitychange` イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。

このイベントはキャンセル不可です。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

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

このイベントには、更新された文書の表示・非表示状態が含まれていませんが、この情報は document の `visibilityState` プロパティから取得することができます。

このイベントは、ユーザーが新しいページに移動したり、タブを切り替えたり、タブを閉じたり、ブラウザーを最小化したり閉じたりしたとき、あるいはモバイルではブラウザーから異なる形のアプリに切り替えたときに `visibilityState` が `hidden` になった状態で発行されます。 `hidden` への遷移はページが確実に監視できる最後のイベントなので、開発者はそれをユーザーのセッションの終わりとして扱うべきです（例えば解析データの送信の場合）。

また、 `hidden` への遷移は、ページが UI の更新を停止し、ユーザーがバックグラウンドで実行させたくないタスクを停止するための良いタイミングでもあります。

例
-

### 非表示に遷移した際に音楽を一時停止

この例では、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。


```js
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
```

### 非表示に遷移した際に解析のセッション終了を送信

この例では、 `hidden` への遷移をユーザーセッションの終わりとして扱い、 `Navigator.sendBeacon()` API を使って適切な解析を送信しています。


```js
document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-visibilitychange |
| HTML Standard # handler-onvisibilitychange |

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

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

関連情報
----

* ページ可視性 API
* `Document.visibilityState`
* Don't lose user and app state, use Page Visibility は、なぜ `beforeunload`/`unload` ではなく、`visibilitychange` を使用しなければならないのか、その理由を詳しく説明しています。
* Page Lifecycle API は、ウェブアプリケーションでページのライフサイクルの動作を処理する際の最善の手法を解説しています。
Document: timeline プロパティ
========================

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
`timeline` は `Document` インターフェイスの読み取り専用プロパティで、現在の文書の既定のタイムラインを表します。このタイムラインは `DocumentTimeline` (en-US) の特別なインスタンスです。

このタイムラインはそれぞれの `document` に固有のもので、`Document.open()` の呼び出しを含む `document` の存続期間中維持されます。

 このタイムラインは `Performance.timeOrigin` からの時刻をミリ秒単位で表します。
 基準時刻以前はタイムラインはアクティブではなく、 `currentTime` (en-US) は `null` になります。

**メモ:** アクティブでない文書（`Window`、`<iframe>`、`<frame>` に関連付けられていない `Document`）に関連付けられている文書タイムラインもアクティブではないと見なされます。

値
-

`DocumentTimeline` (en-US) オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-document-timeline |

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

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

関連情報
----

* ウェブアニメーション API
* `AnimationTimeline` (en-US)
* `AnimationTimeline.currentTime` (en-US)
* `DocumentTimeline` (en-US)
Document.forms
==============

`Document` インターフェイスの **`forms`** プロパティは読み取り専用で、文書内に含まれるすべての `<form>` を列挙した `HTMLCollection` を返します。

**メモ:** 同様に、`HTMLFormElement.elements` プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。

構文
--
```

collection = document.forms;
```

### 値

文書のすべてのフォームを列挙する `HTMLCollection` オブジェクトです。コレクションのそれぞれの項目は、単一の `<form>` 要素を表す `HTMLFormElement` です。

文書にフォームがない場合、返されるコレクションは空で、長さはゼロです。

例
-

### フォーム情報の取得


```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
 type="button"
 onclick="alert(document.forms[0].id);"
 value="robby's form" />
    </form>

    <form id="dave">
      <input
 type="button"
 onclick="alert(document.forms[1].id);"
 value="dave's form" />
    </form>

    <form id="paul">
      <input
 type="button"
 onclick="alert(document.forms[2].id);"
 value="paul's form" />
    </form>
  </body>
</html>
```

### フォーム内要素の取得


```js
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
```

### 名前付きフォームへのアクセス


```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form name="login">
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button type="submit">Log in</button>
    </form>

    <script>
 var loginForm = document.forms.login; // Or document.forms['login']
 loginForm.elements.email.placeholder = "test@example.com";
 loginForm.elements.password.placeholder = "password";
 </script>
  </body>
</html>
```

仕様書
---

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

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

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

関連情報
----

* HTML forms
* `<form>` および `HTMLFormElement` インターフェイス
Document: referrer プロパティ
========================

**`Document.referrer`** プロパティは、このページへリンクしていたページの URI を返します。

### 値

この値は、ユーザーが（リンクではなく、例えばブックマークから）ページに直接移動した場合は空文字列になります。プロパティはただ文字列を返すものであるため、参照先のページの DOM アクセスを提供するものではありません。

`<iframe>` の中では、 `Document.referrer` は親ウィンドウの `Window.location` の `href` と同じ値で初期化されます。

仕様書
---

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

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

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

**`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。

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

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

例
-


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

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

関連情報
----

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

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

`Document` インターフェイスの **`all`** プロパティは読み取り専用で、 document ノードをルートとした `HTMLAllCollection` (en-US) を返します。言い換えれば、文書のすべての要素を、 (配列のように) 順序および (通常のオブジェクトのように) ID でアクセスすることができる形で返します。

構文
--
```

var htmlAllCollection = document.all;
```

### 値

文書のすべてのノードを含む `HTMLAllCollection` (en-US) です。

論理型への変換
-------

`document.all` は JavaScript からアクセスすることができる唯一の値が偽となるオブジェクトです。これは、[[IsHTMLDDA]] 内部スロットを持つためです。これは、 Internet Explorer の古いバージョンとの互換性のために行われています。これについての詳細な情報は、 StackOverflow のこの回答にあります。

仕様書
---

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

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

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

**`Document.write()`** メソッドは、テキストの文字列を `document.open()` で開かれた文書ストリームに書き込みます。

**メモ:** `document.write()` は文書の**ストリーム**に書き込みを行うため、閉じられた (読み込み済みの) 文書で `document.write()` を呼び出すと、自動的に `document.open()` が呼び出され、文書はクリアされます。

構文
--


```js
document.write(markup);
```

### 引数

*markup*

文書に書き込まれるテキストを含む文字列です。

### 例


```html
<html>
  <head>
    <title>書き込み例</title>

    <script>
 function newContent() {
 document.open();
 document.write("<h1>新しい内容では、古い内容は削除されます！</h1>");
 document.close();
 }
 </script>
  </head>

  <body onload="newContent();">
    <p>元の文書コンテンツ。</p>
  </body>
</html>
```

注
-

出力したテキストは文書構造モデルにおいて構文解析されます。上記の例では、 `h1` 要素は文書中の一つのノードになります。

`document.open()` を呼び出さずに読み込まれた文書へ書き込みを行うと、自動的に `document.open()` の呼び出しが実行されます。一度出力し終わったとき、ブラウザーにページの読み込みの終了を伝えるために、 `document.close()` を呼び出すことが推奨されます。

`document.write()` の呼び出しがインラインの HTML の `<script>` タグ内で行われた場合、 `document.open()` は呼び出されません。次に例を示します。


```html
<script>
 document.write("<h1>Main title</h1>");
</script>
```


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

**メモ:** `document.write` は deferred または asynchronous のスクリプト内では無視され、エラーコンソールに "A call to `document.write()` from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。

**メモ:** Edge のみ、`document.write()` を `<iframe>` 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。

**メモ:** Chrome 55 からは、キャッシュされていない HTTP の場合、`document.write()` を通じて挿入された `<script>` 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、document.write() に対する介入をご覧ください。

仕様書
---

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

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

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

関連情報
----

* `element.innerHTML`
* `document.createElement()`
Document.createComment()
========================

**`createComment()`** は新たにコメントノードを作成し、返します。

構文
--
```

CommentNode = document.createComment(data);
```

### 引数

*data*

文字列で、コメントに追加されるデータを含みます。

例
-


```js
var docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
var comment = docu.createComment(
  "This is a not-so-secret comment in your document",
);

docu.getElementsByTagName("xml")[0].appendChild(comment);

alert(new XMLSerializer().serializeToString(docu));
// 表示結果: <xml><!--This is a not-so-secret comment in your document--></xml>
```

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: activeElement プロパティ
=============================

**`activeElement`** は `Document` インターフェイスの読み取り専用プロパティで、DOM 内で現在フォーカスを持っている要素 (`Element`) を返します。

 多くの場合、 `activeElement` はその時点でテキストが選択されていれば `HTMLInputElement` または `HTMLTextAreaElement` オブジェクトを返します。もしそうなら、そのオブジェクトの `selectionStart` と `selectionEnd` プロパティを使用することで、より詳細な情報を得ることができます。
 その他、フォーカスされている要素が `<select>` 要素（メニュー）や `<input>` 要素である場合もあります。

通常、ユーザーはタブキーを押して、フォーカス可能な要素間でページ内のフォーカスを移動させ、スペースバーを使用して 1 つの要素をアクティブにします（つまり、ボタンを押したり、ラジオボタンをトグル切り替えしたりします）。どの要素にフォーカスが当たるかは、プラットフォームやブラウザーの現在の設定によって異なります。例えば、 macOS システムでは通常、既定では、テキスト入力要素以外の要素はフォーカスされません。

**メモ:** フォーカス（どの要素がユーザー入力イベントを受信しているか）と選択範囲（文書内で現在強調表示されている部分）は同じものではありません。現在の選択範囲は `window.getSelection()` で取得することができます。

値
-

現在フォーカスがある `Element` です。フォーカスされている要素がない場合は `<body>` または `null` となります。

例
-

### HTML


```html
<p>下のテキストエリアからテキストを選択してください。</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
これはテキストエリア 1 です。 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
 >
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
これはテキストエリア 2 です。 Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
 >
</form>

<p>アクティブな要素の ID: <em id="output-element"></em></p>
<p>選択されているテキスト: <em id="output-text"></em></p>
```

### JavaScript


```js
function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart,
    activeTextarea.selectionEnd,
  );

  const outputElement = document.getElementById("output-element");
  const outputText = document.getElementById("output-text");
  outputElement.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

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

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

関連情報
----

* `Document.hasFocus`
Document: caretPositionFromPoint() メソッド
=======================================

**`caretPositionFromPoint()`** は `Document` インターフェイスのメソッドで、この DOM ノードを含む `CaretPosition` オブジェクトを、そのノード内のキャレットとキャレットの文字オフセットと共に返します。

構文
--


```js
caretPositionFromPoint(x, y)
```

### 引数

`x`

ポイントの水平座標。

`y`

ポイントの垂直座標。

### 返値

`CaretPosition` オブジェクト。

例
-

以下の**デモ**の段落のどこかをクリックすると、クリックした位置に改行を挿入します。コードはデモの下にあります。

### デモ

下記のコードでは、最初に `document.caretPositionFromPoint` の 対応状況を調べますが、ブラウザーが対応していない場合は `document.caretRangeFromPoint` を調べて、代わりにそれを使用します。

### JavaScript


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

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else if (document.caretRangeFromPoint) {
    // WebKit 独自の代替メソッドを使用
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  } else {
    // どちらのメソッドも対応していなければ、何もしない
    return;
  }
  // TEXT\_NODE のみを分割
  if (textNode?.nodeType === 3) {
    let replacement = textNode.splitText(offset);
    let br = document.createElement("br");
    textNode.parentNode.insertBefore(br, replacement);
  }
}

let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
  paragraph.addEventListener("click", insertBreakAtPoint, false);
}
```


```
let message = document.getElementById("message");
if (document.caretPositionFromPoint) {
  message.textContent =
    "このブラウザーは標準の document.caretPositionFromPoint に対応しています";
  message.classList.add("supported");
} else if (document.caretRangeFromPoint) {
  message.textContent =
    "このブラウザーは標準外の document.caretRangeFromPoint に対応しています";
  message.classList.add("supported");
}
```

### HTML
```

<div id="message">
  このブラウザーは document.caretRangeFromPoint にも
  document.caretPositionFromPoint にも対応していません。
</div>
```



```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>
```


```
#message {
  color: red;
  font-weight: bold;
}

#message.fallback {
  color: darkorange;
}

#message.supported {
  color: green;
}
```

仕様書
---

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

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

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

関連情報
----

* `CaretPosition`
Document: scrollend イベント
========================

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

**`scrollend`** イベントは、文書のビューのスクロールが完了した時に発生します。
 スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。

 スクロール位置の更新には、マウスホイールのスムーズなスクロールや瞬間的なスクロール、キーボードスクロール、スクロールスナップイベント、他にもスクロール位置を更新させるAPIや ジェスチャーなどがあります。
 タッチパンやトラックパッドのスクロールなどのユーザージェスチャーは、ポインターまたはキーが離されるまで完了しません。
 スクロール位置が変化しなかった場合、scrollend イベントは発行されません。

要素内のスクロールが完了したときを検出する場合は、 `Element: scrollend イベント`を参照してください。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

### 文書の `scrollend` をイベントリスナーで使用

 以下の例では、イベントリスナーを使用して `scrollend` イベントを使用し、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。
 この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあり、iframe 内で両方向にスクロールすることが可能です。
 ユーザーがスクロールを止めると、`scrollend` イベントが発行されます。
```

\* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}
```



```html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
```



```js
const output = document.querySelector("p#output");

document.addEventListener("scroll", (event) => {
  output.innerHTML = `Document scroll event fired!`;
});

document.addEventListener("scrollend", (event) => {
  output.innerHTML = `Document scrollend event fired!`;
});
```

### `onscrollend` イベントハンドラープロパティの使用

 以下の例では、`scrollend` イベントハンドラープロパティを使用して、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。
 この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあるため、iframe 内で両方の方向にスクロールすることが可能です。
 これは最初の例を基に作成したものですが、イベントリスナーの代わりに `document.onscrollend` を使用しています。
```

\* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}
```



```html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
```



```js
document.onscroll = (event) => {
  output.innerHTML = "Document scroll event fired!";
};

document.onscrollend = (event) => {
  output.innerHTML = "Document scrollend event fired!";
};
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scrollend |
| HTML Standard # handler-onscrollend |

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

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

関連情報
----

* Document の `scroll` イベント
* Element の `scrollend` イベント
* Element の `scroll` イベント
Document.createNodeIterator()
=============================

新しい `NodeIterator` オブジェクトを返します。

構文
--
```

const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);
```

### 値

`root`

`NodeIterator` の探索の開始地点になるルートノードです。

`whatToShow` 省略可

オプションの `unsigned long` 値で、 `NodeFilter` の定数プロパティを組み合わせて作られたビットマスクを表します。これは特定の種類のノードを絞り込みするのに便利な方法です。. 既定値は `0xFFFFFFFF` で、 `SHOW_ALL` 定数を表します。

| 定数 | 数値 | 説明 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `-1` (すなわち `unsigned long` の最大値) | すべてのノードを表します。 |
| `NodeFilter.SHOW_ATTRIBUTE` 
非推奨
 | `2` | 属性 `Attr` ノードを表します。これは、 `Attr` ノードをルートとして `NodeIterator` を作成した場合にのみ意味を持ちます。この場合、その属性ノードが反復や探索の最初の位置に現れることを意味します。属性は他のノードの子ではないので、文書ツリーを探索しても現れません。 |
| `NodeFilter.SHOW_CDATA_SECTION` 
非推奨
 | `8` | `CDATASection` ノードを表します。 |
| `NodeFilter.SHOW_COMMENT` | `128` | `Comment` ノードを表します。 |
| `NodeFilter.SHOW_DOCUMENT` | `256` | `Document` ノードを表します。 |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | `DocumentFragment` ノードを表します。 |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | `DocumentType` ノードを表します。 |
| `NodeFilter.SHOW_ELEMENT` | `1` | `Element` ノードを表します。 |
| `NodeFilter.SHOW_ENTITY` 
非推奨
 | `32` | `Entity` ノードを表示します。これは、 `Entity` ノードをルートとして `NodeIterator` を作成した場合にのみ意味を持ちます。この場合、 `Entity` ノードが探索の最初の位置に現れることを意味します。エンティティは文書ツリーの一部ではないので、文書ツリーを探索しても表されません。 |
| `NodeFilter.SHOW_ENTITY_REFERENCE` 
非推奨
 | `16` | `EntityReference` ノードを表します。 |
| `NodeFilter.SHOW_NOTATION` 
非推奨
 | `2048` | `Notation` ノードを表示します。これは、 `Notation` ノードをルートとして `NodeIterator` を作成した場合にのみ意味を持ちます。この場合、 `Notation` ノードが探索の最初の位置に現れることを意味します。 Notation は文書ツリーの一部ではないので、文書ツリーを探索しても表されません。 |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | Shows `ProcessingInstruction` nodes. |
| `NodeFilter.SHOW_TEXT` | `4` | `Text` ノードを表します。 |

`filter` 省略可

NodeFilter インターフェースを実装したオブジェクト。その acceptNode() メソッドは、反復可能なノードのリストに含めるかどうかを決定するために、 whatToShow フラグによって含まれていると受け入れられたルートを基準としたサブツリーの各ノードに対して呼び出されます (代わりに単純なコールバック関数を使用することもできます)。このメソッドは `NodeFilter.FILTER_ACCEPT`, `NodeFilter.FILTER_REJECT`, or `NodeFilter.FILTER_SKIP` のいずれかを返します。例を参照してください。


**メモ:** Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前の版では、このメソッドは DOM4 仕様の一部ではないオプションの 4 番目の引数 (entityReferenceExpansion) を受け入れていました。この引数は、エンティティ参照ノードの子がイテレーターから見えるかどうかを示していました。このようなノードはブラウザーでは作成されないので、この引数は何の効果もありませんでした。

例
-


```js
const nodeIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  function (node) {
    return node.nodeName.toLowerCase() === "p"
      ? NodeFilter.FILTER\_ACCEPT
      : NodeFilter.FILTER\_REJECT;
  },
);
const pars = [];
let currentNode;

while ((currentNode = nodeIterator.nextNode())) {
  pars.push(currentNode);
}
```

仕様書
---

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

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

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

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

廃止された `bgColor` プロパティは、現在の文書の背景色を取得または設定します。

構文
--
```

color = document.bgColor
document.bgColor =color
```

### 引数

* `color` : 色名 (`"white"` 等) またはカラーコード (`"#FFFFFF"` 等) の文字列
例
-
```

document.bgColor = "darkblue";
```

メモ
--

Firefox ではこのプロパティの初期値は白 (16 進表記で `#FFFFFF`) となっています。

`document.bgColor` は DOM Level 2 HTML で非推奨になっています。推奨される代替方法は、 CSS の `background-color` を使用することで、 `document.body.style.backgroundColor` で DOM を通してアクセスできます。もう一つの代替手段である `document.body.bgColor` は、 HTML 4.01 で CSS に代替されたため非推奨となっています。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: exitPictureInPicture() メソッド
=====================================

`Document` の **`exitPictureInPicture()`** メソッドは、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 `HTMLVideoElement.requestPictureInPicture()` を前回呼び出したときの効果を逆転させます。

構文
--


```js
exitPictureInPicture()
```

### 引数

なし。

### 返値

プロミス (`Promise`) で、ユーザーエージェントがピクチャインピクチャモードを終了した時点で解決されます。全画面モードを終了しようとしてエラーが発生した場合、プロミスの `catch()` ハンドラーが呼び出されます。

例
-

この例では、現在の文書内でマウスボタンがクリックされるたびに、ピクチャインピクチャモードを終了させます。


```js
document.onclick = (event) => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .then(() => console.log("Document Exited from Picture-in-Picture mode"))
      .catch((err) => console.error(err));
  } else {
    video.requestPictureInPicture();
  }
};
```


ページ上のどの動画が現在ピクチャインピクチャモードで再生されているかを追跡する予定であれば、 `HTMLVideoElement` 要素上の `enterpictureinpicture` と `exitpictureinpicture` イベントを待ち受けなければならないことに注意してください。あるいは、 `Document.pictureInPictureElement` が現在の `HTMLVideoElement` 要素を参照しているかどうかを調べることもできます。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-document-exitpictureinpicture |

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

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

関連情報
----

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
* ピクチャインピクチャのイベント
Document.compatMode
===================

**`Document.compatMode`** プロパティは、文書が Quirks モード (互換モード) か標準準拠モードのどちらで表示されているかを示します。

構文
--
```

const mode = document.compatMode
```

### 値

列挙値で、次の値を取ります。

* "`BackCompat`" 文書が互換モードの場合。
* "`CSS1Compat`" 文書が互換モードでない ("standards" モードとも呼ばれる) または限定互換モード ("almost standards" モードとも呼ばれる) 場合。

**メモ:** これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。

例
-


```js
if (document.compatMode == "BackCompat") {
  // 互換モード
}
```

仕様書
---

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

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

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