recursal/MDN huggingface dataset:
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.
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
==========

**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
==========

**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 プロパティ
=================================

**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()
========================

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 プロパティ
==========================

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

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

**`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()
======================

**警告:** `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
================

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

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

**`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 プロパティ
==========================

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

廃止された `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()
==================

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

構文
--
```

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

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

概要
--

`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()
========================

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() メソッド
===============================

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

`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 イベント
=====================

**`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()
======================

**`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.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() メソッド
=========================

**`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 の使用