recursal/MDN huggingface dataset:
Element: lostpointercapture イベント
================================

**`lostpointercapture`** イベントは、キャプチャされたポインターが解放されたときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例
-

この例は要素で `lostpointercapture` イベントを待ち受けし、その要素の `pointerdown` でポインターをキャプチャします。その後でユーザーがポインターを開放すると、 `lostpointercapture` が発生します。


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

para.addEventListener("lostpointercapture", () => {
  console.log("I've been released!");
});

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});
```


同じ例ですが、 `onlostpointercapture` イベントハンドラーを使用して行います。


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

para.onlostpointercapture = () => {
  console.log("I've been released!");
};

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-lostpointercapture-event |
| Pointer Events # dom-globaleventhandlers-onlostpointercapture |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element: ariaHidden プロパティ
=========================

**`ariaHidden`** は `Element` インターフェイスのプロパティで、`aria-hidden` (en-US) 属性の値を反映し、要素がアクセシビリティ API に公開されているかどうかを示します。

値
-

以下のいずれかの値を持つ文字列です。

`"true"`

この要素はアクセシビリティ API から隠されています。

`"false"`

要素は、あたかもレンダリングされたかのようにアクセシビリティ API に公開されます。

`undefined`

要素の非表示状態は、それがレンダリングされているかどうかに基づいてユーザーエージェントによって決定されます。

例
-

この例では、ID が `hidden` の要素の `aria-hidden` (en-US) 属性は "true" に設定されています。`ariaHidden` を使用して値を "false" に更新します。


```html
<div id="hidden" aria-hidden="true">Some things are better left unsaid.</div>
```



```js
let el = document.getElementById("hidden");
console.log(el.ariaHidden); // true
el.ariaHidden = "false";
console.log(el.ariaHidden); // false
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariahidden |

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

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

**`securitypolicyviolation`** イベントは、コンテンツセキュリティポリシーに違反したときに発生します。

 イベントはポリシーに違反した要素で発行され、バブリングします。
 通常は `Window` または `Document` オブジェクトのイベントハンドラーによって処理されます。

ハンドラーは `onsecuritypolicyviolation` プロパティを使用するか、`EventTarget.addEventListener()` を使用して割り当てることができます。

**メモ:** このイベントのハンドラーは最上位のオブジェクト（`Window` や `Document` など）に追加する必要があります。
 HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにイベントハンドラーを割り当てることはできません。


構文
--

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


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

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

イベント型
-----

`SecurityPolicyViolationEvent` (en-US) です。`Event` から継承しています。

Event

SecurityPolicyViolationEvent

(en-US)例
-

下記コードは `onsecuritypolicyviolation` グローバルイベントハンドラープロパティ、または `addEventListener()` を使用して、イベントハンドラー関数を最上位の `Window` に追加する方法を示しています（`Document` でも全く同じ手法を使用することができます）。


```js
window.onsecuritypolicyviolation = (e) => {
  // Handle SecurityPolicyViolationEvent e here
};

window.addEventListener("securitypolicyviolation", (e) => {
  // Handle SecurityPolicyViolationEvent e here
});
```

仕様書
---

| Specification |
| --- |
| Content Security Policy Level 3 # eventdef-globaleventhandlers-securitypolicyviolation |
| HTML Standard # handler-onsecuritypolicyviolation |

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

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

関連情報
----

* HTTP > コンテンツセキュリティポリシー
Element: pointerleave イベント
==========================

`pointerleave` イベントは、ポインティングデバイスが要素のヒットテスト領域を出たときに発生します。ペンデバイスでは、このイベントはデジタイザーが検出可能なホバー範囲をスタイラスが離れたときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例
-

`addEventListener()` を使用した例です。


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

para.addEventListener("pointerleave", (event) => {
  console.log("Pointer left element");
});
```


`onpointerleave` イベントハンドラープロパティを使用した例です。


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

para.onpointerleave = (event) => {
  console.log("Pointer left element");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerleave-event |
| Pointer Events # dom-globaleventhandlers-onpointerleave |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
Element: ariaAtomic プロパティ
=========================

**`ariaAtomic`** は `Element` インターフェイスのプロパティで、`aria-atomic` 属性の値を反映します。これは、`aria-relevant` (en-US) 属性によって定義された変更通知に基づいて、支援技術が変更された領域をすべて表示するか、部分的に表示するかを示します。

値
-

文字列で、以下の値のいずれかです。

`"false"`

支援技術は、変更されたノードだけを表示します。

`"true"`

支援技術は、変更された領域全体を、作者が定義したラベルが存在する場合はそれを含め、全体として表示します。

例
-

この例では、ID が `"clock"` の要素の `aria-atomic` 属性は "true" に設定されています。`ariaAtomic` を使用して値を "false" に更新します。


```html
<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
```



```js
let el = document.getElementById("clock");
console.log(el.ariaAtomic); // true
el.ariaAtomic = "false";
console.log(el.ariaAtomic); // false
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaatomic |

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

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

**`pointercancel`** イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または `pointerdown` イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。

`pointercancel` イベントが発生する状況の例をいくつか示します。

* ポインターの操作を中止するハードウェアイベントが発生した場合。例えば、アプリケーション切り替えインターフェイスやモバイル端末の「ホーム」ボタンを使用して、ユーザーがアプリケーションを切り替えた場合などです。
* ポインターが活動中に端末の画面の向きが変化した場合。
* ユーザーが突然、ポインターの入力を始めたとブラウザーが判断した場合。これが発生するのは、例えば、スタイラスを使用中に画面上で手が反応するのを防ぐために掌を除外して予期せずイベントを起動することを防ぐことに、ハードウェアが対応している場合などです。
* CSS の `touch-action` プロパティが、入力の継続を防止している場合。

**メモ:** `pointercancel` イベントの発生後、ブラウザーは `pointerout` イベントと、続いて `pointerleave` イベントを送信します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例
-

`addEventListener()` を使用した例です。


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

para.addEventListener("pointercancel", (event) => {
  console.log("Pointer event cancelled");
});
```


`onpointercancel` イベントハンドラープロパティを使用した例です。


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

para.onpointercancel = (event) => {
  console.log("Pointer event cancelled");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointercancel-event |
| Pointer Events # dom-globaleventhandlers-onpointercancel |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointerout`
    + `pointerleave`
Element: remove() メソッド
======================

**`Element.remove()`** は DOM から要素を削除します。

構文
--


```js
remove()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### `remove()` の使用


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<div id="div-03">Here is div-03</div>
```



```js
const element = document.getElementById("div-02");
element.remove(); // 'div-02' の id を持った div を削除
```

### `Element.remove()` はスコープ化に非対応

`remove()` メソッドは `with` 文によるスコープ化に対応していません。 詳細は `Symbol.unscopables` を参照してください。


```js
with (node) {
  remove();
}
// ReferenceError: remove is not defined
```

仕様書
---

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

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

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

関連情報
----

* ポリフィル
Element: ariaSetSize プロパティ
==========================

**`ariaSetSize`** は `Element` インターフェイスのプロパティで、リスト項目またはツリー項目の現在の設定にある項目の数を定義する `aria-setsize` (en-US) 属性の値を反映します。

値
-

整数の入った文字列です。

例
-

この例では、ID が `tab-id` である要素の `aria-setsize` 属性を "3" に設定し、機器にグループ内に現在 3 つのタブがあることを通知しています。`ariaSetSize` を使用して、値を "4" に更新します。


```html
<button
 role="tab"
 aria-selected="true"
 aria-setsize="3"
 aria-controls="tabpanel-id"
 id="tab-id">
  Tab label
</button>
```



```js
let el = document.getElementById("tab-id");
console.log(el.ariaSetSize); // 3
el.ariaSetSize = "4";
console.log(el.ariaSetSize); // 4
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariasetsize |

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

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

関連情報
----

* ARIA: tab ロール
Element: mouseup イベント
=====================

**`mouseup`** イベントは、ポインターが要素の中にあるときに、ポインティングデバイス (マウスやトラックパッドなど) のボタンが離されるとその要素 (`Element`) に発行されます。

`mouseup` イベントは `mousedown` イベントに対応します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

*親である `UIEvent` および `Event` から継承したプロパティもあります*。

`MouseEvent.altKey` 読取専用 

このマウスイベントが発行されたときに `alt` キーが押されていた場合は `true` を返します。

`MouseEvent.button` 読取専用 

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

`MouseEvent.buttons` 読取専用 

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

`MouseEvent.clientX` 読取専用 

ビューポート座標におけるマウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ビューポート座標におけるマウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用 

このマウスイベントが発行されたときに `control` キーが押されていた場合は `true` を返します。

`MouseEvent.layerX` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の水平座標を返します。

`MouseEvent.layerY` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

`MouseEvent.metaKey` 読取専用 

このマウスイベントが発行されたときに `meta` キーが押されていた場合は `true` を返します。

`MouseEvent.movementX` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの X 座標です。

`MouseEvent.movementY` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの Y 座標です。

`MouseEvent.offsetX` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

`MouseEvent.offsetY` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

`MouseEvent.pageX` 読取専用 

文書全体からの相対的なマウスポインターの X 座標です。

`MouseEvent.pageY` 読取専用 

文書全体からの相対的なマウスポインターの Y 座標です。

`MouseEvent.relatedTarget` 読取専用 

もしあれば、イベントの副ターゲットです。

`MouseEvent.screenX` 読取専用 

スクリーン座標におけるマウスポインターの X 座標です。

`MouseEvent.screenY` 読取専用 

スクリーン座標におけるマウスポインターの Y 座標です。

`MouseEvent.shiftKey` 読取専用 

このマウスイベントが発行されたときに `shift` キーが押されていた場合は `true` を返します。

`MouseEvent.mozInputSource` 
Non-standard
 読取専用 

 イベントを発生させた機器の種類（`MOZ_SOURCE_*` 定数のいずれか）。
 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。


`MouseEvent.webkitForce` 
Non-standard
 読取専用 

クリックしたときに適用された圧力です。

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名です。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名です。

例
-

サンプルコードは `mousemove` イベントを参照してください。

仕様書
---

| Specification |
| --- |
| UI Events # event-type-mouseup |
| HTML Standard # handler-onmouseup |

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

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

関連情報
----

* イベントの紹介
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`
Element: scrollIntoViewIfNeeded() メソッド
======================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`Element.scrollIntoViewIfNeeded()`** メソッドは、現在の要素がまだブラウザーウィンドウの可視領域内にない場合、ブラウザーウィンドウの可視領域内にスクロールします。要素がすでにブラウザーウィンドウの可視領域内にある場合、スクロールは行われません。このメソッドは標準の `Element.scrollIntoView()` メソッドの独自のバリエーションです。

構文
--


```js
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(centerIfNeeded)
```

### 引数

`centerIfNeeded` 省略可

オプションの論理値で、既定値は `true` です。

* `true` の場合、要素はスクロール可能な祖先の可視領域の中央に配置されます。
* `false` の場合、要素はスクロール可能な祖先の可視領域の最も近い端に揃えられます。可視領域のどの辺が要素に最も近いかに応じて、要素の上端が可視領域の上端に揃えられるか、要素の下端が可視領域の下端に揃えられます。

### 返値

なし (`undefined`)。

例
-


```js
const element = document.getElementById("my-el");

element.scrollIntoViewIfNeeded(); // 可視領域の中央に要素を移動
element.scrollIntoViewIfNeeded(false); // 要素を可視領域の最も近い辺に揃える
```

仕様書
---

どの仕様にも含まれていません。これは WebKit 独自のメソッドです。

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

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

関連情報
----

* W3C CSSOM bug 17152: Support centering an element when scrolling into view. （同等の標準化された `scrollIntoViewIfNeeded` の機能リクエスト）
Element: computedStyleMap() メソッド
================================

**`computedStyleMap()`** は `Element` インターフェイスのメソッドであり、`StylePropertyMapReadOnly` インターフェイスで `CSSStyleDeclaration` の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。

構文
--


```js
computedStyleMap()
```

### 引数

なし。

### 返値

`StylePropertyMapReadOnly` インターフェイスです。

例
-

まず、簡単な HTML から始めましょう。リンクのある段落と、すべての CSS プロパティと値の組を追加する定義リストです。


```html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
```


いくらか CSS を追加します。


```css
a {
  --color: red;
  color: var(--color);
}
```


JavaScript を追加してリンクを取得し、 `computedStyleMap()` を使用してすべての CSS プロパティ値の定義リストを返します。


```js
// 要素を取得
const myElement = document.querySelector("a");

// 入力する <dl> を取得
const stylesList = document.querySelector("#regurgitation");

// すべての計算済みスタイルを computedStyleMap() で受け取る
const allComputedStyles = myElement.computedStyleMap();

// すべてのプロパティと値のマップを反復処理し、それぞれに <dt> と <dd> を追加します。
for (const [prop, val] of allComputedStyles) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(prop));
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(val));
  stylesList.appendChild(cssValue);
}
```


`computedStyleMap()` に対応しているブラウザーでは、すべての CSS プロパティと値のリストが表示されます。
 他のブラウザーでは、リンクが表示されるだけです。

リンクが持つ既定の CSS プロパティがいくつもあることに気づきましたか？ '`a`' を '`p`' に更新すると、`margin-top` と `margin-bottom` の既定の計算値の違いに気が付くでしょう。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-element-computedstylemap |

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

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

**`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。

このイベントの既定の動作は、（もしあれば）選択範囲をクリップボードへコピーすることです。

このイベントのハンドラーは、 `setData(format, data)` をイベントの `ClipboardEvent.clipboardData` プロパティに対して呼び出すことで、クリップボードの内容を*変更*したり、 `event.preventDefault()` を使用してイベントの既定の動作を取り消したりすることができます。

ただし、ハンドラーがクリップボードのデータを*読み取る*ことはできません。

合成した `copy` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

構文
--

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


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

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

イベント型
-----

`ClipboardEvent` です。 `Event` から継承しています。

Event

ClipboardEvent例
-

### ライブデモ

#### HTML


```html
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```


#### JavaScript


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

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});
```


#### 結果

仕様書
---

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

関連情報
----

* 関連イベント: `cut`, `paste`
* `Document` を対象としたこのイベント: `copy`
* `Window` を対象としたこのイベント: `copy`
Element: firstElementChild プロパティ
================================

**`Element.firstElementChild`** は読み取り専用のプロパティで、要素の最初の子を `Element` で返します。子要素がない場合は `null` を返します。

`Element.firstElementChild` は要素ノードのみを含みます。
 テキストやコメントノードなど、要素以外のノードを含むすべての子ノードを取得するには、 `Node.firstChild` を使用してください。

値
-

`Element` オブジェクト、または `null` です。

例
-


```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.firstElementChild.textContent);
 // logs "First (1)"
</script>
```

仕様書
---

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

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

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

関連情報
----

* `Element.nextElementSibling`
* `Element.lastElementChild`
Element: ariaDescription プロパティ
==============================

**`ariaDescription`** は `Element` インターフェイスのプロパティで、`aria-description` (en-US) 属性の値を反映し、この属性は、現在の要素を記述したり、注釈を付けたりする文字列値を定義します。

値
-

文字列です。

例
-

この例では、ID が `close-button` の要素の `aria-description` 属性に文字列 "A longer description of the function of this element" が設定されています。`ariaDescription` を用いて値を更新することができます。


```html
<button
 aria-label="Close"
 aria-description="A longer description of the function of this element"
 id="close-button">
  X
</button>
```



```js
let el = document.getElementById("close-button");
console.log(el.ariaDescription); // "A longer description of the function of this element"
el.ariaDescription = "A different description";
console.log(el.ariaDescription); // "A different description"
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariadescription |

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

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

**`ariaAutoComplete`** は `Element` インターフェイスのプロパティで、`aria-autocomplete` 属性の値を反映します。この属性は、テキストを入力することで、コンボボックス、検索ボックス、テキストボックスに対して、ユーザーの意図する値の 1 つ以上の予測を表示させることができるかどうかを示し、予測が発生した場合にどのように表示するかを指定します。

値
-

以下のいずれかの値を持つ文字列です。

`"inline"`

ユーザーが入力を行っているとき、指定された入力を補完するための 1 つの方法を提案するテキストが、キャレットの後に動的に挿入されることがあります。

`"list"`

ユーザーが入力を提供している場合、指定された入力を補完する可能性のある値の集合を含む要素が表示されることがあります。

`"both"`

ユーザーが入力を提供している場合、指定された入力を補完する可能性のある値の集合を含む要素が表示されることがあります。表示された場合、集合の中の 1 つの値が自動的に選択され、自動的に選択された値を補完するために必要なテキストが入力のキャレットの後に現れます。

`"none"`

ユーザーが入力を行っているとき、ユーザーがどのように入力を補完しようとしているかを意図する自動提案の表示を行いません。

例
-

この例では、IDが `animal` の要素の `aria-autocomplete` 属性は "`inline`" に設定されています。これは `listbox` ポップアップを呼び出すコンボボックスに期待される値です。


```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="inline"
 aria-controls="animals-listbox"
 aria-expanded="false"
 aria-haspopup="listbox" />
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>
```



```js
let el = document.getElementById("animal");
console.log(el.ariaAutoComplete); // inline
el.ariaAutoComplete = "list";
console.log(el.ariaAutoComplete); // list
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaautocomplete |

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

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

**`hasPointerCapture()`** は `Element` インターフェイスのメソッドで、それを呼び出した要素が、指定されたポインター ID によって識別されるポインターに対するポインターキャプチャを持つかどうかを示します。

構文
--


```js
hasPointerCapture(pointerId)
```

### 引数

`pointerId`

`PointerEvent` オブジェクトの `pointerId`。

### 返値

論理値です。要素がポインターキャプチャを持っている場合は `true`、持っていない場合は `false` です。

例
-


```html
<html lang="ja">
  <script>
 function downHandler(ev) {
 const el = document.getElementById("target");
 // 要素 'target' はそれ以上のイベントを受信/キャプチャします
 el.setPointerCapture(ev.pointerId);

 // …

 // 要素にまだポインタキャプチャがあるかどうかを確認します
 let pointerCap = el.hasPointerCapture(ev.pointerId);
 if (pointerCap) {
 // まだポインタキャプチャがあります
 } else {
 // おっと、ポインタキャプチャを失いました！
 }
 }

 function init() {
 const el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">この要素をポインタでタッチします。</div>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-element-haspointercapture |

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

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

関連情報
----

* `Element.setPointerCapture()`
* `Element.releasePointerCapture()`
* `Pointer Events`