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

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

**`preferredStyleSheetSet`** プロパティは、ページ作者によって設定された推奨スタイルシートセットを返します。

値
-

作者の推奨するスタイルシートセットを示します。これはスタイルシート宣言の順序と HTTP の `Default-Style` ヘッダーから特定されます。

作者によって定義された推奨スタイルシートセットがない場合は、空文字列 (`""`) が返されます。

例
-


```js
if (document.preferredStyleSheetSet) {
  console.log("推奨スタイルシート: " + document.preferredStyleSheetSet);
} else {
  console.log("推奨スタイルシートがありません。");
}
```

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

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

関連情報
----

* `document.lastStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Document.createNSResolver()
===========================

指定されたノードのスコープで定義を尊重する名前空間を解決する `XPathNSResolver` を生成します。

構文
--
```

nsResolver = document.createNSResolver(node);
```

### 引数

* `node` は名前空間の解決のためのコンテキストとして使用されるノードです。
### 返値

* `nsResolver` は XPathNSResolver オブジェクトです。
注
-

任意の DOM ノードをネームスペースを解決するように修正し、 XPath 式が文書内に現れたノードのコンテキストに対して容易に評価できるようにします。このアダプターは、 `lookupNamespaceURI` が呼び出されたときにノードの階層で使用可能な現在の情報を使用して、指定された接頭辞から `namespaceURI` を解決する際に、ノード上の DOM Level 3 メソッド `lookupNamespaceURI` のように機能します。 暗黙の `xml` 接頭辞も正しく解決されます。

なお、 XPath は、ヌル名前空間の要素と一致する接頭辞のない QNames を定義します。 XPath には、通常の要素参照に適用される既定の名前空間を選択する方法はありません (例えば `xmlns='http://www.w3.org/1999/xhtml'` における `p[@id='_myid'`])。ヌルではない名前空間の既定の要素を照合するには、 `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` のような形を使用して特定の要素を参照するか (このアプローチは名前空間が分からない可能性がある動的 XPath 式で動作します)、接頭辞付きの名前の条件を使用し、接頭辞と名前空間を対応付ける名前空間リゾルバーを作成するかしてください。後者のアプローチを採りたいと思うのであれば、ユーザー定義の名前空間リゾルバーの作成方法をお読みください。

`createNSResolver` は DOM Level 3 で導入されました。

仕様書
---

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

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

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

関連情報
----

* document.evaluate
* Javascript での XPath の使用
Document.defaultView
====================

ブラウザーにおいて、**`document.defaultView`** はドキュメントに関連付けられている `window` オブジェクトを返します。もし存在しない場合は `null` を返します。

構文
--


```js
var win = document.defaultView;
```


このプロパティは読み取り専用です。

仕様書
---

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

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`startViewTransition()`** はビュートランジション API のメソッドで、新しいビュートランジションを始め、それを表す `ViewTransition` オブジェクトを返します。

`startViewTransition()`を呼び出すと、ビュートランジションのプロセスで説明されている一連の手順が続きます。

構文
--


```js
startViewTransition(callback)
```

### 引数

`callback`

通常、ビュートランジションプロセス中に DOM を更新するために呼び出されるコールバック関数で、プロミス (`Promise`) を返します。コールバックは、 API が現在のページのスクリーンショットを導いたら呼び出されます。コールバックが返すプロミスが履行されると、次のフレームでビュートランジションが始まります。コールバックが返すプロミスが拒否された場合、トランジションは放棄されます。

### 返値

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

例
-

### 基本的な使用方法

基本的なビュートランジションのデモでは、 `updateView()` 関数はビュートランジション API に対応しているブラウザーと対応していないブラウザーの両方に対応しています。対応しているブラウザーで、返値を気にせずにビュートランジションのプロセスを設定するには `startViewTransition()` を呼び出します。


```js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API
Document: styleSheets プロパティ
===========================

**`styleSheets`** は `Document` インターフェイスの読み取り専用プロパティで、 `CSSStyleSheet` オブジェクトの `StyleSheetList` を返します。これは、この文書に明示的にリンク埋め込まれたスタイルシートを表します。

値
-

返されるリストは次の順になります。

* `<link>` ヘッダーから受け取ったスタイルシートが先に、ヘッダーの順序で並べられます。
* DOM から受け取ったスタイルシートが後に、ツリー順に並べられます。
例
-


```js
function getStyleSheet(unique\_title) {
  for (const sheet of document.styleSheets) {
    if (sheet.title === unique_title) {
      return sheet;
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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

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

XML 宣言（例えば `<?xml version="1.0"?>`）で指定されたバージョン番号を返し、宣言がなければ "1.0" を返します。

この属性は常に 1.0 を返していたので、本当は有用ではなく、 DOM Level 4 で削除されました。同様に、 Firefox 10 はもう実装していません。以前の主な使用法は、文書が HTML ではなく XML として表示するかどうかを検出するためでした。これは、（文書が XML ではない HTML モードの場合）小文字で要素を作成し、すべて大文字に変換されるかどうかを確認することによって検出することができます。


```js
if (document.createElement("foo").tagName == "FOO") {
  /\* 文書は XML ではない \*/
}
```

仕様書
---

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

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

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

`fullscreenerror` イベントは、ブラウザーが全画面モードに移行できないときに発生します。

`fullscreenchange` イベント イベントと同様、二つの `fullscreenerror` イベントが発行されます。 1 つ目はモード切替に失敗した `Element` へ送られ、 2 つ目はその要素を所有する `Document` へ送られます。

全画面モードへの切り替えに失敗する理由については、全画面 API のガイドを参照してください。

このイベントはキャンセルできません。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
const requestor = document.querySelector("div");

function handleError(event) {
  console.error("全画面モードへの移行時にエラーが発生しました");
  console.log(event);
}

document.addEventListener("fullscreenerror", handleError);
// or
document.onfullscreenerror = handleError;

requestor.requestFullscreen();
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenerror |

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

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

関連情報
----

* `fullscreenchange`
* `Element`: `fullscreenerror` イベント
* 全画面 API
* 全画面 API のガイド
Document.plugins
================

`Document` インターフェイスの **`plugins`** プロパティは読み取り専用で、現在の文書内にある `<embed>` 要素を表す 1 つ以上の `HTMLEmbedElement` を含んだ `HTMLCollection` オブジェクトを返します。

**メモ:** インストールされているプラグインの一覧には、このメソッドでなく `window.navigator.plugins` を使用してください。

構文
--
```

embedArrayObj = document.plugins
```

### 値

`HTMLCollection`、または文書内に embed がなければ `null` です。

仕様書
---

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

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

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

関連情報
----

* MSDN documentation
Document.queryCommandSupported()
================================

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

**`Document.queryCommandSupported()`** メソッドは、指定しされたエディターコマンドにブラウザーが対応しているかどうかを報告します。

構文
--


```js
queryCommandSupported(command);
```

### 引数

`command`

対応しているかどうかを調べるコマンドです。

### 返値

論理値で、コマンドに対応していれば `true`、そうでなければ `false` を返します。

注
-

`'paste'` コマンドは機能が利用できないときだけでなく、呼び出しスクリプトにそのコマンドを実行するための権限が不足しているときにも `false` を返します。

例
-


```js
var flg = document.queryCommandSupported("SelectAll");

if (flg) {
  // ...何か行う
}
```

仕様書
---

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

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

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

関連情報
----

* `Document.execCommand()`
* `Document.queryCommandEnabled()` (en-US)
Document: readystatechange イベント
===============================

**`readystatechange`** event は、文書の `readyState` 属性が変化したときに発生します。

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

例
-

### ライブデモ

#### HTML


```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```


#### JS


```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = log.textContent + "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = log.textContent + `DOMContentLoaded\n`;
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-readystatechange |

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

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

関連情報
----

* 関連イベント: `DOMContentLoaded`, `load`, `beforeunload`, `unload`
Document()
==========

**`Document`** コンストラクターは、ブラウザーに読み込まれたウェブページである `Document` オブジェクトを新たに生成し、そのページの内容へのエントリーポイントを提供します。

構文
--
```

new Document();
```

仕様書
---

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

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

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

`fullscreenchange` イベントは、ブラウザーが全画面モードに移行したり終了したりした直後に発生します。

このイベントは、全画面モードに移行または終了しようとしている `Element` に送られ、それから `Document` までバブリングします。

`Element` が全画面モードに移行しようとしているのか、終了しようとしているのかを判別するには、 `Document.fullscreenElement` の値をチェックしてください。この値が `null` ならば、要素が全画面モードを終了するところであり、そうでなければ全画面モードに移行するところです。

このイベントはキャンセルできません。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

### `fullscreenchange` イベントのログ記録

この例では、 `fullscreenchange` イベントのハンドラーが `Document` に追加されます。

ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 `click` ハンドラーは `div` の全画面モードを切り替えます。もし `document.fullscreenElement` に値があれば、全画面モードを終了します。そうでない場合は、 div は全画面モードに配置されます。

`fullscreenchange` イベントが処理される時点で、要素の状態はすでに変化していることを覚えておいてください。そのため、もし変更が全画面モードへのものであれば、 `document.fullscreenElement` は、これで全画面モードになった要素を指すことになります。他にも、 `document.fullscreenElement` が null の場合、全画面モードは取り消される可能性があります。

この例のコードで意味しているのは、ある要素が現在全画面モードである場合、 `fullscreenchange` ハンドラーは全画面要素の `id` をコンソールにログ出力するということです。もし `document.fullscreenElement` が null ならば、このコードは全画面モードを離れるための変更であることをメッセージとしてログ出力します。

#### HTML


```html
<h1>fullscreenchange イベントの例</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">全画面モードの切り替え</button>
  <pre id="logger"></pre>
</div>
```


#### CSS


```css
\* {
  box-sizing: border-box;
}

#fullscreen-div {
  height: 150px;
  padding: 1rem;
  background-color: pink;
}

#logger {
  height: 80px;
  padding: 0 0.5rem;
  background-color: white;
  overflow: scroll;
}
```


#### JavaScript


```js
const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

function fullscreenchanged(event) {
  // document.fullscreenElement は、全画面モードにある要素があれば
  // それを指します。要素がなければ、このプロパティの値は null に
  // なります。
  if (document.fullscreenElement) {
    log(`要素: ${document.fullscreenElement.id} が全画面モードに入りました。`);
  } else {
    log("全画面モードを終了しました。");
  }
}

document.addEventListener("fullscreenchange", fullscreenchanged);

// トグルボタンがクリックされたら、全画面モードを切り替える
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    // exitFullscreen は Document オブジェクトでのみ使用可
    document.exitFullscreen();
  } else {
    fullScreenElement.requestFullscreen();
  }
});
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenchange |

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

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

関連情報
----

* `fullscreenerror`
* `Element`: `fullscreenchange` イベント
* 全画面 API
* 全画面 API のガイド
Document.fgColor
================

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

**`fgColor`** は、現在の文書の前景色またはテキストの色を取得または設定します。

構文
--
```

var color = document.fgColor;
document.fgColor = color;
```

### 引数

* `color` は文字列で、色を表すキーワード ("red" など) または 16 進数の値 (`"#000000"` など) です。
例
-


```js
document.fgColor = "white";
document.bgColor = "darkblue";
```

メモ
--

Mozilla Firefox ではこのプロパティの既定値は黒 (16 進数で `#000000`) です。

`document.fgColor` は DOM Level 2 HTML で非推奨となっています。推奨される代替手段は CSS プロパティの `color` (たとえば `document.body.style.color = "red"`) です。

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

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

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

**`Document.contentType`** プロパティは読み取り専用で、文書がレンダリングされる MIME タイプを返します。これは HTTP ヘッダーやその他の MIME 情報のソースから来る可能性があり、ブラウザーや拡張機能によって行われる自動型変換の影響を受ける可能性があります。

**メモ:** このプロパティは `<meta>` 要素には影響されません。

構文
--
```

contentType = document.contentType;
```

### 値

`contentType` は読み取り専用のプロパティです。

仕様書
---

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

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

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

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

**`Document.lastStyleSheetSet`** プロパティは、最後に有効化されたスタイルシートセットを返します。このプロパティの値は `document.selectedStyleSheetSet` プロパティが変化するたびに変化します。

値
-

最も新しく設定されたスタイルシートセットを示します。現在のスタイルシートセットが `document.selectedStyleSheetSet` を設定することで変更されたものでない場合、返値は `null` になります。

**メモ:** この値は `document.enableStyleSheetsForSet()` が呼び出された時に変化しません。

例
-


```js
let lastSheetSet = document.lastStyleSheetSet;

if (!lastSheetSet) {
  lastSheetSet = "Style sheet not yet changed";
} else {
  console.log("The last style sheet set is: " + lastSheetSet);
}
```

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

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

関連情報
----

* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Document: pointerlockerror イベント
===============================

`pointerlockerror` イベントは、（技術的な理由、または権限が拒否されたために）ポインターのロックに失敗したときに発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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


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

document.addEventListener("pointerlockerror", (event) => {
  console.log("ポインターのロックエラー");
});
```


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


```js
document.onpointerlockerror = (event) => {
  console.log("ポインターのロックエラー");
};
```

仕様書
---

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

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

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

関連情報
----

* ポインターロック API の使用
Document: querySelectorAll() メソッド
=================================

`Document` の **`querySelectorAll()`** メソッドは、指定された CSS セレクターに一致する文書中の要素のリストを示す静的な（生きていない）`NodeList` を返します。

構文
--


```js
querySelectorAll(selectors)
```

### 引数

`selectors`

文字列で、照合対象となる 1 つまたは複数のセレクターを含みます。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は `SyntaxError` 例外が発生します。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターは、カンマで区切って指定することができます。


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

### 返値

ライブではない `NodeList` で、指定されたセレクターの少なくとも 1 つに一致する要素ごとに `Element` を一つずつ含みます。または一致するものがなければ空の `NodeList` です。

**メモ:** 指定された `selectors` が CSS 擬似要素を含む場合、返されるリストは常に空になります。

### 例外

`SyntaxError` `DOMException`

指定された `selectors` の構文が妥当ではない場合です。

例
-

### 一致するもののリストの入手

文書内のすべての `<p>` 要素の `NodeList` を入手します。


```js
const matches = document.querySelectorAll("p");
```


次の例では、文書内にあるすべての `<div>` 要素のうち、 `note` または `alert` のいずれかのクラスを持つものリストを返します。


```js
const matches = document.querySelectorAll("div.note, div.alert");
```


次に、 `<p>` 要素ののうち直近の親要素が `test` という ID を持つコンテナー内に位置し、直接の親要素が `highlighted` クラスを持つ `<div>` であるリストを取得します。


```js
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");
```


次の例では属性セレクターを使用しており、 `data-src` という名前の属性を持つ、文書内の `<iframe>` 要素のリストを返します。


```js
const matches = document.querySelectorAll("iframe[data-src]");
```


次の例では、ID が `userlist` の要素の中にあり、`data-active` 属性を持ち、その値が `1` であるリスト項目のリストを返すため、属性セレクターが使用されています。


```js
const container = document.querySelector("#userlist");
const matches = container.querySelectorAll("li[data-active='1']");
```

### 一致したリストへのアクセス

いったん、一致した要素の `NodeList` が返されると、それをちょうど配列のように見ることができます。配列が空である (`length` プロパティが 0 である) 場合は、一致がなかったということです。

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。


```js
const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});
```

仕様書
---

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

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

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

関連情報
----

* セレクターを使用した DOM 要素の指定
* CSS ガイドの属性セレクター
* MDN 学習領域の属性セレクター
* `Element.querySelector()` および `Element.querySelectorAll()`
* `Document.querySelector()`
* `DocumentFragment.querySelector()` および `DocumentFragment.querySelectorAll()`
Document.createTextNode()
=========================

新しい `Text` ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。

構文
--
```

var text = document.createTextNode(data);
```


* *text*: `Text` ノード。
* *data*: テキストノードの中に入れるデータが入った文字列。
例
-


```html
<!doctype html>
<html lang="en">
  <head>
    <title>createTextNode example</title>
    <script>
 function addTextNode(text) {
 var newtext = document.createTextNode(text),
 p1 = document.getElementById("p1");

 p1.appendChild(newtext);
 }
 </script>
  </head>

  <body>
    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

    <hr />

    <p id="p1">First line of paragraph.</p>
  </body>
</html>
```

仕様書
---

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

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

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

`Document` オブジェクトの **`importNode()`** メソッドは、後で現在の文書に挿入するために、他の文書から `Node` または `DocumentFragment` の複製を作成します。

インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、 `appendChild()` や `insertBefore()` のような挿入メソッドを、現在の文書ツリーに*存在する*ノードに対して呼び出す必要があります。

`document.adoptNode()` とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。

構文
--


```js
importNode(externalNode);
importNode(externalNode, deep);
```

### 引数

`externalNode`

現在の文書にインポートする、外部の `Node` または `DocumentFragment` です。

`deep` 省略可

論理値のフラグで、既定値は `false` であり、`externalNode` の DOM サブツリー全体をインポートするかどうかを制御します。

* `deep` が `true` に設定された場合、 `externalNode` およびその子孫全てが複製されます。
* `deep` が `false` に設定された場合、 `externalNode` のみがインポートされます — 新しいノードには子ノードはない状態になります。

### 返値

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

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

例
-


```js
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

メモ
--

外部文書からのノードは、現在の文書に挿入する前に、次のいずれかの状態にしなければなりません。

* `document.importNode()` でクローンする、または
* `document.adoptNode()` で移行する

**メモ:** Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。

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

仕様書
---

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

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

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

関連情報
----

* `document.adoptNode()` このメソッドととても似た動作を行う
* `Node.appendChild()`
* `Node.insertBefore()`
Document: dir プロパティ
===================

**`Document.dir`** プロパティは文字列で、文書のテキストの書字方向が、左書き (既定) か右書きかを表します。利用可能な値は `'rtl'`（右書き、右から左）または `'ltr'`（左書き、左から右）です。

値
-

文字列です。

仕様書
---

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

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

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

関連情報
----

* `dir` グローバル属性
Document.createDocumentFragment()
=================================

新しい空の `DocumentFragment` を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

構文
--
```

var fragment = document.createDocumentFragment();
```

### 値

新しく作成された空の `DocumentFragment` オブジェクトで、中にノードが挿入できるものです。

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

`DocumentFragment` は DOM の `Node` オブジェクトですが、メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加することです。 DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。

文書フラグメントは*メモリ内*にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページのリフロー (要素の位置と大きさを決定するための計算) が行われません。そのため文書フラグメントを利用することによって、性能の改善が見込まれます。

`DocumentFragment` コンストラクターを使用して新しいフラグメントを生成することもできます。


```js
let fragment = new DocumentFragment();
```

例
-

この例では、主要なウェブブラウザのリストを `DocumentFragment` 内に作成し、表示するドキュメントに新しい DOM サブツリーを追加しています。

### HTML


```html
<ul id="ul"></ul>
```

### JavaScript


```js
var element = document.getElementById("ul"); // ul が存在することを仮定
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `document.implementation.createDocument()`
* `documentFragment`