Element: slot プロパティ - Web API

Element: slot プロパティ
===================

**`slot`** は `Element` インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。

スロットはウェブコンポーネント内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、テンプレートとスロットの使用をご覧ください）。

値
-

文字列です。

例
-

simple-template の例 (ライブで見る) では、`<my-paragraph>` という些細なカスタム要素の例を作りました。この要素にはシャドウルートが取り付けられ、次に `my-text` というスロットを含むテンプレートの内容を使って入力されるようになっています。

文書内で `<my-paragraph>` が使用されると、スロットは `my-text` という値を持つ `slot` 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。

```html
<my-paragraph>
  <span slot="my-text">別なテキストにしましょう。</span>
</my-paragraph>
```

JavaScript ファイルで `<span>` への参照を取得すると、対応する `<slot>` の名前が取得できます。

```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // 'my-text' と表示
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-slot① |

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

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


Element: children プロパティ - Web API

Element: children プロパティ
=======================

**`children`** は読み取り専用のプロパティで、生きた `HTMLCollection` で呼び出された要素の子要素をすべて返します。

`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 `Node.childNodes` を使用してください。

値
-

生きた `HTMLCollection` で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの `item()` メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。

例
-

```js
const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}
```

仕様書
---

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

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

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

関連情報
----

* `Node.childNodes`


Element: localName プロパティ - Web API

Element: localName プロパティ
========================

**`Element.localName`** は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。

返値
--

文字列で、要素の修飾名の、ローカル部分を示します。

例
-

（`text/xml` や `application/xhtml+xml` のような、XML のコンテンツタイプで送出される必要があります。）

```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 const text = document.getElementById('text');
 const circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

メモ
--

ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、`ecomm:partners` という修飾名において、 `partners` はローカル名、`ecomm` は接頭辞です。

```xml
<ecomm:business id="soda\_shop" type="brick\_n\_mortar" xmlns:ecomm="http://example.com/ecomm">
  <ecomm:partners>
    <ecomm:partner id="1001">Tony's Syrup Warehouse
    </ecomm:partner>
  </ecomm:partner>
</ecomm:business>
```

**メモ:** このプロパティは内部 DOM ストレージの大文字小文字を忠実に返しますが、`tagName` プロパティは HTML DOM における HTML 要素でを大文字で返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-localname① |

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

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

関連情報
----

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName`


Element: beforexrselect イベント - Web API

Element: beforexrselect イベント
============================

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

**`beforexrselect`** イベントは、WebXR の選択イベント (`select` (en-US), `selectstart` (en-US), `selectend` (en-US)) が配信される前に発行されます。ユーザーが DOM オーバーレイ UI を走査する間、XR ワールド入力イベントを抑制するために使用することができます。

このイベントはバブリングし、キャンセル可能で、合成されます。

構文
--

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

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

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

イベント型
-----

`XRSessionEvent` (en-US) です。`Event` から継承されています。

Event

XRSessionEvent

(en-US)イベントプロパティ
---------

`session` (en-US) 読取専用

イベントが参照する `XRSession` (en-US) です。

イベントの可用性
--------

**`beforexrselect`** イベントはグローバルイベントであり、以下のインターフェイスで利用できます。

* `Window`
* `Document`
* `HTMLElement`
* `SVGElement`
* `MathMLElement` (en-US)
例
-

WebXR の選択イベント (`select` (en-US), `selectstart` (en-US), `selectend` (en-US)) を抑制するために、アプリケーションは `beforexrselect` イベントを待ち受けすることができます。このイベントはバブリングするので、`preventDefault()` を DOM オーバーレイ要素で呼び出すと、このコンテナー内の WebXR select イベントが DOM 要素と対話するのを防ぎ、XR の世界への重複したイベント入力を避けることができます。

```js
document
  .getElementById("xr-overlay")
  .addEventListener("beforexrselect", (ev) => ev.preventDefault());
```

仕様書
---

| Specification |
| --- |
| WebXR DOM Overlays Module # onbeforexrselect |

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

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

関連情報
----

* `select` (en-US) イベント
* `selectstart` (en-US) イベント
* `selectend` (en-US) イベント


Element: ariaModal プロパティ - Web API

Element: ariaModal プロパティ
========================

**`ariaModal`** は `Element` インターフェイスのプロパティで、要素が表示される際にモーダルであるかどうかを示す `aria-modal` 属性の値を反映します。`aria-modal` プロパティを `role="dialog"` の要素に適用すると、ダイアログ外のコンテンツが不活性であることを支援技術に知らせるために、背景で aria-hidden を使用する技術に置き換わります。

値
-

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

`"true"`

この要素はモーダルです。

`"false"`

この要素はモーダルではありません。

例
-

この例では、ID が `address-modal` の要素の `aria-modal` 属性は "true" に設定されており、モーダルダイアログであることを示しています。`ariaModal` を使用して、値を "false" に更新します。

```html
<div
 role="dialog"
 id="address-modal"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc"
 aria-modal="true"></div>
```

```js
let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"
```

仕様書
---

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

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

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

関連情報
----

* ARIA: dialog ロール


Element: scrollBy() メソッド - Web API

Element: scrollBy() メソッド
========================

**`scrollBy()`** は `Element` インターフェイスのメソッドで、指定された量だけ要素をスクロールします。

構文
--

```js
scrollBy(x-coord, y-coord)
scrollBy(options)
```

### 引数

* `x-coord` は、スクロールしたい水平ピクセル数です。
* `y-coord` は、スクロールしたい垂直ピクセル数です。

- または -

`options`

以下の引数を持つ辞書です。

`top`

ウィンドウや要素をスクロールする Y 軸方向のピクセル数を指定します。

`left`

ウィンドウや要素をスクロールする X 軸方向のピクセル数を指定します。

`behavior`

スクロールを滑らかにアニメーションさせるか (`smooth`)、瞬時にジャンプさせるか (`instant`)、ブラウザーに選択させるか (`auto`, 既定値) を指定します。

### 返値

なし (`undefined`)。

例
-

```js
// 要素をスクロール
element.scrollBy(300, 300);
```

`options` を使用する場合:

```js
element.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollby |

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

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


Element: transitionstart イベント - Web API

Element: transitionstart イベント
=============================

**`transitionstart`** イベントは、 CSS トランジションが実際に始まったとき、すなわち `transition-delay` が終了した後に発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`TransitionEvent.propertyName` 読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

`TransitionEvent.elapsedTime` 読取専用

float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は `transition-delay` プロパティの影響を受けません。

`TransitionEvent.pseudoElement` 読取専用

文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。

例
-

このコードは `transitionstart` イベントのリスナーを追加します。

```js
element.addEventListener("transitionstart", () => {
  console.log("トランジション開始");
});
```

同じことを、`ontransitionstart` プロパティを `addEventListener()` の代わりに使用して行います。

```js
element.ontransitionstart = () => {
  console.log("トランジション開始");
};
```

### ライブ例

次の例では、単純な `<div>` 要素に遅延を含むトランジションをスタイル設定しています。

```html
<div class="transition">ここにポインターを当ててください</div>
<div class="message"></div>
```

```css
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}
```

これにいくらかの JavaScript を追加して、`transitionstart` および `transitionrun` イベントが発生すると実行されるようにします。

```js
const transition = document.querySelector(".transition");
const message = document.querySelector(".message");

transition.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun が発生";
});

transition.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart が発生";
});

transition.addEventListener("transitionend", () => {
  message.textContent = "transitionend が発生";
});
```

違いは次の通りです。

* `transitionrun` は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
* `transitionstart` は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。
仕様書
---

| Specification |
| --- |
| CSS Transitions # transitionstart |

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

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

関連情報
----

* `TransitionEvent` インターフェイス
* CSS プロパティ: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* 関連イベント: `transitionend`, `transitionrun`, `transitioncancel`


Element: clientWidth プロパティ - Web API

Element: clientWidth プロパティ
==========================

**`Element.clientWidth`** プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）垂直スクロールバーは含みません。

`clientWidth` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。これは `clientWidth` の特例です。

**メモ:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 `element.getBoundingClientRect()` を使用してください。

値
-

数値です。

例
-

![大きなパディング、境界、マージンを持つ要素の例。clientWidth は、パディングを含めるために、マージン、境界、および垂直スクロールバーを除いた要素内の幅です。](/ja/docs/Web/API/Element/clientWidth/dimensions-client.png)

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### メモ

`clientWidth` は MS IE DHTML オブジェクトモデルで最初に導入されたものです。

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

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

関連情報
----

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* 要素の寸法の決定


Element: closest() メソッド - Web API

Element: closest() メソッド
=======================

**`closest()`** は `Element` インターフェイスのメソッドで、この要素とその親に（文書ルートに向かって）、指定された CSS セレクターに一致するノードが見つかるまで探索します。

構文
--

```js
closest(selectors)
```

### 引数

`selectors`

有効な CSS セレクターを表す文字列です。これをこの要素 (`Element`) およびその祖先に向けて照合します。

### 返値

`selectors` に一致する最も近い祖先の `Element` または自分自身です。そのような要素がない場合は `null` を返します。

### 例外

`SyntaxError` `DOMException`

`selectors` が有効なセレクターリストの文字列ではない場合に発生します。

例
-

### HTML

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

### JavaScript

```js
const el = document.getElementById("div-03");

// "div-02" の id を持つ直近の祖先
console.log(el.closest("#div-02")); // <div id="div-02">

// div の中にある div である直近の祖先
console.log(el.closest("div div")); // <div id="div-03">

// div であって親に article がある直近の祖先
console.log(el.closest("article > div")); // <div id="div-01">

// div ではない直近の祖先
console.log(el.closest(":not(div)")); // <article>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

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

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

### 互換性のメモ

* Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は `Document` オブジェクトに接続されていない場合、 `document.createElement(tagName).closest(tagName)` が `null` を返します。
関連情報
----

* CSS セレクターモジュール
* セレクターを取る他の `Element` のメソッド: `Element.querySelector()`, `Element.querySelectorAll()`, `Element.matches()`


Element: clientLeft プロパティ - Web API

Element: clientLeft プロパティ
=========================

要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。`clientLeft` は、左マージンまたは左パディングを含みません。`clientLeft` は読み取り専用です。

**メモ:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 `element.getBoundingClientRect()` を使用してください。

**メモ:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。

値
-

数値です。

例
-

次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。

### HTML

```html
<div id="container">
  <div id="contained">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
  </div>
</div>
```

### CSS

```css
#container {
  margin: 3rem;
  background-color: rgb(255, 255, 204);
  border: 4px dashed black;
}

#contained {
  margin: 1rem;
  border-left: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientleft |

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

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


Element: replaceWith() メソッド - Web API

Element: replaceWith() メソッド
===========================

**`Element.replaceWith()`** メソッドは、この `Element` を親の子リストの中で一連の `Node` オブジェクトまたは文字列に置換します。文字列は `Text` ノードと等価なノードとして挿入されます。

構文
--

```js
replaceWith(param1)
replaceWith(param1, param2)
replaceWith(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

一連の `Node` オブジェクトまたは文字列で置換します。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層の指定の位置にノードを挿入できなかったときに発生します。

例
-

### `replaceWith()` の使用

```js
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");

p.replaceWith(span);

console.log(div.outerHTML);
// "<div><span></span></div>"
```

### `replaceWith()` はスコープに非対応

`replaceWith()` メソッドは `with` 文でのスコープに対応していません。詳細は `Symbol.unscopables` をご覧ください。

```js
with (node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
```

仕様書
---

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

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

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

関連情報
----

* `Node.replaceChild()`
* `NodeList`


Element: ariaLabel プロパティ - Web API

Element: ariaLabel プロパティ
========================

**`ariaLabel`** は `Element` インターフェイスのプロパティで、`aria-label` (en-US) 属性の値を反映し、現在の要素にラベル付けする文字列値を定義します。

値
-

文字列または `null` です。

例
-

この例では、`close-button` という ID を持つ要素の `aria-label` (en-US) 属性には "Close" が設定されています。`ariaLabel` を使用して、値を "Close dialog" に更新します。

```html
<button aria-label="Close" id="close-button">X</button>
```

```js
let el = document.getElementById("close-button");
console.log(el.ariaLabel); // "Close"
el.ariaLabel = "Close dialog";
console.log(el.ariaLabel); // "Close dialog"
```

仕様書
---

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

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

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


Element: getBoundingClientRect() メソッド - Web API

Element: getBoundingClientRect() メソッド
=====================================

**`Element.getBoundingClientRect()`** メソッドは、要素の寸法と、そのビューポートに対する相対位置に関する情報を返します。

構文
--

```js
getBoundingClientRect()
```

### 引数

なし。

### 返値

返値は `DOMRect` オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。`width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。

![要素全体を格納する最小の長方形である DOMRect オブジェクト。](/ja/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png)

このメソッドが返す `DOMRect` オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし `box-sizing: border-box` が要素に設定されていれば、これは `width` または `height` と等しくなります。

返される値は、その要素に対して `getClientRects()` が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。

空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 `width` と `height` が 0 で、 `top` と `left` は、要素に対する（コンテンツ順での）最初の CSS ボックスの左上である矩形を返します。

境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に（その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界の辺 (`top`, `right`, `bottom`, `left`) が変更されることを意味しています。

もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する `top` と `left` プロパティに、現在のスクロール位置を加えるだけです（これらは `window.scrollY` と `window.scrollX` で取得できます）。

例
-

### 基本

この単純な例では、単純な `<div>` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。

```html
<div></div>
```

```css
div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
```

```js
let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
```

なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。

また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。

### スクロール

この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。

```html
<div id="example"></div>
<div id="controls"></div>
```

```css
div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}
```

```js
function update() {
  const container = document.getElementById("controls");
  const elem = document.getElementById("example");
  const rect = elem.getBoundingClientRect();

  container.innerHTML = "";
  for (const key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-getboundingclientrect |

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

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

関連情報
----

* `getClientRects()`
* MSDN: `getBoundingClientRect`
* MSDN: `ClientRect`、初期バージョンの `DOMRect`


Element: innerHTML プロパティ - Web API

Element: innerHTML プロパティ
========================

`Element` オブジェクトの **`innerHTML`** プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、`insertAdjacentHTML()` メソッドを使用してください。

値
-

要素の子孫を HTML にシリアライズしたものを含んだ文字列です。`innerHTML` に値を設定すると、要素のすべての子孫を削除して、*htmlString* の文字列で与えられた HTML を解釈して構築されたノードに置き換えます。

### 例外

`SyntaxError` `DOMException`

正しくない形の HTML の文字列を使用して `innerHTML` の値を設定しようとした場合に発生します。

`NoModificationAllowedError` `DOMException`

親が `Document` であるノードに HTML を挿入しようとした場合に発生します。

使用上のメモ
------

`innerHTML` プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。

### 要素の HTML コンテンツの読み取り

`innerHTML` を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。

```js
let contents = myElement.innerHTML;
```

これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。

**メモ:** 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

### 要素の中身の置き換え

`innerHTML` の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。

**メモ:** 挿入される文字列に悪意のある内容が含まれる可能性がある場合、セキュリティ上のリスクになります。
 ユーザーが提供したデータを挿入する場合は、 `Element.setHTML()` を使用するよう常に検討してください。こちらは挿入する前に無害化を行います。

例えば、文書の `body` 属性の内容を消去することで、文書の内容全体を消去することができます。

```js
document.body.innerHTML = "";
```

この例は文書の現在の HTML マークアップを走査し、 `"<"` の文字を HTML エンティティの `"<"` に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを `<pre>` で囲みます。そして、 `innerHTML` の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。

```js
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
 /</g,
 "<",
)}</pre>`;
```

#### 操作の詳細

`innerHTML` に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。

1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す `DocumentFragment` オブジェクトの中に結果が入れられます。
2. 中身を置き換えようとしている要素が `<template>` 要素である場合は、 `<template>` 要素の `content` 属性を、ステップ 1 で生成された新しい `DocumentFragment` で置き換えます。
3. その他の要素はすべて、要素の内容を新しい `DocumentFragment` のノードで置き換えます。
### HTML を要素に適用

`innerHTML` に値を設定すると、既存の要素の一つに新しい内容物を追加します。

例えば、新しいリスト項目 (`<li>`) を既存のリスト (`<ul>`) に追加することができます。

#### HTML

```html
<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>
```

#### JavaScript

```js
const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
```

 なお、`innerHTML` を使用して HTML 要素を追加すると（例えば `el.innerHTML += "<a href='…'>link</a>"`）、以前設定したイベントリスナーを取り除くことになります。
 つまり、この方法で HTML 要素を追加すると、以前設定したイベントリスナーで待ち受けすることができなくなります。

### セキュリティの考慮事項

ウェブページにテキストを挿入するために `innerHTML` を使用している例は珍しくありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。

```js
let name = "John";
// 'el' を HTML の DOM 要素と想定します
el.innerHTML = name; // この場合は無害

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // この場合は無害
```

これはクロスサイトスクリプティング攻撃のように見えますが、結果的には無害です。 HTML5 では `innerHTML` で挿入された `<script>` タグは実行するべきではないと定義しているからです。

しかし、次のように `<script>` を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために `innerHTML` を使用するたびに、セキュリティリスクは残ります。

```js
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // アラートが表示される
```

このため、 `innerHTML` を使用する代わりに次のようにしてください。

* `Element.setHTML()` で DOM に挿入する前にテキストを無害化する。
* プレーンテキストを挿入する際には、代わりに `Node.textContent` を使用する。これは渡されたコンテンツを HTML として解釈するのではなく、生のテキストとして挿入します。

**警告:** プロジェクトに対して何らかの形のセキュリティレビューが行われた場合、 `innerHTML` は多くの場合で、コードが拒絶される結果になります。
 例えば、ブラウザー拡張機能の中で `innerHTML` を使用した場合、拡張機能を addons.mozilla.org に提出すると、自動レビュープロセスを通過できないでしょう。
 代替方法については、ページへ外部コンテンツを安全に挿入する (en-US)を参照してください。

例
-

この例は `innerHTML` を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

### JavaScript

```js
function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const timeStr = time.toLocaleTimeString();
  logElem.innerHTML += `${timeStr}: ${msg}<br/>`;
}

log("Logging mouse events inside this container…");
```

`log()` 関数は `Date` オブジェクトから `toLocaleTimeString()` を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから `"log"` クラスのボックスにメッセージを追加します。

`MouseEvent` ベースのイベント (`mousedown`, `click`, `mouseenter` など) についての情報を記録する第二のメソッドを追加します。

```js
function logEvent(event) {
  const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
  log(msg);
}
```

それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。

```js
const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);
```

### HTML

この例の HTML はとても単純です。

```html
<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>
```

`"box"` クラスが付いた `<div>` は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。
 クラスが `"log"` である `<div>` は、ログテキスト自身のコンテナーです。

### CSS

以下の CSS が例の内容をスタイル付けします。

```css
.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}
```

### 結果

 結果の内容はこのように見えます。
 マウスを移動してボックスを出入りさせたり、中でクリックしたりすると、ログが出力されるのを見ることができます。

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-innerhtml-innerhtml |

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

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

関連情報
----

* `Node.textContent` および `HTMLElement.innerText`
* `Element.insertAdjacentHTML()`
* `Element.outerHTML`
* `Element.setHTML`
* HTML または XML を解釈して DOM ツリーへ: `DOMParser`
* DOM ツリーを XML 文字列へシリアライズ: `XMLSerializer`


Element: lostpointercapture イベント - Web API

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 プロパティ - Web API

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 イベント - Web API

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 イベント - Web API

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 プロパティ - Web API

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 イベント - Web API

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() メソッド - Web API

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 プロパティ - Web API

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: mouseout イベント - Web API

Element: mouseout イベント
======================

**`mouseout`** イベントは、ポインティングデバイス (通常はマウス) を使ってカーソルを移動させ、要素やその子の中からカーソルが出たときに、その要素 (`Element`) に発行されます。

`mouseout` は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

構文
--

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

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

onmouseout = (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` の別名です。

例
-

以下の例は `mouseout` イベントの使い方を示しています。

### mouseout と mouseleave

以下の例は、`mouseout` と `mouseleave` の各イベントの違いを説明しています。`mouseleave` イベントを `<ul>` に追加し、マウスが `<ul>` を出るたびにリストを紫色に着色するようにします。`mouseout` をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

これを試してみると、`mouseout` はそれぞれのリスト項目に配信されるのに対し、 `mouseleave` は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある `<ul>` を不明瞭にします。

#### HTML

```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

#### JavaScript

```js
const test = document.getElementById("test");

// マウスが <ul> を出るとリストを一時的に紫色にします
// ときに 1 度だけ実行されます
test.addEventListener(
  "mouseleave",
  (event) => {
    // mouseleave の対象を強調
    event.target.style.color = "purple";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);

// マウスが出ると <li> を一時的にオレンジ色にします
test.addEventListener(
  "mouseout",
  (event) => {
    // highlight the mouseout target
    event.target.style.color = "orange";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-mouseout |
| HTML Standard # handler-onmouseout |

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

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

関連情報
----

* イベントの紹介
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseenter`
* `mouseleave`
* `contextmenu`


Element: animationiteration イベント - Web API

Element: animationiteration イベント
================================

**`animationiteration`** イベントは、 CSS アニメーションの反復が 1 回分終了し、次の回が始まったときに発生します。このイベントは `animationend` イベントと同時には発生せず、従って `animation-iteration-count` が 1 のアニメーションでは発生しません。

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`AnimationEvent.animationName` 読取専用

アニメーションを生成した `animation-name` の値を含む文字列です。

`AnimationEvent.elapsedTime` 読取専用

`float` で、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。 `animationstart` イベントの場合、 `elapsedTime` は `0.0` です。ただし、`animation-delay` に負の値を指定した場合は、 `(-1 * delay)` を含む `elapsedTime` としてイベントが発行されます。

`AnimationEvent.pseudoElement` 読取専用

`'::'` で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 `''` となります。

例
-

このコードは `animationiteration` を使用して、アニメーションの反復が終了した回数を追跡します。

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

let iterationCount = 0;

animated.addEventListener("animationiteration", () => {
  iterationCount++;
  console.log(`アニメーション反復回数: ${iterationCount}`);
});
```

同様に、 `onanimationiteration` イベントハンドラープロパティを使用するとこうなります。

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

let iterationCount = 0;

animated.onanimationiteration = () => {
  iterationCount++;
  console.log(`アニメーション反復回数: ${iterationCount}`);
};
```

### ライブ例

#### HTML

```html
<div class="animation-example">
  <div class="container">
    <p class="animation">You chose a cold night to visit our planet.</p>
  </div>
  <button class="activate" type="button">アニメーションを有効化</button>
  <div class="event-log"></div>
</div>
```

#### CSS

```css
.container {
  height: 3rem;
}

.event-log {
  width: 25rem;
  height: 2rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}
```

#### JavaScript

```js
const animation = document.querySelector("p.animation");
const animationEventLog = document.querySelector(
  ".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
  ".animation-example>button.activate",
);
let iterationCount = 0;

animation.addEventListener("animationstart", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active
    ? "Cancel animation"
    : "Activate animation";
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationiteration |

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

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

関連情報
----

* CSS アニメーション
* CSS アニメーションの使用
* `AnimationEvent`
* 関連イベント: `animationstart`, `animationend`, `animationcancel`
* `Document` を対象としたこのイベント: `animationiteration`
* `Window` を対象としたこのイベント: `animationiteration`


Element: mouseup イベント - Web API

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() メソッド - Web API

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() メソッド - Web API

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 イベント - Web API

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 プロパティ - Web API

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 プロパティ - Web API

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 プロパティ - Web API

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() メソッド - Web API

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`


Element: keyup イベント - Web API

Element: keyup イベント
===================

**`keyup`** イベントは、キーが離されたときに発生します。

`keydown` と `keyup` イベントは、どのキーが押されたかを示すコードを提供し、 `keypress` はどの文字が入力されたかを示します。例えば、小文字の "a" は `keydown` と `keyup` では 65 と報告され、 `keypress` では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。

キーボードイベントは `<input>`, `<textarea>`, `<summary>` と `contentEditable` または `tabindex` 属性を持つものだけが生成します。

Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、 `keyup` および `keydown` イベントが IME 変換中に発行されるようになりました（Firefox バグ 354358）。変換操作中の `keyup` イベントをすべて無視するには、次のようにしてください （229 は、IME によって処理されたイベントに関連する `keyCode` に設定される特別な値です）。

```js
eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 何かを行う
});
```

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

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

*このインターフェイスには親である `UIEvent` や `Event` から継承したプロパティもあります。*

`KeyboardEvent.altKey` 読取専用

論理値で、このキーイベントが発生した際に `Alt` （macOS の場合は `Option` または `⌥`）キーが押されていれば `true` を返します。

`KeyboardEvent.code` 読取専用

文字列で、このイベントが表す物理キーのコード値を返します。

**警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 `Keyboard.getLayoutMap()` を使用してください。

`KeyboardEvent.ctrlKey` 読取専用

論理値で、そのキーイベントが発生した際に `Ctrl` キーが押されていれば `true` を返します。

`KeyboardEvent.isComposing` 読取専用

論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。

`KeyboardEvent.key` 読取専用

文字列で、このイベントが表すキーのキー値を表します。

`KeyboardEvent.locale` 読取専用

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

**メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

`KeyboardEvent.location` 読取専用

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、キーボード上の位置にあります。

`KeyboardEvent.metaKey` 読取専用

論理値で、このキーイベントが発生した際に `Meta` キー（Mac キーボードでは `⌘ Command` キー、 Windows キーボードでは Windows キー (`⊞`)）が押されていれば `true` を返します。

`KeyboardEvent.repeat` 読取専用

論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。

`KeyboardEvent.shiftKey` 読取専用

論理値で、このキーイベントが発生した際に `Shift` キーが押されていれば `true` を返します。

例
-

### addEventListener による keyup の例

この例では、 `<input>` 要素内でキーを離すたびに、 `KeyboardEvent.code` 値を記録します。

```html
<input
 placeholder="ここをクリックして、キーを押して離してください。"
 size="40" />
<p id="log"></p>
```

```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeyup による同等の例

```js
input.onkeyup = logKey;
```

仕様書
---

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

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

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

関連情報
----

* `input`
* `keydown`
* `keypress`


Element: fullscreenerror イベント - Web API

Element: fullscreenerror イベント
=============================

`fullscreenerror` イベントは、ブラウザーが全画面モードに切り替えることができなかったときに発生します。

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

全画面モードへの切り替えが失敗する理由の一部は、 Fullscreen API のガイドをお読みください。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

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

function handleError(event) {
  console.error("an error occurred changing into fullscreen");
  console.log(event);
}

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

requestor.requestFullscreen();
```

仕様書
---

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

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

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

関連情報
----

* `fullscreenchange`
* 全画面 API
* 全画面 API のガイド


Element: insertAdjacentElement() メソッド - Web API

Element: insertAdjacentElement() メソッド
=====================================

**`insertAdjacentElement()`** は `Element` インターフェイスのメソッドで、呼び出された要素から相対的に指定された位置に、指定された要素ノードを挿入します。

構文
--

```js
insertAdjacentElement(position, element)
```

### 引数

`position`

文字列で、 `targetElement` の相対位置を表します。以下の何れかの文字列と一致する必要があります（大文字小文字の区別なし）。

* `'beforebegin'`: `targetElement` 自体の前。
* `'afterbegin'`: `targetElement` の直下、最初の子の前。
* `'beforeend'`: `targetElement` の直下、最後の子の後。
* `'afterend'`: `targetElement` 自体の後。

`element`

ツリーに挿入する要素です。

### 返値

挿入された要素です。挿入に失敗した場合は `null` になります。

### 例外

* `SyntaxError` `DOMException`
    + 指定された `position` が理解できない値であった場合に発生します。
* `TypeError`
    + 指定された `element` が有効な要素でなかった場合に発生します。
### position の名前の視覚化

```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

**メモ:** `beforebegin` および `afterend` の位置は、そのノードがツリー内にあり、親が要素である場合のみ動作します。

例
-

```js
beforeBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});
```

insertAdjacentElement.html のデモを GitHub で見てください（ソースコードも見てください）。ここでは、コンテナーの中に `<div>` 要素が並んでいます。そして、*Insert before* と *Insert after* ボタンを押すと、 `insertAdjacentElement()` を使って選択された要素の前後に新しい div を挿入することができます。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacentelement |

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

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

関連情報
----

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()` (`beforebegin` と同様で、異なる引数)
* `Node.appendChild()` (`beforeend` と同様の効果)


Element: getAttributeNodeNS() メソッド - Web API

Element: getAttributeNodeNS() メソッド
==================================

指定された名前空間と名前を持つ属性の `Attr` ノードを返します。

構文
--

```js
getAttributeNodeNS(namespace, nodeName)
```

### 引数

* `namespace` は属性の名前空間を特定する文字列です。
* `nodeName` は属性の名前を指定する文字列です。
### 返値

指定された属性のノードです。

メモ
--

`getAttributeNodeNS` は getAttributeNode よりも、特定の名前空間に含まれる属性を特定することができる点でより具体的です。対応するセッターメソッドは setAttributeNodeNS です。

DOM メソッドは要素の属性を取り扱います。

| 名前空間に無関係、最も一般的に使用されるメソッド | 名前空間に限定される変数(DOM Level 2) | `Attr` ノードを直接扱う DOM レベル 1 のメソッド(ほとんど使用されない) | `Attr` ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド(ほとんど使用されない) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-element-getattributenodens |

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

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


Element: scrollTop プロパティ - Web API

Element: scrollTop プロパティ
========================

**`Element.scrollTop`** プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。

要素の `scrollTop` の値は、要素の上から最も上の*表示されている*コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 `scrollTop` の値は `0` になります。

`scrollTop` には任意の整数値を設定することができますが、注意点があります。

* 要素がスクロールできない場合（例えば、オーバーフローがない、または要素に "**non-scrollable**" のプロパティがある場合）、`scrollTop` は `0` です。
* `scrollTop` は負の値には反応せず、代わりに `0` に設定します。
* 要素で利用できる最大値よりも大きな値を設定するには、`scrollTop` は最大値に決定します。

`scrollTop` がルート要素（`<html>` 要素）に対して使用されると、ウィンドウの `scrollY` が返されます。これは `scrollTop` の特例です。

**警告:** 画面の拡大縮小を使用するシステムでは、`scrollTop` が小数になることがあります。

値
-

数値です。

例
-

### 要素のスクロール

この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、`scrollTop` の値がどのように変わるかを確認してください。

#### HTML

```html
<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>
```

#### CSS

```css
#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}
```

#### JavaScript

```js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrolltop |

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

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

関連情報
----

* MSDN's Measuring Element Dimension and Location
* `Element.scrollLeft`
* `Element.scrollTo()`


Element: attributes プロパティ - Web API

Element: attributes プロパティ
=========================

**`Element.attributes`** プロパティは、そのノードに登録されたすべての属性ノードの生きたコレクションを返却します。返却される値は `NamedNodeMap` であり、`Array` ではありません。つまり、`Array` のメソッドは持っておらず、`Attr` ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、`attributes` はその属性に関するあらゆる情報を表す文字列のキーと値の組です。

値
-

`NamedNodeMap` オブジェクトです。

例
-

### 基本的な例

```js
// 文書内の最初の <p> 要素を取得
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
```

### 要素の属性を列挙する

`for...of` を使用すると、要素の属性をすべて列挙することができます。
 次の例では、"paragraph" を id に持つ要素のすべての属性ノードを走査し、その属性の値を表示します。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>属性の例</title>
    <script>
 function listAttributes() {
 const paragraph = document.getElementById("paragraph");
 const result = document.getElementById("result");

 // まず、段落に属性があるか確かめる
 if (paragraph.hasAttributes()) {
 let output = "最初の段落の属性:\n";
 for (const attr of paragraph.attributes) {
 output += `${attr.name} -> ${attr.value}\n`;
 }
 result.textContent = output;
 } else {
 result.textContent = "表示する属性はありません";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">サンプルの段落</p>
    <form action="">
      <p>
        <input type="button" value="最初の要素の属性の名前と値"
 onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

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

関連情報
----

* 返却される値のインターフェイスである `NamedNodeMap`
* quirksmode におけるブラウザー間の互換性の考慮事項


Element: compositionend イベント - Web API

Element: compositionend イベント
============================

**`compositionend`** イベントは、 IME などのテキスト編集システムが現在の編集セッションを完了またはキャンセルした時に発生します。

例えば、このイベントは、ユーザーが ピン音 IME を使用して漢字の入力を完了した後に発生します。

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

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

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

`CompositionEvent.data` 読取専用

イベントを発生させたインプットメソッドによって生成された文字を返します。これは `CompositionEvent` オブジェクトを生成したイベントの種類によって異なります。

`CompositionEvent.locale` 読取専用
非推奨

現在の入力メソッドのロケール（例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール）を返します。

例
-

```js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionend", (event) => {
  console.log(`生成された文字: ${event.data}`);
});
```

### 実行例

#### HTML

```html
<div class="control">
  <label for="example">
    最初にボックスを選択して、IME を開いてください。
    <ul>
      <li>macOS では <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>Windows では <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">イベントログ:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="25"
 id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>
```

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

.control {
  grid-area: control;
}

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

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

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

#### JS

```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-compositionend |

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

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

関連情報
----

* 関連イベント: `compositionstart`, `compositionupdate`。


Element: webkitmouseforcedown イベント - Web API

Element: webkitmouseforcedown イベント
==================================

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

要素で`mousedown`イベントが発生した後、マウスまたはトラックパッドのボタンに十分な圧力がかかり、「圧力クリック」と認定された場合、Safari は要素に **`webkitmouseforcedown`** イベントの送信を開始します。

**`webkitmouseforcedown`** は WebKit 固有のイベントです。これはタッチ圧力イベント (en-US)機能の一部です。

構文
--

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

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

onwebkitmouseforcedown = (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` の別名です。

仕様書
---

*どの仕様書にも含まれていません。* Apple は Mac Developer Library で説明しています。

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

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

関連情報
----

* イベントの紹介
* タッチ圧力イベント (en-US)
* `webkitmouseforcewillbegin`
* `webkitmouseforceup`
* `webkitmouseforcechanged`


Element: querySelectorAll() メソッド - Web API

Element: querySelectorAll() メソッド
================================

`Element` の **`querySelectorAll()`** メソッドは、静的な (ライブではない) `NodeList` で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。

構文
--

```js
querySelectorAll(selectors)
```

### 引数

`selectors`

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

なお、セレクターは `querySelectorAll()` が呼ばれた特定の要素だけでなく、文書全体に適用されることに注意してください。セレクターを `querySelectorAll()` が呼び出された要素に限定するには、セレクターの最初に `:scope` 擬似クラスを記述してください。セレクターのスコープの例を参照してください。

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

### 返値

生きていない `NodeList` で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの `Element` を含みます。

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

### 例外

`SyntaxError` `DOMException`

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

例
-

### データセットセレクターと属性セレクター

```html
<section class="box" id="sect1">
  <div class="funnel-chart-percent1">10.900%</div>
  <div class="funnel-chart-percent2">3700.00%</div>
  <div class="funnel-chart-percent3">0.00%</div>
</section>
```

```js
// データセットセレクター
const refs = [
  ...document.querySelectorAll(`[data-name\*="funnel-chart-percent"]`),
];

// 属性セレクター
// const refs = [...document.querySelectorAll(`[class\*="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
```

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

`NodeList` で `"myBox"` 要素の中にあるすべての `<p>` 要素を取得するには、次のようにします。

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

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

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

ここでは、文書の `<p>` 要素のうち、直接の親要素が `<div>` の `"highlighted"` クラスのものであり、それが ID が `"test"` であるコンテナーの中にあるものの一覧を取得します。

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

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

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

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

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

### 照合結果へのアクセス

一致した要素の `NodeList` が返されると、配列と同様に調べることができます。配列が空であれば（つまり、 `length` プロパティが 0 であれば）、一致するものが見つからなかったということです。

それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。

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

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

**メモ:** `NodeList` は、厳密には配列ではありません。つまり、`slice`、`some`、`map` などの配列メソッドを持っていません。これを配列に変換するには、 `Array.from(nodeList)` と実行してください。

### セレクターのスコープ

`querySelectorAll()` メソッドは、セレクターを文書全体に適用します。このメソッドが呼び出された要素だけのスコープにするわけではありません。セレクターのスコープを設定するには、セレクター文字列の先頭に `:scope` 擬似クラスを置いてください。

#### HTML

この例では、HTML に次のものが含まれています。

* 2 つのボタン: `#select` および `#select-scope`
* 3 重に入れ子になった `<div>` 要素: `#outer`, `#subject`, `#inner`
* この例が出力に使用する `<pre>` 要素

```html
<button id="select">Select</button>
<button id="select-scope">Select with :scope</button>

<div id="outer">
  .outer
  <div id="subject">
    .subject
    <div id="inner">.inner</div>
  </div>
</div>

<pre id="output"></pre>
```

```
div {
  margin: 0.5rem;
  padding: 0.5rem;
  border: 3px #20b2aa solid;
  border-radius: 5px;
  font-family: monospace;
}

pre,
button {
  margin: 0.5rem;
  padding: 0.5rem;
}
```

#### JavaScript

JavaScript では、まず `#subject` 要素を選択します。

`select` ボタンが押されたら、セレクター文字列として `"#outer #inner"` を渡して `#subject` に対して `querySelectorAll()` を呼び出します。

`#select-scope` ボタンが押されたら、再び `querySelectorAll()` を `#subject` に対して呼び出しますが、この時は `":scope #outer #inner"` をセレクター文字列として渡します。

```js
const subject = document.querySelector("#subject");

const select = document.querySelector("#select");
select.addEventListener("click", () => {
  const selected = subject.querySelectorAll("#outer #inner");
  output.textContent = `Selection count: ${selected.length}`;
});

const selectScope = document.querySelector("#select-scope");
selectScope.addEventListener("click", () => {
  const selected = subject.querySelectorAll(":scope #outer #inner");
  output.textContent = `Selection count: ${selected.length}`;
});
```

#### 結果

"Select" を押すと、セレクターは `inner` という ID を持つ要素のうち、`outer` という ID を持つ祖先を持つ要素をすべて選択します。なお、`#outer` は `#subject` 要素の外側にあるにもかかわらず、選択で使用されるため、`#inner` 要素が見つかります。

"Select with :scope" を押すと、`:scope` 擬似クラスがセレクターのスコープを `#subject` に制限するので、セレクターの照合では `#outer` は使われず、`#inner` 要素は見つかりません。

仕様書
---

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

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

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

関連情報
----

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


Element: transitionrun イベント - Web API

Element: transitionrun イベント
===========================

**`transitionrun`** イベントは、 CSS トランジションが最初に生成されたとき、すなわち `transition-delay` が始まる前に発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`TransitionEvent.propertyName` 読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

`TransitionEvent.elapsedTime` 読取専用

float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は `transition-delay` プロパティの影響を受けません。

`TransitionEvent.pseudoElement` 読取専用

文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。

例
-

このコードは `transitionrun` イベントのリスナーを追加します。

```js
el.addEventListener("transitionrun", () => {
  console.log(
    "トランジションは実行中ですが、まだトランジションは始まっていません。",
  );
});
```

同じことを、`ontransitionrun` プロパティを `addEventListener()` の代わりに使用して行います。

```js
el.ontransitionrun = () => {
  console.log(
    "トランジションの実行が開始され、トランジションの遅延時間が経過した時点でトランジションを開始します。",
  );
};
```

### ライブ例

次の例では、単純な `<div>` 要素に遅延を含むトランジションをスタイル設定しています。

```html
<div class="transition">ここにポインターを当ててください</div>
<div class="message"></div>
```

```css
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}
```

これにいくらかの JavaScript を追加して、`transitionstart` および `transitionrun` イベントが発生すると実行されるようにします。

```js
const el = document.querySelector(".transition");
const message = document.querySelector(".message");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun が発生";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart が発生";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend が発生";
});
```

違いは次の通りです。

* `transitionrun` は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
* `transitionstart` は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。

`transitionrun` は、トランジションが遅延時間内にキャンセルされた場合でも発生します。トランジションの遅延がない場合や、transition-delay が負の場合は、`transitionrun` と `transitionstart` の両方が発生します。

仕様書
---

| Specification |
| --- |
| CSS Transitions # transitionrun |

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

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

関連情報
----

* `TransitionEvent` インターフェイス
* CSS プロパティ: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* 関連イベント: `transitionend`, `transitionstart`, `transitioncancel`


Element: ariaColCount プロパティ - Web API

Element: ariaColCount プロパティ
===========================

**`ariaColCount`** は `Element` インターフェイスのプロパティで、テーブル、グリッド、ツリーグリッドの列数を定義する `aria-colcount` (en-US) 属性の値を反映します。

値
-

文字列です。

例
-

この例では、`semantic-table` という ID を持つ要素の `aria-colcount` 属性は "2" に設定されています。`ariaColCount` を使用して値を "3" に更新します。

```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100"
 aria-colcount="2">
  <caption id="semantic\_elements\_table\_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA Role</th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>
```

```js
let el = document.getElementById("semantic-table");
console.log(el.ariaColCount); // 2
el.ariaColCount = "3";
console.log(el.ariaColCount); // 3
```

仕様書
---

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

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

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

* ARIA: table ロール


Element: ariaChecked プロパティ - Web API

Element: ariaChecked プロパティ
==========================

**`ariaChecked`** は `Element` インターフェイスプロパティで、チェックボックスやラジオボタン、その他のチェック状態のあるウィジェットの現在の "checked" 状態を示す `aria-checked` (en-US) 属性の値を反映します。

**メモ:** 可能な限り、HTML の `<input>` 要素で `type="checkbox"` を使用してください。この要素には意味づけがあり、ARIA 属性は必要ありません。

値
-

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

`"true"`

要素がチェックされています。

`"mixed"`

3 状態チェックボックスまたは menuitemcheckbox の混合モードの値を示します。

`"false"`

要素はチェックに対応していますが、現在はチェックされていません。

`"undefined"`

要素はチェックに対応していません。

例
-

この例では、ID が `checkBoxInput` の要素の `aria-checked` 属性は "false" に設定されており、この入力は現在チェックされていないことを示しています。`ariaChecked` を使用して、値を "true" に更新します。

```html
<span
 role="checkbox"
 id="checkBoxInput"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
```

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

仕様書
---

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

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

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

関連情報
----

* ARIA: checkbox ロール


Element: setAttributeNodeNS() メソッド - Web API

Element: setAttributeNodeNS() メソッド
==================================

`setAttributeNodeNS` は、名前空間付きの新しい属性ノードを要素へ追加します。

### 構文

```js
setAttributeNodeNS(attributeNode)
```

### 引数

* `attributeNode` は `Attr` ノードです。
### 返値

置換された属性ノードが、もしあれば、この関数から返されます。

例
-

```js
// <div id="one" xmlns:myNS="http://www.mozilla.org/ns/specialspace"
// myNS:special-align="utterleft">one</div>
// <div id="two">two</div>

const myns = "http://www.mozilla.org/ns/specialspace";
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNodeNS(myns, "special-align");
d2.setAttributeNodeNS(a.cloneNode(true));
alert(d2.attributes[1].value); // 返値: `utterleft'
```

メモ
--

指定された属性が既に要素に存在する場合、その属性は新しい属性に置き換えられ、置き換えられた属性が返されます。

なお、ノードを複製せずに設定しようとすると、Mozilla は NS\_ERROR\_DOM\_INUSE\_ATTRIBUTE\_ERR "Attribute already in use" エラーを出します。DOM は Attr を再利用するにあたって複製することを要求しているからです（他のノードが移動できるのとは異なります）。

DOM メソッドは要素の属性を取り扱います。

| 名前空間に無関係、最も一般的に使用されるメソッド | 名前空間に限定される変数(DOM Level 2) | `Attr` ノードを直接扱う DOM レベル 1 のメソッド(ほとんど使用されない) | `Attr` ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド(ほとんど使用されない) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-element-setattributenodens |

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

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

関連情報
----

* `Document.createAttribute()`
* `Document.createAttributeNS()` (en-US)


Element: previousElementSibling プロパティ - Web API

Element: previousElementSibling プロパティ
=====================================

**`Element.previousElementSibling`** は読み取り専用のプロパティで、この要素 (`Element`) の親の子リスト内ですぐ前にある要素を返します。このノードがリストの最初のノードであった場合は `null` を返します。

値
-

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

例
-

```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script>
 let el = document.getElementById("div-03").previousElementSibling;
 document.write("<p>Siblings of div-03</p><ol>");
 while (el) {
 document.write("<li>" + el.nodeName + "</li>");
 el = el.previousElementSibling;
 }
 document.write("</ol>");
</script>
```

この例は読み込み時に、ページに以下のような出力を行います。
```

Siblings of div-03

   1. LI
   2. LI
   3. DIV
   4. DIV
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

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

関連情報
----

* `Element.nextElementSibling`


Element: auxclick イベント - Web API

Element: auxclick イベント
======================

**`auxclick`** イベントは、ポインティングデバイスの第 1 ボタン以外のボタン（マウスの第 1 の—通常は左端の—ボタン）が同じ要素（`Element`）内で押されて離されたとき、その要素で発行されます。

`auxclick` は、`mousedown` および `mouseup` イベントが発生した後に、順に発生します。

構文
--

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

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

onauxclick = (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` の別名です。

既定のアクションの抑止
-----------

大多数のブラウザーでは、中央クリックを新しいタブでリンクを開く機能に割り当てていますが、`preventDefault()` を `auxclick` イベントハンドラー内で呼び出すことで、この動作を取り消すことができます。

入力やナビゲーションに対応していない要素で発生した `auxclick` イベントを待ち受ける場合、マウスの中ボタンのダウンアクションにマッピングされた他の既定のアクションを明示的に防止したい場合がよくあります。Windows では自動スクロール、macOS や Linux ではクリップボードの貼り付けなどがこれにあたります。これは、`mousedown` イベントや `pointerdown` イベントの既定の動作を防ぐことで実現できます。

さらに、右クリックの後にシステムコンテキストメニューを開かなくする必要がある場合もあります。オペレーティングシステムのタイミングの違いにより、これも `auxclick` の既定のの動作では防ぐことができません。代わりに、`contextmenu` イベントの既定の動作を防止することで実現できます。

例
-

この例では、 `onclick` と `onauxclick` という 2 つのイベントハンドラー関数を定義しています。前者はボタンの背景色を変更し、後者はボタンの前景（テキスト）の色を変更します。また、このデモを多ボタンマウスで試すことで、2 つの関数が動作する様子を見ることができます（GitHub でライブで見ることができ、ソースコードを見ることもできます）。

### JavaScript

```js
let button = document.querySelector("button");
let html = document.querySelector("html");

function random(number) {
  return Math.floor(Math.random() \* number);
}

function randomColor() {
  return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault();
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault();
};
```

`auxclick` イベントを `onauxclick` でキャプチャするだけでなく、 `contextmenu` イベントもキャプチャし、そのイベントで `preventDefault()` を呼び出して、色の変更が適用された後にコンテキストメニューがポップアップするのを防いでいることに注目してください。

### HTML

```html
<button><h1>Click me!</h1></button>
```

```
html {
  height: 100%;
  overflow: hidden;
}

body {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

button {
  border: 0;
  background-color: white;
  font-size: 8vw;
  display: block;
  width: 100%;
  height: 100%;
}

h1 {
  letter-spacing: 0.5rem;
}
```

**メモ:** 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、`onauxclick` ハンドラーが実行されることがわかります（通常、ゲーミングマウスの「特殊」ボタンも含みます）。

仕様書
---

| Specification |
| --- |
| UI Events # event-type-auxclick |
| HTML Standard # handler-onauxclick |

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

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

関連情報
----

* イベントの紹介
* `click`
* `contextmenu`
* `dblclick`
* `mousedown`
* `mouseup`
* `pointerdown`
* `pointerup`


Element: animationend イベント - Web API

Element: animationend イベント
==========================

**`animationend`** イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 `animationend` イベントは発生しません。

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`AnimationEvent.animationName` 読取専用

アニメーションを生成した `animation-name` の値を含む文字列です。

`AnimationEvent.elapsedTime` 読取専用

`float` で、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。 `animationstart` イベントの場合、 `elapsedTime` は `0.0` です。ただし、`animation-delay` に負の値を指定した場合は、 `(-1 * delay)` を含む `elapsedTime` としてイベントが発行されます。

`AnimationEvent.pseudoElement` 読取専用

`'::'` で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 `''` となります。

例
-

この例は、アニメーションする要素を取得し、 `animationend` イベントを待ち受けます。

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

animated.addEventListener("animationend", () => {
  console.log("アニメーション終了");
});
```

同様に、 `onanimationend` イベントハンドラープロパティを使用するとこうなります。

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

animated.onanimationend = () => {
  console.log("アニメーション終了");
};
```

### ライブ例

#### HTML

```html
<div class="animation-example">
  <div class="container">
    <p class="animation">You chose a cold night to visit our planet.</p>
  </div>
  <button class="activate" type="button">Activate animation</button>
  <div class="event-log"></div>
</div>
```

#### CSS

```css
.container {
  height: 3rem;
}

.event-log {
  width: 25rem;
  height: 2rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

#### JavaScript

```js
const animation = document.querySelector("p.animation");
const animationEventLog = document.querySelector(
  ".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
  ".animation-example>button.activate",
);
let iterationCount = 0;

animation.addEventListener("animationstart", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active
    ? "Cancel animation"
    : "Activate animation";
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationend |

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

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

関連情報
----

* CSS アニメーション
* CSS アニメーションの使用
* `AnimationEvent`
* 関連イベント: `animationstart`, `animationcancel`, `animationiteration`
* `Document` を対象としたこのイベント: `animationend`
* `Window` を対象としたこのイベント: `animationend`


Element: touchstart イベント - Web API

Element: touchstart イベント
========================

`touchstart` イベントは、タッチ平面上に 1 つ以上のタッチ点が配置されたときに発生します。

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

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

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

`TouchEvent.altKey` 読取専用

論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。

`TouchEvent.changedTouches` 読取専用

前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.ctrlKey` 読取専用

論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。

`TouchEvent.metaKey` 読取専用

論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。

`TouchEvent.shiftKey` 読取専用

論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。

`TouchEvent.targetTouches` 読取専用

現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.touches` 読取専用

対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す `Touch` オブジェクトの `TouchList` です。

`TouchEvent.rotation`
Non-standard
 読取専用

イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。

`TouchEvent.scale`
Non-standard
 読取専用

イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

例
-

これらのイベントのコード例は、専用のページ「タッチイベント」にあります。

仕様書
---

| Specification |
| --- |
| Touch Events # event-touchstart |
| Touch Events # dom-globaleventhandlers-ontouchstart |

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

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

関連情報
----

* タッチイベント