recursal/MDN huggingface dataset:
TextDecoderStream: ignoreBOM プロパティ
==================================

**`ignoreBOM`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、バイトオーダーマーク (BOM) が無視されるかどうかを示す論理値を返します。

値
-

論理値で、初期値は `false` です。

例
-


```js
stream = new TextDecoderStream();
console.log(stream.ignoreBOM); // false を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # textdecoder-ignore-bom-flag |

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

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

**`encoding`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、このデコーダーが使用するエンコーディングアルゴリズムの名前が入った文字列を返します。

エンコーダーは コンストラクター の `label` 引数で設定し、既定値は `utf-8` となります。

値
-

文字列で、エンコーディング形式の名前を表す小文字の ASCII 名が入ります。

取りうる値は `TextDecoder.encoding` に挙げられているもの（エンコーディング API のエンコーディングにあるラベル）と同じです。

例
-

`TextDecoderStream` から `encoding` の値を返します。


```js
stream = new TextDecoderStream();
console.log(stream.encoding); // 既定値の "utf-8" を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-encoding |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream: TextDecoderStream() コンストラクター
===============================================

**`TextDecoderStream()`** コンストラクターは、新しい `TextDecoderStream` オブジェクトを生成します。これは、あるバイナリーエンコーディングのテキストのストリームを文字列に変換するために使用します。

構文
--


```js
new TextDecoderStream(label)
new TextDecoderStream(label, options)
```

### 引数

`label`

 文字列で、既定値は `utf-8` です。
 何れかの有効なラベルにすることができます。


`options` 省略可

次のプロパティを持つオブジェクトです。

`fatal`

 論理値で、このオブジェクトが無効なデータをデコードした場合に `TypeError` を発生させる必要があるかどうかを示します。
 既定値では `false` であり、これはデコードする際に不正なデータを置換文字で置き換えることを意味します。



### 例外

`RangeError`

`label` の値が未知の場合、または `'replacement'` デコードアルゴリズム（`"iso-2022-cn"` または `"iso-2022-cn-ext"`）につながる値のいずれかである場合に発生します。

例
-

 次の例は、`fetch()` の呼び出しから取得したバイナリーデータをデコードする方法を示しています。
 このデータには `label` が渡されていないので、UTF-8 として解釈されます。


```js
const response = await fetch("https://example.com");
const stream = response.body.pipeThrough(new TextDecoderStream());
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoderstream① |

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

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

**`fatal`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、`TextDecoderStream` オブジェクトのエラーモードが `fatal` に設定されているかどうかを論理値で示します。

 このプロパティが `true` であった場合、デコーダーがデコード中に正しくない形のデータに遭遇した場合、`TypeError` が発生します。
 `false` であった場合、デコーダーは無効なデータを置換文字 `U+FFFD` (�) で置き換えます。
 このプロパティの値は `TextDecoderStream()` コンストラクターで設定されます。

値
-

 論理値で、エラーモードが "fatal" に設定されている場合は `true` となります。
 そうでない場合は `false` となり、エラーモードが "replacement" であることを示します。

例
-


```js
stream = new TextDecoderStream();
console.log(stream.fatal); // false を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-fatal |

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

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

**`writable`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、`WritableStream` を返します。

値
-

`WritableStream` です。

例
-

次の例は、`WritableStream` を `TextDecoderStream` オブジェクトから返す方法を示しています。


```js
stream = new TextDecoderStream();
console.log(stream.writable); // WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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

`XMLSerializer` の **`serializeToString()`** メソッドは、指定された DOM ツリーを表す XML 形式の文字列を構築します。

構文
--


```js
serializeToString(rootNode)
```

### 引数

`rootNode`

XML 表現を構築する DOM ツリーまたはサブツリーのルートとして用いる `Node` です。

### 返値

指定された DOM ツリーの XML 表現が入った文字列です。

### 例外

`TypeError`

指定された `rootNode` が対応しているノード型でないとき投げられます。ルートノードは `Node` または `Attr` でなければなりません。

`InvalidStateError` `DOMException`

ツリーが正常にシリアライズできなかったとき投げられます。おそらくコンテンツの XML シリアライズ対応に関する問題が原因です。

`SyntaxError` `DOMException`

HTML のシリアライズを要求されたが、コンテンツが良い形式でないため成功しなかったとき投げられます。

使用法の注意点
-------

### 対応しているノード型

指定するルートノードとその全ての子孫は、XML シリアライズのアルゴリズムに対応しているものでなければなりません、ルートノード自身は、`Node` または `Attr` のオブジェクトでなければなりません。

ルートノードの子孫では、`Node` と `Attr` に加えて以下の型も利用可能です。

* `DocumentType`
* `Document`
* `DocumentFragment`
* `Element`
* `Comment`
* `Text`
* `ProcessingInstruction`
* `Attr`

これ以外の型が見つかった場合、`TypeError` 例外が投げられます。

### 結果の XML に関する注意点

`serializeToString()` から出力される XML について、注意するべき点がいくつかあります。

* XML シリアライズにおいては、`Element` および `Attr` のノードの `namespaceURI` は常にそのままシリアライズされます。すなわち、指定されている `prefix` やデフォルト名前空間は消されたり変更されたりする可能性があります。
* 結果の XML は HTML パーサーに対応しています。
* HTML 名前空間にある子ノードを持たない (すなわち、空タグを表している) 要素は、空要素タグ (`"<someelement/>"`) ではなく開始タグと終了タグ (`"<someelement></someelement>"`) を用いてシリアライズされます。
仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-xmlserializer-serializetostring |

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

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

関連情報
----

* XML のパースとシリアライズ
* HTML にシリアライズする : `Element.innerHTML` と
 `Element.outerHTML`
* HTML や XML をパースして DOM ツリーを生成する : `DOMParser`
DOMTokenList: toggle() メソッド
===========================

**`toggle()`** は `DOMTokenList` インターフェイスのメソッドで、渡されたトークンをリストから削除し、 `false` を返します。そのトークンが存在しなかった場合は、追加して `true` を返します。

構文
--


```js
toggle(token)
toggle(token, force)
```

引数
--

`token`

文字列で、トグル切り替えしたいトークンを表します。

`force` 省略可

 存在する場合は、片方の操作のみを行います。
 `false` に設定すると、 `token` を削除する*だけ*となり、追加は行いません。
 `true` に設定すると、 `token` を追加する*だけ*となり、削除は行いません。


### 返値

`true` または `false` の論理値で、呼び出し後に `token` がリストに存在するかどうかを示します。

例
-

### クリック時にクラスをトグル切り替え

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリスト内のトークンを置き換え、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b">classList is 'a b'</span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;

span.addEventListener("click", () => {
  const result = classes.toggle("c");
  span.textContent = `'c' ${
 result ? "added" : "removed"
 }; classList is now "${classes}".`;
});
```


出力結果は以下のようになり、テキストをクリックするたびに変化します。

### force 引数の設定

2 番目の引数は、クラスを含めるかどうかを決定するために使用することができます。この例では、ブラウザーのウィンドウ幅が 1000 ピクセル以上の場合にのみ 'c' クラスを含めます。


```js
span.classList.toggle("c", window.innerWidth > 1000);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-toggle① |

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

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

**`entries()`** は `DOMTokenList` インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキー/値の組を処理することができるイテレーターを返します。値は [キー, 値] の組を持つ配列 (`Array`) であり、それぞれが単一のトークンを表します。

構文
--


```js
entries()
```

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。 `entries()` を使用してキー/値の組を含むイテレーターを取得してから、 `for...of` ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.entries();

for (const value of iterator) {
  span.textContent += `(${value})`;
}
```


出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.entries`.  
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.

関連情報
----

* `DOMTokenList.foreach()`, `DOMTokenList.keys`, `DOMTokenList.values`
DOMTokenList: supports() メソッド
=============================

**`supports()`** は `DOMTokenList` インターフェイスのメソッドで、渡されたトークンが関連する属性で対応しているトークンに含まれていれば `true` を返します。このメソッドは機能に対応しているかを検出するためのものです。

構文
--


```js
supports(token)
```

引数
--

`token`

問い合わせるトークンが入った文字列です。

### 返値

論理値で、トークンが見つかったかどうかを返します。

例
-


```js
const iframe = document.getElementById("display");

if (iframe.sandbox.supports("an-upcoming-feature")) {
  // support code for mystery future feature
} else {
  // fallback code
}

if (iframe.sandbox.supports("allow-scripts")) {
  // instruct frame to run JavaScript
  //
  // (NOTE: This feature is well-supported; this is just an example!)
  //
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-supports① |

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

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

**`length`** は `DOMTokenList` インターフェイスの読み取り専用プロパティで、オブジェクト内に格納されたオブジェクトの個数を整数で表します。

値
-

正の整数、またはリストが空であれ `0` です。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として取得し、そのリストの長さを `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
const length = classes.length;

span.textContent = `classList length = ${length}`;
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-length① |

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

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

**`values()`** は `DOMTokenList` インターフェイスのメソッドで、開発者がこの `DOMTokenList` に含まれるすべての値を処理することができるイテレーターを返します。それぞれの値は文字列です。

構文
--


```js
tokenList.values()
```

引数
--

なし。

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として受け取ります。 `values()` を使用して値を含むイテレーターを取得してから、 for...of ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.values();

for (const value of iterator) {
  span.textContent += `(${value}) `;
}
```


出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.values`.  
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.
DOMTokenList: item() メソッド
=========================

**`item()`** は `DOMTokenList` インターフェイスのメソッドで、リスト内の項目をその位置から取得します。

**メモ:** このメソッドはブラケット記法と等価です。
 したがって、 `aList.item(i)` は `aList[i]` と同じです。


構文
--


```js
tokenList.item(index)
```

### 引数

`index`

返したい項目の位置を表す数値です。整数でなかった場合は、整数部分のみが使用されます。

### 返値

返された要素を表す文字列です。数値がそのリストの `length` 以上であった場合は `null` を返します。

### 例外

`TypeError`

`index` が整数に変換できなかった場合に発生します。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として取得するのに `Element.classList` を使用します。それからリスト内の最後の要素を `item(tokenList.length - 1)` を使用して取得し、 `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
const item = classes.item(classes.length - 1);
span.textContent = item;
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-item① |

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

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

**`replace()`** は `DOMTokenList` インターフェイスのメソッドで、既存のトークンを新しいトークンで置き換えます。最初のトークンが存在しない場合、 `replace()` はすぐに `false` を返し、トークンリストに新しいトークンを追加しません。

構文
--


```js
replace(oldToken, newToken)
```

引数
--

`oldToken`

置き換えたいトークンを表す文字列です。

`newToken`

`oldToken` を置き換えたいトークンを表す文字列です。

### 返値

論理値で、 `oldToken` の置き換えに成功した場合は `true`、それ以外の場合は `false` です。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリスト内のトークンを置き換え、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;

const result = classes.replace("c", "z");

span.textContent = result ? classes : "token not replaced successfully";
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-replace① |

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

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

**`remove()`** は `DOMTokenList` インターフェイスのメソッドで、リストから指定されたトークンを取り除きます。

構文
--


```js
remove(token1)
remove(token1, token2)
remove(token1, token2, /\* … ,\*/ tokenN)
```

引数
--

`token1`, …, `tokenN`

 リストから取り除きたいトークンを表す文字列です。
 文字列がリストにない場合は、エラーは発生せず、何も起こりません。


### 返値

なし (`undefined`)。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを、 `DOMTokenList` として受け取るのに `Element.classList` を使用します。それからリストからトークンを取り除き、 `<span>` の `Node.textContent` の中にリストを書き込みます。

最初に HTML です。


```html
<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>
```


そして JavaScript です。


```js
const span = document.getElementById("ab");
const classes = span.classList;
classes.remove("c");
span.textContent = classes;
```


複数のクラスを一度に削除するために、複数のトークンを渡すことができます。渡す順序は、リスト中に出現する順序と一致している必要はありません。


```js
const span2 = document.getElementById("a");
const classes2 = span2.classList;

classes2.remove("c", "b");
span2.textContent = classes2;
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-remove① |

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

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

**`add()`** は `DOMTokenList` インターフェイスのメソッドで、指定されたトークンをリストに追加します。既に存在する場合は何もしません。

構文
--


```js
add(token0)
add(token0, token1)
add(token0, token1, /\* … ,\*/ tokenN)
```

引数
--

`tokenN`

`DOMTokenList` に追加するトークン（またはトークン群）を表す文字列です。

### 返値

なし。

### 例外

`SyntaxError` `DOMException`

引数のうちの 1 つが空文字列であった場合に発生します。

`InvalidCharacterError` `DOMException`

トークンに ASCII ホワイトスペースが含まれていた場合に発生します。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリストに新しいトークンを追加し、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;
```


出力結果は以下のようになります。

同様に、複数のトークンを追加することができます。


```js
span.classList.add("d", "e", "f");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-add① |

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

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

**`value`** は `DOMTokenList` インターフェイスの文字列化プロパティで、リストの値を文字列としてシリアライズして返したり、リストを空にしたり渡された値に設定したりするためのものです。

値
-

 リストの内容をシリアライズした文字列です。
 それぞれの項目は空白で区切られます。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として取得し、リストの値を `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
span.textContent = classes.value;
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-value② |

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

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

**`forEach()`** は `DOMTokenList` インターフェイスのメソッドで、リスト中のそれぞれの値の組に対して挿入順で 1 回ずつ、引数で渡されたコールバックを呼び出します。

構文
--


```js
forEach(callback)
forEach(callback, thisArg)
```

### 引数

`callback`

それぞれの要素に対して呼び出す関数で、 3 つの引数を取ります。

`currentValue`

配列内で処理中の現在の要素です。

`currentIndex`

配列内で処理中の現在の要素の位置です。

`listObj`

`forEach()` を実行中の配列です。


`thisArg` 省略可

`callback` を実行する際に `this` として使用する値です。

### 返値

なし。

例
-

次の例では、`<pre>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。`forEach()` を使用して値を含むイテレーターを取得し、それぞれの値を `<pre>` の `Node.textContent` に `forEach()` の中の関数から書き込みます。

### HTML


```html
<pre class="a b c"></pre>
```

### JavaScript


```js
const pre = document.querySelector("pre");
const classes = pre.classList;
const iterator = classes.values();

classes.forEach(function (value, key, listObj) {
  pre.textContent += `(${value} ${key})/${this}\n`;
}, "arg");
```

### 結果

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.forEach`.  
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.

関連情報
----

* `DOMTokenList.entries()`, `DOMTokenList.keys`, `DOMTokenList.values`
DOMTokenList: contains() メソッド
=============================

**`contains()`** は `DOMTokenList` インターフェイスのメソッドで、論理値を返します。 `true` は渡されたトークンがそのリストに含まれていることを表し、そうでなければ `false` になります。

構文
--


```js
contains(token)
```

引数
--

`token`

リストの中に存在するかどうかを調べたいトークンを表す文字列です。

### 返値

論理値で、 `true` は呼び出し元のリストにトークンが含まれていることを表し、そうでなければ `false` になります。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として返すために `Element.classList` を使用します。 `"c"` がリスト中に存在することを確認し、その `<span>` の `Node.textContent` の中に結果を書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
span.textContent = span.classList.contains("c")
  ? "classList に 'c' が含まれています"
  : "classList に 'c' が含まれていません";
```


出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-contains① |

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

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

**`keys()`** は `DOMTokenList` インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを処理することができるイテレーターを返します。
 キーの型は符号なし整数です。

構文
--


```js
keys()
```

引数
--

なし。

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るために、 `Element.classList` を使用しています。 `keys()` を使用してキーを含むイテレーターを取得してから、 for...of ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。


```html
<span class="a b c"></span>
```


そして JavaScript です。


```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.keys();

for (let value of iterator) {
  span.textContent += `(${value}) `;
}
```


出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.keys`.  
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.

関連情報
----

* `DOMTokenList.entries()`, `DOMTokenList.forEach()`, `DOMTokenList.values`
FileSystemFileHandle.getFile()
==============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`FileSystemFileHandle` インターフェイスの **`getFile()`** メソッドは、ハンドルが表すエントリーのディスク上の状態を表す `File` オブジェクトで解決する `Promise` を返します。

このメソッドが呼び出されたあと、ディスク上のファイルが変更されたり削除されたりすると、返された `File` オブジェクトはおそらく読み込めなくなるでしょう。

構文
--


```js
getFile()
```

### 引数

なし

### 返値

`File` オブジェクトで解決する `Promise` を返します。

### 例

NotAllowedError

読み込みモードの `PermissionStatus.state` が `granted` でないとき投げられます。

例
-

以下の非同期関数は、ファイルピッカーを開き、ファイルが選択されると `getFile()` メソッドを用いて中身を取得します。


```js
async function getTheFile() {
  // ファイルピッカーを開く
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // ファイルの中身を取得する
  const fileData = await fileHandle.getFile();
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-getfile |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
FileSystemFileHandle.createWritable()
=====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`FileSystemFileHandle` インターフェイスの **`createWritable()`** メソッドは、ファイルへの書き込みができる `FileSystemWritableFileStream` を作成します。このメソッドは、作成されたストリームで解決する `Promise` を返します。

ストリームに対してなされたあらゆる変更は、ストリームを閉じるまで、ファイルハンドルが表すファイルには反映されません。これは、典型的には、データを一時ファイルに書き込み、書き込み可能なファイルストリームが閉じられてはじめてファイルハンドルが表すファイルを一時ファイルで置き換えることで実装されています。

構文
--


```js
createWritable()
```

### 引数

FileSystemCreateWritableOptions

メソッドに渡すオプションを表すオブジェクトです。以下のオプションがあります。

* `keepExistingData`: `false` であるか指定されない場合、一時ファイルは空に初期化されます。
 そうでない場合、既存のファイルがまず一時ファイルにコピーされます。

### 返値

`FileSystemWritableFileStream` オブジェクトで解決される `Promise` を返します。

### 例外

NotAllowedError

ハンドルの `PermissionStatus.state` が `readwrite` モードで `'granted'` でないとき投げられます。

例
-

以下の非同期関数は、与えられた内容をファイルハンドルに書き込むことで、ディスクに書き込みます。


```js
async function writeFile(fileHandle, contents) {
  // 書き込み先の FileSystemWritableFileStream を作成する
  const writable = await fileHandle.createWritable();

  // ファイルの内容をストリームに書き込む
  await writable.write(contents);

  // ファイルを閉じ、内容をディスクに書き込む
  await writable.close();
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createwritable |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
FileSystemFileHandle.createSyncAccessHandle()
=============================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`FileSystemFileHandle` インターフェイスの **`createSyncAccessHandle()`** メソッドは、同期式でファイルを読み書きできる `FileSystemSyncAccessHandle` オブジェクトで解決する `Promise` を返します。
 このメソッドは同期式であることによりパフォーマンス上有利ですが、それ用の Web Workers によるオリジンプライベートファイルシステム内のファイルの操作にのみ用いることができます。

`FileSystemSyncAccessHandle` を作成すると、ファイルハンドルに対応するファイルの排他的ロックを取得します。これにより、作成したアクセスハンドルを閉じるまで、同じファイルについて `FileSystemSyncAccessHandle` や `FileSystemWritableFileStream` を作成することはできなくなります。

構文
--


```js
createSyncAccessHandle()
```

### 引数

なし

### 返値

`FileSystemSyncAccessHandle` オブジェクトで解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

`FileSystemSyncAccessHandle` オブジェクトがオリジンプライベートファイルシステム内のファイルを表していないとき投げられます、

`NoModificationAllowedError` `DOMException`

ブラウザーがファイルハンドルに対応するファイルのロックを取得できないとき投げられます。

`NotAllowedError` `DOMException`

API レベルで許可されていないとき投げられます。(すなわち、`FileSystemHandle.requestPermission` が必要です)

例
-

以下の非同期のイベントハンドラーは、Web Worker 内にあります。そのうちのこの部分は、同期式ファイルアクセスハンドルを作成します。


```js
onmessage = async (e) => {
  // メインスクリプトから送られた処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルへのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // …

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createsyncaccesshandle |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files