recursal/MDN huggingface dataset:
Document.hidden
===============

**`Document.hidden`** は読み取り専用のプロパティで、ページが非表示になっているとみられるかどうかを示す論理値を返します。

**メモ:** このプロパティは、Page Visibility Level 2 仕様書では「歴史的」と記述されています。代わりに `Document.visibilityState` プロパティを使用することを検討してください。

構文
--


```js
document.hidden
```

例
-


```js
document.addEventListener("visibilitychange", () => {
  console.log(document.hidden);
  // 振る舞いを修正...
});
```

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

**警告:** プリレンダリングのために、ページがユーザーにとって実際に可視であっても、`document.hidden` が true になることがあります。このようなシナリオでは、ページの読み込みは `document.visibilityState = "prerender"` で始まり、ある程度遅れて `document.visibilityState = "visible"` に遷移します。このシナリオは、 Safari で新しいブラウザータブを開き、 URL バーに URL を貼り付けて、その URL へ移動することで再現することができます。

仕様書
---

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

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

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

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

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

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

例
-


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

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

関連情報
----

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

**`createCDATASection()`** は、新しい CDATA セクションを生成して返します。

構文
--


```js
createCDATASection(data);
```

### 引数

`data`

CDATA セクションに追加されるデータを含む文字列です。

### 返値

CDATA セクションノードです。

例
-


```js
var docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");

var cdata = docu.createCDATASection("Some <CDATA> data & then some");

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

alert(new XMLSerializer().serializeToString(docu));
// 表示結果: <xml><![CDATA[Some <CDATA> data & then some]]></xml>
```

メモ
--

* これは XML でのみ動作し、 HTML 文書では動作しません（HTML 文書は CDATA セクションに対応していません）。 HTML 文書でこれを用いた場合、 `NOT_SUPPORTED_ERR` が発生します。
* 引数として渡す文字列データの一部に CDATA を閉じるシーケンス ("`]]>`") が含まれている場合、 `NS_ERROR_DOM_INVALID_CHARACTER_ERR` 例外が発生します。エスケープされていないユーザー提供のデータは、このメソッドで例外処理を行わないと、安全に使用できません（多くの場合は `createTextNode()` で代用できます）。
仕様書
---

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

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

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

`pointerlockchange` イベントは、ポインターがロックされたり解除されたりしたときに発行されます。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

`addEventListener()` を使用した場合


```js
document.addEventListener("pointerlockchange", (event) => {
  console.log("Pointer lock changed");
});
```


`onpointerlockchange` イベントハンドラープロパティを使用した場合


```js
document.onpointerlockchange = (event) => {
  console.log("Pointer lock changed");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # pointerlockchange-and-pointerlockerror-events |
| Pointer Lock 2.0 # dom-document-onpointerlockchange |

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

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

関連情報
----

* ポインターロック API の使用
Document.featurePolicy
======================

**`featurePolicy`** は `Document` インターフェイスの読み取り専用プロパティで、特定の文書に適用される機能ポリシーを見ることができる簡単な API を提供する `Policy` インターフェイスを返します。

構文
--
```

var policy = iframeElement.featurePolicy
```

### 値

`FeaturePolicy` (en-US) オブジェクトで、文書に適用された機能ポリシーの設定を調べるために使用するうことができます。

仕様書
---

#### No specification found

No specification data found for `api.Document.featurePolicy`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

`Document` の **`querySelector()`** メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の `Element` を返します。一致するものが見つからない場合は `null` を返します。

**メモ:** 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

構文
--


```js
querySelector(selectors)
```

### 引数

`selectors`

文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は `SyntaxError` が発生します。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。


**メモ:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は特殊文字のエスケープを参照してください。

### 返値

`Element` オブジェクトで、文書内で指定された CSS セレクターに最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は `null` を返します。

指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに `querySelectorAll()` を使用してください。

### 例外

`SyntaxError` `DOMException`

指定された *selectors* の構文が妥当ではない場合に発生します。

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

指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。

CSS 擬似要素はセレクター API で策定されている通り、何も要素を返しません。

### 特殊文字のエスケープ

標準の CSS の構文に従っていない ID やセレクター (例えば、コロンや空白を不適切に使用しているもの) に一致させるためには、バックスラッシュ ("`\`") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを *2 回*エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は `querySelector()` のため)。


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log("#foo\bar"); // "#fooar" (\b はバックスペース制御文字)
 document.querySelector("#foo\bar"); // いずれにも一致しない

 console.log("#foo\\bar"); // "#foo\bar"
 console.log("#foo\\\\bar"); // "#foo\\bar"
 document.querySelector("#foo\\\\bar"); // 最初の div に一致する

 document.querySelector("#foo:bar"); // いずれにも一致しない
 document.querySelector("#foo\\:bar"); // 2 番目の div に一致する
</script>
```

例
-

### あるクラスに一致する最初の要素を探索する

次の例は、クラス "`myclass`" を持つ文書内の要素の内、最初のものを返します。


```js
const el = document.querySelector(".myclass");
```

### 複雑なセレクター

セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で `<input>` に "login" という名前の付いた最初のもの (`<input name="login"/>`) のうち、 `<div>` でクラスが "user-panel main" (`<div class="user-panel main">`) の中にあるものが返されます。


```js
const el = document.querySelector("div.user-panel.main input[name='login']");
```

### 否定

すべての CSS セレクター文字列が妥当な場合、セレクターを否定することもできます。


```js
const el = document.querySelector(
  "div.user-panel:not(.main) input[name='login']",
);
```


これで、 input 要素のうち親に `user-panel` クラスのついた div があるものの、`main` クラスがないものを 1 つ選択します。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

関連情報
----

* セレクターを使用した DOM 要素の指定
* `Element.querySelector()`
* `Document.querySelectorAll()`
* `Element.querySelectorAll()`
Document.selectedStyleSheetSet
==============================

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

**`selectedStyleSheetSet`** プロパティは、現在使用中のスタイルシートセットの名前を示します。

値
-

現在使用中のスタイルシートセットの名前を示します。このプロパティを使用して、現在のスタイルシートセットを設定することもできます。

このプロパティに値を設定することは、 `document.enableStyleSheetsForSet()` を `currentStyleSheetSet` の値で呼び出し、 `lastStyleSheetSet` の値をその値に設定することに等価です。

**メモ:** この属性の値は生きています。スタイルシートの `disabled` 属性を変更すると、この属性の値に影響します。

例
-


```js
console.log("Current style sheet set: " + document.selectedStyleSheetSet);

document.selectedStyleSheetSet = "Some other style sheet";
```

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

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

関連情報
----

* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Document.createProcessingInstruction()
======================================

`createProcessingInstruction()` は新しい処理命令ノードを生成して返します。

新しいノードは `node.insertBefore` のように、あらゆることを成立させるために XML 文書に挿入されます。

構文
--


```js
piNode = document.createProcessingInstruction(target, data);
```

### 引数

* `piNode` は結果の `ProcessingInstruction` ノードです。
* `target` は処理命令の最初の部分 (つまり `<?target … ?>`) を含む文字列です。
* `data` は target の後に処理命令が伝えるすべての情報を含む文字列です。このデータはあなた次第ですが、 `?>` は処理命令を閉じるので含むことができません。
### 例外

`DOM_INVALID_CHARACTER`

以下の何れかが真になると例外を投げます。

* 処理命令の ***target*** が無効である — 有効な \*XML 名\*とは、 "xml", "XML" またはその 2 つの大文字・小文字の組み合わせであり、 `<?xml-stylesheet ?>` のような標準化されたものではないものです。
* *closing processing instruction sequence* (`?>`) が`data` に含まれている。

例
-


```js
var doc = new DOMParser().parseFromString("<foo />", "application/xml");
var pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);

doc.insertBefore(pi, doc.firstChild);

console.log(new XMLSerializer().serializeToString(doc));
// Displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/>
```

仕様書
---

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

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

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

**`getSelection()`** は `Document` インターフェイスのプロパティで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す `Selection` オブジェクトを返します。

構文
--


```js
getSelection();
```

### 引数

なし。

### 返値

`Selection` オブジェクト。

例
-

### Selection オブジェクトを取得


```js
let selection = document.getSelection();
let selRange = selection.getRangeAt(0);
// この範囲に対して何かをする

console.log(selection); // Selection オブジェクト
```

### Selection オブジェクトの文字列表現

JavaScript では、オブジェクトが文字列を取る関数 (`Window.alert()` など) に渡された場合、オブジェクトの `toString()` メソッドが呼び出され、関数にその返値が渡されます。これにより、プロパティやメソッドを持つ実際のオブジェクトであった場合、他の関数に使われると文字列になって現れることがあります。


```js
alert(selection);
```


ただし、すべての関数で自動的に `toString()` が呼び出されるとは限りません。 `Selection` オブジェクトを文字列として使用する場合は、 `toString()` メソッドを直接呼び出してください。


```js
let selectedText = selection.toString();
```

関連するオブジェクト
----------

`Window.getSelection()` を呼び出すと、 `Document.getSelection()` と同等の動作をします。

Firefox において現在は `getSelection()` は `<input>` 要素の中では動作しないことに注意してください。 `HTMLInputElement.setSelectionRange()` を使用することで回避できます。

*selection* と *focus* との違いにも注意してください。 `Document.activeElement` はフォーカスを持つ要素を返します。

仕様書
---

| Specification |
| --- |
| Selection API # dom-document-getselection |

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

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

**`lastModified`** は `Document` インターフェイスのプロパティで、現在の文書が最後に更新された日付と時刻を含む文字列を返します。

構文
--
```

var string = document.lastModified;
```

例
-

### 単純な使用

この例では `lastModified` の値をアラート表示します。


```js
alert(document.lastModified);
// 表示内容: Tuesday, December 16, 2017 11:09:42
```

### lastModified を Date オブジェクトへ変換

この例では、 `lastModified` を `Date` オブジェクトに変換します。object.


```js
let oLastModif = new Date(document.lastModified);
```

### lastModified をミリ秒に変換

この例では、 `lastModified` を地方時の 1970 年 1 月 1 日 00:00:00 からの経過ミリ秒数の数値に変換します。


```js
let nLastModif = Date.parse(document.lastModified);
```

注
-

`lastModified` は文字列なので、文書の更新日の比較には*簡単には*使用できないことに注意してください。こちらはいつページが変更されたかをアラートメッセージで表示する方法の例です (JavaScript cookies API も参照)。


```js
if (
  Date.parse(document.lastModified) >
  parseFloat(
    document.cookie.replace(
      /(?:(?:^|.\*;)\s\*last\_modif\s\*\=\s\*([^;]\*).\*$)|^.\*$/,
      "$1",
    ) || "0",
  )
) {
  document.cookie =
    "last\_modif=" +
    Date.now() +
    "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" +
    location.pathname;
  alert("ページが変更されました。");
}
```


…同じ例ですが、最初の訪問をスキップします。


```js
var nLastVisit = parseFloat(
    document.cookie.replace(
      /(?:(?:^|.\*;)\s\*last\_modif\s\*\=\s\*([^;]\*).\*$)|^.\*$/,
      "$1",
    ),
  ),
  nLastModif = Date.parse(document.lastModified);

if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
  document.cookie =
    "last\_modif=" +
    Date.now() +
    "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" +
    location.pathname;

  if (isFinite(nLastVisit)) {
    alert("ページが変更されました。");
  }
}
```


**メモ:** WebKit は時刻の文字列を UTC で返します。 Gecko と Internet Explorer はローカルタイムゾーンで時刻を返します。 (参照: Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time)

もし***外部のページ*が変更されたかどうか**を知りたい場合は、 `XMLHttpRequest()` API についてのこの段落をお読みください。

仕様書
---

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

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

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

**`pointerLockElement`** は `Document` インターフェイスの読み取り専用プロパティで、この要素をポインターがロックされている間のマウスイベントの対象として設定します。ロック待ち状態の場合、ポインターがロックされていない場合、対象が他の文書にある場合は `null` になります。

値
-

`Element` または `null`。

例
-

キャンバス要素に現在ポインターロックがかかっているかどうかを判定します。


```js
if (document.pointerLockElement === canvasElement) {
  console.log("ポインターロック状態がロック中になりました");
  // レスポンスで何か有益なことをする
} else {
  console.log("ポインターロック状態がロック解除になりました");
  // レスポンスで何か有益なことをする
}
```

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |

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

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

関連情報
----

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

指定された名前空間 URI と修飾名を持つ要素を生成します。

名前空間 URI を指定せずに要素を生成する場合は、 `createElement()` メソッドを使用してください。

構文
--
```

var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
```

### 引数

`namespaceURI`

文字列で、要素に関連付ける名前空間 URI を指定します。生成される要素の `namespaceURI` プロパティは *namespaceURI* の値で初期化されます。 妥当な名前空間 URI も参照してください。

`qualifiedName`

文字列で、生成される要素の型を指定します。生成される要素の `nodeName` プロパティは、 *qualifiedName* の値で初期化されます。

`options` 省略可

 任意の `ElementCreationOptions` オブジェクトで、 `is` という名前の単一のプロパティを持ち、その値として以前に `customElements.define()` を使用して定義されたカスタム要素のタグ名を設定します。
 以前のバージョンの Custom Elements specification との後方互換性のため、ブラウザーによってはここにオブジェクトの代わりに、文字列を渡すことができ、その文字列の値はカスタム要素のタグ名になります。
 この引数の使い方について詳しい情報は、 Extending native HTML elements を参照してください。


新しい要素には `is` 属性が与えられ、値はカスタム要素のタグ名になります。カスタム要素は一部のブラウザーのみで利用できる試行的な機能です。

### 返値

The new `Element`.

重要な名前空間 URI
-----------

HTML

`http://www.w3.org/1999/xhtml`

SVG

`http://www.w3.org/2000/svg`

MathML

`http://www.w3.org/1998/Math/MathML`

XUL 
Non-standard

`http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul`

XBL 
Non-standard

非推奨

`http://www.mozilla.org/xbl`

例
-

これは新しい <div> 要素を XHTML 名前空間に生成し、 vbox 要素に追加します。これは有用な XUL 文書ではありませんが、二つの異なる名前空間の要素を単一の文書内で利用する方法を紹介しています。


```xml
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 xmlns:html="http://www.w3.org/1999/xhtml"
 title="||Working with elements||"
 onload="init()">

<script type="application/javascript"><![CDATA[
 let container;
 let newdiv;
 let txtnode;

 function init(){
 container = document.getElementById("ContainerBox");
 newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
 txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
 newdiv.appendChild(txtnode);
 container.appendChild(newdiv);
 }

]]></script>

 <vbox id="ContainerBox" flex="1">
  <html:div>
   The script on this page will add dynamic content below:
  </html:div>
 </vbox>

</page>
```


**メモ:** 上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。

仕様書
---

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

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

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

関連情報
----

* `document.createElement()`
* `document.createTextNode()`
* `Node.namespaceURI`
* Namespaces in XML
Document.scripts
================

`Document` インターフェイスの **`scripts`** プロパティは、文書中の `<script>` 要素のリストを返します。返されるオブジェクトは単一の `HTMLCollection` オブジェクトです。

構文
--
```

var scriptList = document.scripts;
```

### 値

`HTMLCollection` です。これを使用して、リスト中のすべての要素を配列のように取得することができます。

例
-

ページ内の `<script>` 要素の存在を確認する例を以下に示します。


```js
let scripts = document.scripts;

if (scripts.length) {
  alert("このページには script 要素があります。");
}
```

仕様書
---

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

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

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

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

構文
--
```

var objRef = document.head;
```

### 値

`HTMLHeadElement` です。

例
-


```html
<!doctype html>
<head id="my-document-head">
  <title>Example: using document.head</title>
</head>

<script>
 var theHead = document.head;

 console.log(theHead.id); // "my-document-head";

 console.log(theHead === document.querySelector("head")); // true
</script>
```

メモ
--

`document.head` は読取専用です。このプロパティに値を代入した場合は、暗黙に失敗するか、 Strict モードの場合は、 `TypeError` を投げます。

仕様書
---

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

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

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

関連情報
----

* `document.body`
Document: pictureInPictureEnabled プロパティ
=======================================

**`pictureInPictureEnabled`** は `Document` インターフェイスの読み取り専用プロパティで、ピクチャインピクチャモードが利用できるかどうかを示します。

ピクチャインピクチャモードは、権限ポリシーで指定されていない限り、既定では利用できます。

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

値
-

論理値で、 `true` の場合は `HTMLVideoElement.requestPictureInPicture()` を呼び出すことで、動画がピクチャインピクチャに入り、浮動動画ウィンドウに表示できます。ピクチャインピクチャモードが利用できない場合、この値は `false` です。

例
-

この例では、 `<video>` 要素に対してピクチャインピクチャモードに入ろうとする前に `pictureInPictureEnabled` の値を調べ、機能が利用できない場合に呼び出さないようにしています。


```js
function requestPictureInPicture() {
  if (document.pictureInPictureEnabled) {
    videoElement.requestPictureInPicture();
  } else {
    console.log(
      "お使いのブラウザーでは、ピクチャインピクチャを使用することができません。",
    );
  }
}
```

仕様書
---

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

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

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

関連情報
----

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
Document.alinkColor
===================

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

文書本文のアクティブなリンクの色を取得または設定します。リンクは `mousedown` と `mouseup` イベントの間にアクティブになります。

構文
--
```

var color = document.alinkColor;
document.alinkColor = color;
```


*color* は文字列で、色の名前 (`blue`, `darkblue`, など) または色の 16 進値 (`#0000FF` など) が入ります。

メモ
--

Mozilla Firefox では、このプロパティの既定値は赤 (16 進で `#ee0000`) です。

`document.alinkColor` は DOM Level 2 HTML で非推奨となっています。代替方法の一つは CSS セレクターの `:active` です。

他の代替手段として `document.body.alink` がありますが、上記の CSS による代替手段が設置されたため HTML 4.01 で非推奨となっています。

Gecko は `alinkColor`/`:active` および `:focus` の両方に対応しています。 Internet Explorer 6 および 7 は HTML アンカー (<a>) リンクには `alinkColor`/`:active` のみに対応しており、 `:focus` は Gecko と同様に動作します。 IE は `:focus` には対応していません。

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

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

**`DOMContentLoaded`** イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 可 (ただし、キャンセル可能ではない単純イベントとして定義されている) |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | なし |

別なイベントである `load` は、ページ全体が読み込まれたときにのみ使用します。 `load` を `DOMContentLoaded` がより適切である場面で使ってしまうことがよくある誤りです。

同期 JavaScript は DOM の解析をいったん中断します。ユーザーがページをリクエストした後でできるだけ早く DOM が解析されるようにしたい場合は、 JavaScript を非同期にして、スタイルシートの読み込みを最適化してください。ふつう通りに読み込むと、スタイルシートは HTML と並行で読み込まれ、中心となる HTML 文書の帯域を「盗む」ため、ふつう通りに読み込むと DOM 解析の速度を低下させます。

例
-

### 基本的な使用


```js
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});
```

### DOMContentLoaded の遅延


```html
<script>
 document.addEventListener("DOMContentLoaded", (event) => {
 console.log("DOM fully loaded and parsed");
 });

 for (let i = 0; i < 1000000000; i++) {} // This synchronous script is going to delay parsing of the DOM,
 // so the DOMContentLoaded event is going to launch later.
</script>
```

### 読み込みが完了しているかどうかのチェック

`DOMContentLoaded` はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。


```js
function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` has already fired
  doSomething();
}
```

### ライブデモ

#### 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 # stop-parsing |

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

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

関連情報
----

* 関連イベント: `load`, `readystatechange`, `beforeunload`, `unload`
* `Window` を対象とした同じイベント: `DOMContentLoaded`