recursal/MDN huggingface dataset:
ShadowRoot.getAnimations()
==========================

**`getAnimations()`** は `ShadowRoot` のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての `Animation` オブジェクトの配列を返します。この配列には CSS アニメーション、CSS トランジション、ウェブアニメーション が含まれています。

構文
--


```js
getAnimations();
```

### 引数

なし。

### 返値

`Animation` オブジェクトの配列 (`Array`) で、それぞれが呼び出された `ShadowRoot` の子孫である要素に現在関連付けられた 1 つのアニメーションを表します。

例
-

次のコードでは、シャドウツリーにあるすべてのアニメーションの `Animation.playbackRate` を半分にすることで、アニメーションの速度を下げます。


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
shadow.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.

関連情報
----

* Web Animations API
* CSS アニメーション
* CSS トランジション
* `Element.getAnimations()` - 単一の
 `Element` とその配下のアニメーションのみを読み取ります。
* `Animation`
ShadowRoot.innerHTML
====================

**`innerHTML`** は `ShadowRoot` インターフェイスのプロパティで、 `ShadowRoot` の内部の DOM ツリーに対する参照を設定したり返したりします。

構文
--


```js
var domString = shadowRoot.innerHTML;
shadowRoot.innerHTML = domString;
```

### 値

`DOMString` です。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

shadow.innerHTML = "<strong>This element should be more important!</strong>";
```

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-innerhtml-innerhtml-2 |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`mode`** は `ShadowRoot` の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。

シャドウルートの `mode` が "`closed`" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、 `<video>` の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。

構文
--


```js
var mode = shadowRoot.mode;
```

### 値

`ShadowRootMode` 列挙型で定義された値です。 `open` か `closed` のどちらかです。

例
-


```js
  // アクセスできない closed のシャドウルートを作成します
  let element = document.createElement("div");
  element.attachShadow({ mode: "closed" });
  element.shadowRoot // シャドウルートが closed なので null

  // アクセスできる open のシャドウルートを作成します
  let element2 = document.createElement("div");
  element2.attachShadow({ mode: "open" });
  console.log("The shadow is" + element2.shadowRoot.mode) // "The shadow is open" と出力
  element2.shadowRoot.innerHTML("

Opened shadow

") // シャドウは open なので、外部からアクセスできます
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-shadowroot-mode |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`host`** は `ShadowRoot` の読み取り専用プロパティで、 `ShadowRoot` が取り付けられている DOM 要素の参照を返します。

構文
--


```js
const someElement = shadowRoot.host;
```

### 値

DOM の `Element` です。

例
-


```js
let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

  ...

// 後で、元のホスト要素を返す
let hostElem = shadow.host;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-shadowroot-host |

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

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

**`activeElement`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、シャドウツリー内でフォーカスを持っている要素を返します。

値
-

現在フォーカスを持っている `Element`、またはフォーカスを持っている要素がなければ `null` です。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let focusedElem = shadow.activeElement;
```

仕様書
---

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

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

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

関連情報
----

* `Document.activeElement`
ShadowRoot.fullscreenElement
============================

**`fullscreenElement`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、現在全画面モードで表示されているシャドウツリー内の要素を返します。

構文
--


```js
shadowRoot.fullscreenElement;
```

### 値

現在全画面モードで表示されている `Element`、または全画面モードの要素がなければ `null` を返します。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let fullscreenElem = shadow.fullscreenElement;
```

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenelement② |

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

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

関連情報
----

* `Document.fullscreenElement`
ShadowRoot.pointerLockElement
=============================

**`pointerLockElement`** は `ShadowRoot` インターフェースの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインタのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。

構文
--


```js
shadowRoot.pointerLockElement;
```

### 値

`Element` または `null` です。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let pleElem = shadow.pointerLockElement;
```

仕様書
---

| 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()`
* ポインターロック
ShadowRoot.pictureInPictureElement
==================================

**`pictureInPictureElement`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、このシャドウツリー内で現在、ピクチャインピクチャモードで表示されている要素 (`Element`) を返します。現在、ピクチャインピクチャモードが使用されていない場合は `null` を返します。

構文
--


```js
shadowRoot.pictureInPictureElement;
```

### 値

現在ピクチャインピクチャモードになっている `Element` オブジェクトへの参照、またはピクチャインピクチャモードが現在シャドウツリーで使われていない場合は `null` が返されます。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let pipElem = shadow.pictureInPictureElement;
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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

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

関連情報
----

* `Document.pictureInPictureElement`
XPathResult: snapshotItem() メソッド
================================

**`snapshotItem()`** は `XPathResult` インターフェイスのメソッドで、アイテムのスナップショットの集合、またはインデックスがノードの範囲を外れている場合は `null` を返します。イテレーターの返値とは異なり、スナップショットは無効になることはありませんが、変更したときに現在の文書に対応しない場合があります。

構文
--


```js
snapshotItem(i)
```

### 引数

`i`

数値で、項目のインデックスです。

### 返値

`XPathResult` のノード集合内の指定されたインデックスの `Node` です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `UNORDERED_NODE_SNAPSHOT_TYPE` または `ORDERED_NODE_SNAPSHOT_TYPE` でない場合、 `XPathException` による例外が `TYPE_ERR` 型で発生します。

例
-

以下の例は `snapshotItem()` メソッドの使用例を表しています。

### HTML


```html
<div>XPath example</div>
<div>Tag names of the matched nodes: <output></output></div>
```

### JavaScript


```js
const xpath = "//div";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
  null,
);
let node = null;
const tagNames = [];
for (let i = 0; i < result.snapshotLength; i++) {
  node = result.snapshotItem(i);
  tagNames.push(node.localName);
}
document.querySelector("output").textContent = tagNames.join(", ");
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-snapshotitem-index-index |

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

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

**`resultType`** は `XPathResult` インターフェイスの読み取り専用プロパティで、定義した結果の型を型定数で表します。

**注:** この機能は Web Worker 内で利用可能です

値
-

結果の型を表す整数で、型定数で定義されたものです。

定数
--

| 結果の定義済みの型定数 | 値 | 説明 |
| --- | --- | --- |
| `ANY_TYPE` | `0` | 式を評価した結果として自然に得られる型を格納した結果集合です。結果がノード集合の場合、 `UNORDERED_NODE_ITERATOR_TYPE` が常に結果として得られる型であることに注意してください。 |
| `NUMBER_TYPE` | `1` | 単一の数値を格納した結果です。この例は、例えば `count()` 関数を使用した XPath 式の中で有益です。 |
| `STRING_TYPE` | `2` | 単一の文字列を格納した結果です。 |
| `BOOLEAN_TYPE` | `3` | 1 つの論理値を格納した結果です。これは例えば、`not()`関数を使用した XPath 式の中で有益なものです。 |
| `UNORDERED_NODE_ITERATOR_TYPE` | `4` | 式に一致するすべてのノードを格納した結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_ITERATOR_TYPE` | `5` | 式に一致するすべてのノードを格納した結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `UNORDERED_NODE_SNAPSHOT_TYPE` | `6` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_SNAPSHOT_TYPE` | `7` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `ANY_UNORDERED_NODE_TYPE` | `8` | 式に一致する単一のノードを格納した結果ノード集合です。このノードは、必ずしも文書内の式に一致する最初のノードであるとは限りません。 |
| `FIRST_ORDERED_NODE_TYPE` | `9` | 式に一致する文書内の最初のノードを格納した結果ノード集合です。 |

例
-

次の例では `resultType` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Is XPath result a node set: <output></output></div>
```

### JavaScript


```js
const xpath = "//div";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
document.querySelector("output").textContent =
  result.resultType >= XPathResult.UNORDERED\_NODE\_ITERATOR\_TYPE &&
  result.resultType <= XPathResult.FIRST\_ORDERED\_NODE\_TYPE;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-resulttype |

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

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

**`singleNodeValue`** は `XPathResult` インターフェイスの読み取り専用プロパティで、 `Node` 値を返すか、`XPathResult.resultType` が `ANY_UNORDERED_NODE_TYPE` または `FIRST_ORDERED_NODE_TYPE` である結果のノードが一致しなかった場合は `null` を返します。

値
-

返値は `Document.evaluate()` が返す `XPathResult` の `Node` 値です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `ANY_UNORDERED_NODE_TYPE` または `FIRST_ORDERED_NODE_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `singleNodeValue` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<div>
  Tag name of the element having the text content 'XPath example':
  <output></output>
</div>
```

### JavaScript


```js
const xpath = "//\*[text()='XPath example']";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.FIRST\_ORDERED\_NODE\_TYPE,
  null,
);
document.querySelector("output").textContent = result.singleNodeValue.localName;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-singlenodevalue |

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

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

**`stringValue`** は `XPathResult` インターフェイスの読み取り専用プロパティで、 `XPathResult.resultType` が `STRING_TYPE` である結果の文字列値を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

返値は `Document.evaluate()` が返す `XPathResult` の文字列値です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `STRING_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `stringValue` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Text content of the &lt;div&gt; above: <output></output></div>
```

### JavaScript


```js
const xpath = "//div/text()";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.STRING\_TYPE,
  null,
);
document.querySelector("output").textContent = result.stringValue;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-stringvalue |

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

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

**`iterateNext()`** は `XPathResult` インターフェイスのメソッドで、ノード集合の結果を反復処理し、そこから次のノードを返すか、まだノードがない場合は `null` を返します。

構文
--


```js
iterateNext()
```

### 引数

なし。

### 返値

`XPathResult` ノード集合の中の次の `Node` です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `UNORDERED_NODE_ITERATOR_TYPE` または `ORDERED_NODE_ITERATOR_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

#### INVALID\_STATE\_ERR

結果を返してから文書が変更された場合、 `INVALID_STATE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `iterateNext()` メソッドを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Tag names of the matched nodes: <output></output></div>
```

### JavaScript


```js
const xpath = "//div";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
let node = null;
const tagNames = [];
while ((node = result.iterateNext())) {
  tagNames.push(node.localName);
}
document.querySelector("output").textContent = tagNames.join(", ");
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-iteratenext |

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

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

**`snapshotLength`** は `XPathResult` インターフェイスの読み取り専用プロパティで、結果スナップショットのノード数を表します。

**注:** この機能は Web Worker 内で利用可能です

値
-

結果スナップショットのノード数を表す整数値です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `UNORDERED_NODE_SNAPSHOT_TYPE` または `ORDERED_NODE_SNAPSHOT_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `snapshotLength` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Number of matched nodes: <output></output></div>
```

### JavaScript


```js
const xpath = "//div";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
  null,
);
document.querySelector("output").textContent = result.snapshotLength;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-snapshotlength |

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

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

**`numberValue`** は `XPathResult` インターフェイスの読み取り専用プロパティで、 `XPathResult.resultType` が `NUMBER_TYPE` である結果の数値を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

返値は `Document.evaluate()` が返す `XPathResult` の数値です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `NUMBER_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `numberValue` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Number of &lt;div&gt;s: <output></output></div>
```

### JavaScript


```js
const xpath = "count(//div)";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.NUMBER\_TYPE,
  null,
);
document.querySelector("output").textContent = result.numberValue;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-numbervalue |

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

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

**`booleanValue`** は `XPathResult` インターフェイスのプロパティで、 `XPathResult.resultType` が `BOOLEAN_TYPE` である結果の論理値を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

返値は `Document.evaluate()` が返す `XPathResult` の論理値です。

### 例外

#### TYPE\_ERR

`XPathResult.resultType` が `BOOLEAN_TYPE` でない場合、 `TYPE_ERR` 型の `XPathException` が発生します。

例
-

次の例では `booleanValue` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<p>Text is 'XPath example': <output></output></p>
```

### JavaScript


```js
const xpath = "//div/text() = 'XPath example'";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.BOOLEAN\_TYPE,
  null,
);
document.querySelector("output").textContent = result.booleanValue;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-booleanvalue |

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

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

**`invalidIteratorState`** は `XPathResult` インターフェイスの読み取り専用プロパティで、イテレーターが不正な状態になったことを示します。 `XPathResult.resultType` が `UNORDERED_NODE_ITERATOR_TYPE` または `ORDERED_NODE_ITERATOR_TYPE` で、この結果を返してから文書が変更された場合は `true` です。

**注:** この機能は Web Worker 内で利用可能です

値
-

イテレーターが不正になったかどうかを示す論理値。

例
-

次の例では `invalidIteratorState` プロパティを使用しています。

### HTML


```html
<div>XPath example</div>
<p>Iterator state: <output></output></p>
```

### JavaScript


```js
const xpath = "//div";
const result = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
// Invalidates the iterator state
document.querySelector("div").remove();
document.querySelector("output").textContent = result.invalidIteratorState
  ? "invalid"
  : "valid";
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathresult-invaliditeratorstate |

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

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

**`HTMLInputElement.webkitdirectory`** はプロパティで、 `webkitdirectory` という HTML 属性の値を反映し、 `<input>` 要素によってユーザーがファイルの代わりにディレクトリーを選択できることを示します。ディレクトリーが選択された場合、ディレクトリーとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 `webkitEntries` を使用して受け取ることができます。

**メモ:** このプロパティは、Google Chrome 固有の API として元々存在していたため、仕様書では `webkitEntries` と呼ばれています。いつか改名される可能性があります。

値
-

論理型で、 `true` は `<input>` 要素がディレクトリーのみを選択することができることを、 `false` はファイルのみが選択できることを示します。

結果を理解する
-------

ユーザーが選択を行った後、 `files` の中のそれぞれの `File` オブジェクトは各自が `File.webkitRelativePath` プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリーの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。

* PhotoAlbums
    + Birthdays
        - Jamie's 1st birthday
            * PIC1000.jpg
            * PIC1004.jpg
            * PIC1044.jpg
        - Don's 40th birthday
            * PIC2343.jpg
            * PIC2344.jpg
            * PIC2355.jpg
            * PIC2356.jpg
    + Vacations
        - Mars
            * PIC5533.jpg
            * PIC5534.jpg
            * PIC5556.jpg
            * PIC5684.jpg
            * PIC5712.jpg

ユーザーが `PhotoAlbums` を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する `File` オブジェクトを含みます。 — しかし、ディレクトリーは含みません。 `PIC2343.jpg` の項目では `webkitRelativePath` が `PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg` となります。これによって `FileList` が平坦でも階層構造を知ることができます。

**メモ:** `webkitRelativePath` の挙動は *Chromium 72 より前*では異なります。詳しくはこのバグを参照してください。

例
-

この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 `change` イベントが発生すると、選択されたディレクトリー階層ないのすべてのファイルを含むリストが生成され、表示されます。

### HTML content


```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
```

### JavaScript content


```js
document.getElementById("filepicker").addEventListener(
  "change",
  (event) => {
    let output = document.getElementById("listing");
    for (const file of event.target.files) {
      let item = document.createElement("li");
      item.textContent = file.webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # dom-htmlinputelement-webkitdirectory |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* `HTMLInputElement.webkitEntries`
* `File.webkitRelativePath`
HTMLInputElement: files プロパティ
=============================

**`HTMLInputElement.files`** プロパティを通じて、`<input type="file">` 要素で選択された `FileList` にアクセスできます。

値
-

選択されているファイルがあれば、それをリストする `FileList` オブジェクトです。**`HTMLInputElement`** が `type="file"` でない場合は、`null` が返ります。

例
-

以下の例は、**`HTMLInputElement.files`** プロパティにアクセスして、ユーザーが選択したそれぞれのファイルの名前、更新日時、サイズ、種類を出力する方法を示します。

### HTML


```html
<input id="files" type="file" multiple />
```

### JavaScript

**`HTMLInputElement.files`** は、ファイルが選択されていなくても `FileList` を返すことに注意してください。
 この性質があるため、ファイルが選択されているかをチェックせずに `for...of` で走査しても安全です。


```js
const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // 空でも true となる

for (const file of fileInput.files) {
  console.log(file.name); // ファイル名を表示
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // 日付を表示
  console.log(
    file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
  );
  console.log(file.type); // MIME タイプを表示
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-input-files-dev |

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

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

関連情報
----

* `DataTransfer.files`
HTMLInputElement: stepUp() メソッド
===============================

**`HTMLInputElement.stepUp()`** メソッドは、数値型の `<input>` 要素の値を
 `step` 属性の値、または step 属性が明示的に設定されていない場合は既定の `step` の値だけ増加させるものです。このメソッドを呼び出すと、 `value` は (`step` \* n) だけ減少します。ここで、n は指定されなかった場合、既定で `1` となり、`step` が指定されなかった場合、 `step` の既定値となります。


| 入力型 | 既定の step の値 | step の宣言の例 |
| --- | --- | --- |
| date | `1` （日） | 7 日（1 週間）単位の増加:`<input type="date" min="2019-12-25" step="7">` |
| month | `1` （ヶ月） | 12 ヶ月（1 年）単位の増加:`<input type="month" min="2019-12" step="12">` |
| week | `1` （週間） | 2 週間単位の増加:`<input type="week" min="2019-W23" step="2">` |
| time | `60` （秒） | 900 秒（15 分）単位の増加:`<input type="time" min="09:00" step="900">` |
| datetime-local | `1` （日） | 同じ曜日:`<input type="datetime-local" min="019-12-25T19:30"
step="7">` |
| number | `1` | 0.1 刻み`<input type="number" min="0" step="0.1" max="10">` |
| range | `1` | 2 ずつ増加:`<input type="range" min="0" step="2" max="10">` |

このメソッドを呼び出すと、フォームコントロール内で設定された制約の範囲内で、 `step` 属性で指定された値に引数を掛けた値だけ、フォームコントロールの値を変更します。引数が渡されなかった場合の既定値は `1` です。このメソッドは、値が `max` を上回ったり、 `step` 属性が設定する制約に違反させるようなことはしません。

`stepUp()` メソッドを呼び出す前の値が無効であった場合、例えば `step` 属性で設定した制約に適合しない場合、 `stepUp()` メソッドを呼び出すと、フォームコントロールの制約に適合する値が返されます。

フォームコントロールが時刻、日付、数値以外のもので、 `step` 属性に対応していない場合（前述の表に対応する入力型のリストを参照）、または `step` 値が `any` に設定されている場合、 `InvalidStateError` 例外が発生します。

構文
--


```js
stepUp()
stepUp(stepIncrement)
```

### 引数

`stepIncrement` 省略可

数値です。引数が渡されなかった場合、 `stepIncrement` は既定で `1` になります。

### 返値

なし (`undefined`)。

例
-

この例のボタンをクリックすると、 number 入力型の値が増加します。

### HTML


```html
<p>
  <label for="theNumber">
    0 から 400 までの 5 で割り切れる数を入力してください。
  </label>
  <input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
  <label>増加させたい段階の数を入力するか、空欄のままにしてください。</label>
  <input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />
```

### Java10Script


```js
/\* 関数を呼び出すボタンを生成 \*/
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
  stepOnUp();
});

function stepOnUp() {
  let input = document.getElementById("theNumber");
  let val = document.getElementById("incrementInput").value;

  if (val) {
    /\* 引数付きで加算 \*/
    input.stepUp(val);
  } else {
    /\* 引数なしで加算。 0 を試してください。 \*/
    input.stepUp();
  }
}
```

### CSS


```css
input:invalid {
  border: red solid 3px;
}
```

### 結果

`stepUp` メソッドに引数を渡さなかった場合、既定値は `1` になります。他の値は `step` 属性の値に乗算されるので、この場合は `5` となります。 *`stepIncrement`* に 4 を渡した場合、 `stepUp` は `4 * 5` すなわち `20` だけ行われます。この引数が `0` であった場合、数値は加算されません。 `stepUp` メソッドは入力が範囲外にならないように、この場合は `400` になった時点で停止し、引数として渡された値の小数点以下を切り捨てます。

段階の加算係数を `1.2` に設定してみてください。メソッドを呼び出すとどうなるでしょうか？

値を不正な数値である `4` に設定してみてください。メソッドを呼び出すとどうなるでしょうか？

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-input-stepup-dev |

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

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

関連情報
----

* `<input>`
* `HTMLInputElement`
* `HTMLInputElement.stepDown`
* `step`,
 `min`, `max` 属性