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

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

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

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

* Learn more
* See full compatibility
* Report feedback
**`Element.attachShadow()`** メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート (`ShadowRoot`) への参照を返します。

シャドウツリーを追加できる要素
---------------

シャドウルートはすべての要素に追加できるわけではありません。セキュリティ上の理由でシャドウ DOM を持てないものもあります（`<a>` など）。

以下にシャドウルートを追加**できる**要素を列挙します。

* 任意の自律カスタム要素で有効な名前を持つもの
* `<article>`
* `<aside>`
* `<blockquote>`
* `<body>`
* `<div>`
* `<footer>`
* h1
* h2
* h3
* h4
* h5
* h6
* `<header>`
* `<main>`
* `<nav>`
* `<p>`
* `<section>`
* `<span>`
構文
--

```js
attachShadow(options)
```

### 引数

`options`

以下のフィールドを含むオブジェクトです。

`mode`

 文字列で、シャドウ DOM ツリーの*カプセル化モード*を指定します。
 以下のいずれかをの値を取ります。

`open`

シャドウルートの要素には、例えば `Element.shadowRoot` を使用して、ルートの外部の JavaScript からアクセスできます。

```js
element.attachShadow({ mode: "open" });
element.shadowRoot; // ShadowRoot オブジェクトを返す
```

`closed`

閉じたシャドウルートに対する外部の JavaScript からのアクセスを拒否します。

```js
element.attachShadow({ mode: "closed" });
element.shadowRoot; // null を返す
```

`delegatesFocus` 省略可

論理値で、 `true` に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは `:focus` のスタイルを利用することができます。既定値は `false` です。

`slotAssignment` 省略可

シャドウ DOM ツリーの *スロット割り当てモード* を指定します。これは以下のいずれかです。

`named`

要素は自動的にこのシャドウルート内の `<slot>` 要素に割り当てられます。このシャドウルート内の `<slot>` の `name` 属性と一致する `slot` 属性を持つホスティングの子孫は、そのスロットに割り当てられます。ホスティングの最上位の子で `slot` 属性を持たないものは、 `name` 属性を持たない `<slot>`（「既定のスロット」）が存在する場合、そのスロットに割り当てられます。

`manual`

 要素は自動的に `<slot>` 要素に割り当てることはできません。代わりに、`HTMLSlotElement.assign()` で手動で割り当てる必要があります。
 既定値は `named` です。

### 返値

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

### 例外

`InvalidStateError` `DOMException`

取り付けようとしている要素が既にシャドウホストである場合。

`NotSupportedError` `DOMException`

シャドウルートを HTML 名前空間外の要素に取り付けようとした場合、シャドウを取り付けられない要素であった場合、要素の定義で静的プロパティ `disabledFeatures` が `"shadow"` の値であった場合。

例
-

 以下の例は word-count-web-component のデモを使用しています(実行例)。
 コードの途中で `attachShadow()` を使ってシャドウルートを作成し、そこにカスタム要素の中身を取り付けているのがわかると思います。

```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // Create a shadow root
    const shadow = this.attachShadow({ mode: "open" });

    // Create text node and add word count to it
    const text = document.createElement("span");
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(() => {
      const count = `Words: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }
}

// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });
```

仕様書
---

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

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

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

関連情報
----

* `ShadowRoot.mode`
* `ShadowRoot.delegatesFocus`
* `ShadowRoot.slotAssignment` (en-US)


Element: ariaBusy プロパティ - Web API

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

**`ariaBusy`** は `Element` インターフェイスのプロパティで、要素が変更されているかどうかを示す `aria-busy` (en-US) 属性の値を反映します。支援技術は、ユーザーに公開する前に変更が完了するまで待ちたい場合があります。

値
-

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

`"true"`

この要素は更新中です。

`"false"`

この要素には更新の予定はありません。

例
-

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

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

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

仕様書
---

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

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

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


Element: ariaSort プロパティ - Web API

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

**`ariaSort`** は `Element` インターフェイスのプロパティで、表やグリッド内の項目が昇順か降順かを示す `aria-sort` (en-US) 属性の値を反映します。

値
-

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

`"ascending"`

項目はこの列で昇順に整列されています。

`"descending"`

項目はこの列で降順に整列されています。

`"none"`

この列で定義された並べ替えはありません。

`"other"`

昇順または降順以外のソートアルゴリズムが適用されました。

例
-

この例では、ID が `role-heading` の要素の `aria-sort` 属性は "none" に設定されています。`ariaSort` を使用して、値を "ascending" に更新します。

```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100">
  <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"
 id="role-heading"
 aria-sort="none"
 aria-rowindex="1"
 aria-colindex="1">
        ARIA Role
      </th>
      <th
 role="columnheader"
 id="element-heading"
 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("role-heading");
console.log(el.ariaSort); // none
el.ariaSort = "ascending";
console.log(el.ariaSort); // ascending
```

仕様書
---

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

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

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

関連情報
----

* ARIA: table ロール


Element: id プロパティ - Web API

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

**`id`** は `Element` インターフェイスのプロパティで、グローバル属性の **`id`** を反映した要素の識別子を表します。

`id` の値が空文字列でない場合は、文書内で固有でなければなりません。

`id` はよく `getElementById()` で特定の要素を受け取るために使用します。他の一般的な用途としては、要素の ID をセレクターとして CSS で文書をスタイル付けするために使用されます。

**メモ:** 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。

値
-

文字列です。

仕様書
---

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

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

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

関連情報
----

* DOM の **id** グローバル属性


Element: contextmenu イベント - Web API

Element: contextmenu イベント
=========================

**`contextmenu`** イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。

後者の場合、コンテキストメニューは、フォーカスされた要素の左下に表示されます。ただし、要素がツリーの場合は、現在の行の左下に表示されます。

右クリックイベントが（イベントの `preventDefault()` メソッドを呼び出して）無効化されていない場合は、対象となる要素で `contextmenu` イベントが発行されます。

**メモ:** Firefox における例外: `Shift` キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。

構文
--

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

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

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

例
-

### `contextmenu` イベントのキャンセル

この例では、最初の段落で `contextmenu` イベントが発行されたときに、`preventDefault()` を使って `contextmenu` イベントの既定のアクションをキャンセルしています。その結果、第 1 段落は右クリックしても何も起こらず、第 2 段落にはブラウザーが提供する標準的なコンテキストメニューが表示されることになります。

**メモ:** Firefox では、`Shift` キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。そのため、イベントをキャンセルしてもコンテキストメニューの表示を止めることはできません。

### HTML

```html
<p id="noContextMenu">この段落ではコンテキストメニューが無効になっています。</p>
<p>しかし、この段落では無効になっていません。</p>
```

### JavaScript

```js
const noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});
```

### 結果

仕様書
---

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

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

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

関連情報
----

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


Element: webkitmouseforceup イベント - Web API

Element: webkitmouseforceup イベント
================================

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

標準外の **`webkitmouseforceup`** イベントは Safari によって `Element` で `webkitmouseforcedown` イベントのしばらく後に発生します。

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

構文
--

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

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

onwebkitmouseforceup = (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`
* `webkitmouseforcedown`
* `webkitmouseforcechanged`


Element: touchend イベント - Web API

Element: touchend イベント
======================

`touchend` イベントは、タッチ面から 1 つ以上のタッチ点が取り除かれた場合に発生します。

構文
--

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

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

ontouchend = (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-touchend |
| Touch Events # dom-globaleventhandlers-ontouchend |

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

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

関連情報
----

* タッチイベント


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

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

**`removeAttributeNode()`** は `Element` インターフェイスのメソッドで、この要素から指定された属性を除去します。

構文
--

```js
removeAttributeNode(attributeNode)
```

### 引数

`attributeNode`

この要素から除去する属性ノードです。

### 返値

除去された属性ノードです。

### 例外

`NotFoundError` `DOMException`

要素の属性リストに属性ノードが含まれていない場合に発生します。

例
-

```js
// Given: <div id="top" align="center" />
const d = document.getElementById("top");
const d_align = d.getAttributeNode("align");
d.removeAttributeNode(d_align);
// align is now removed: <div id="top" />
```

メモ
--

削除された属性に既定値がある場合、それは直ちに置き換えられます。置換される属性は、同じ名前空間 URI とローカル名、そして必要に応じて元の接頭辞を持ちます。

`removeAttributeNodeNS` メソッドはありません。`removeAttributeNode` メソッドは、名前空間付き属性と名前空間付きでない属性の両方を削除することができます。

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

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

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


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

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

**`getClientRects()`** は `Element` インターフェイスのメソッドで、クライアントにあるそれぞれの CSS 境界ボックスの境界線を示す `DOMRect` オブジェクトのコレクションを返します。

多くの要素には、境界ボックスが 1 つずつしかありませんが、複数行のインラインレベル要素 （例えば複数行にまたがる `<span>` 要素、既定の場合）には、行ごとに囲む境界ボックスがあります。

構文
--

```js
getClientRects()
```

### 引数

なし。

### 返値

返される値は `DOMRect` オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの `DOMRect` オブジェクトは、ビューポートの左上からの境界ボックスの座標をピクセル単位で表します。キャプションを持つ表の場合、キャプションは表の境界ボックスの外側にあっても含まれます。外部の `<svg>` 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の `<svg>` が確立したビューポートになります（明確にするために、矩形は外部の `<svg>` の `viewBox` 変形によっても変換されます）。

矩形を計算する際には、ビューポート領域（またはその他のスクロール可能な要素）のスクロール量が考慮されます。

返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。

HTML の `<area>` 要素、それ自体が何もレンダリングしない SVG 要素、 `display:none` の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。

CSS ボックスで境界ボックスが空であっても矩形が返されます。 `left`, `top`, `right`, `bottom` の各座標はなお意味を持っています。

小数のピクセルオフセットが可能です。

例
-

これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 `withClientRectsOverlay` クラスを介してマークアップに接続されていることに注意してください。

### HTML

例 1: このHTMLは、 `<span>` 要素を含む3つの段落を生成し、それぞれを `<div>` ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの `<span>` 要素には、クライアントの矩形が描画されます。

```html
<h3>A paragraph with a span inside</h3>
<p>
  Both the span and the paragraph have a border set. The client rects are in
  red. Note that the p has only one border box, while the span has multiple
  border boxes.
</p>

<div>
  <strong>Original</strong>
  <p>
    <span>Paragraph that spans multiple lines</span>
  </p>
</div>

<div>
  <strong>p's rect</strong>
  <p class="withClientRectsOverlay">
    <span>Paragraph that spans multiple lines</span>
  </p>
</div>

<div>
  <strong>span's rect</strong>
  <p>
    <span class="withClientRectsOverlay"
 >Paragraph that spans multiple lines</span
 >
  </p>
</div>
```

例 2: この HTML は 3 つの順序付きリストを生成します。2 番目のブロックの `<ol>` と 3 番目のブロックの各 `<li>` 要素に対してクライアントの矩形が描かれています。

```html
<h3>A list</h3>
<p>
  Note that the border box doesn't include the number, so neither do the client
  rects.
</p>

<div>
  <strong>Original</strong>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>ol's rect</strong>
  <ol class="withClientRectsOverlay">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>each li's rect</strong>
  <ol>
    <li class="withClientRectsOverlay">Item 1</li>
    <li class="withClientRectsOverlay">Item 2</li>
  </ol>
</div>
```

例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの `<table>` で描画されます。

```html
<h3>A table with a caption</h3>
<p>
  Although the table's border box doesn't include the caption, the client rects
  do include the caption.
</p>

<div>
  <strong>Original</strong>
  <table>
    <caption>
      caption
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <strong>table's rect</strong>
  <table class="withClientRectsOverlay">
    <caption>
      caption
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>
```

### CSS

CSS は、最初の例では各 `<div>` ブロック内の段落と `<span>` の周りに、2番目の例では `<ol>` と `<li>` の周りに、3番目の例では `<table>`, `<th>`, `<td>` の各要素の周りに境界線を描画します。

```css
strong {
  text-align: center;
}
div {
  display: inline-block;
  width: 150px;
}
div p,
ol,
table {
  border: 1px solid blue;
}
span,
li,
th,
td {
  border: 1px solid green;
}
```

### JavaScript

JavaScriptコードは、 CSS のクラス `withClientRectsOverlay` が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。

```js
function addClientRectsOverlay(elt) {
  /\* Absolutely position a div over each client rect so that its border width
 is the same as the rectangle's width.
 Note: the overlays will be out of place if the user resizes or zooms. \*/
  const rects = elt.getClientRects();
  for (const rect of rects) {
    const tableRectDiv = document.createElement("div");
    tableRectDiv.style.position = "absolute";
    tableRectDiv.style.border = "1px solid red";
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const scrollLeft =
      document.documentElement.scrollLeft || document.body.scrollLeft;
    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
    tableRectDiv.style.top = `${rect.top + scrollTop}px`;
    tableRectDiv.style.left = `${rect.left + scrollLeft}px`;
    // We want rect.width to be the border width, so content width is 2px less.
    tableRectDiv.style.width = `${rect.width - 2}px`;
    tableRectDiv.style.height = `${rect.height - 2}px`;
    document.body.appendChild(tableRectDiv);
  }
}

(() => {
  /\* Call function addClientRectsOverlay(elt) for all elements with
 assigned class "withClientRectsOverlay" \*/
  const elts = document.getElementsByClassName("withClientRectsOverlay");
  for (const elt of elts) {
    addClientRectsOverlay(elt);
  }
})();
```

### 結果

仕様書
---

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

### メモ

`getClientRects()` は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。

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

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

関連情報
----

* `Element.getBoundingClientRect()`


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

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

**`getAttributeNS()`** は `Element` インターフェイスのメソッドで、指定された名前空間と名前を持つ属性の文字列値を返します。のような名前の属性が存在しない場合は、 `null` または `""` （空文字列のどちらかを返します。詳しくはメモを参照してください。

構文
--

```js
getAttributeNS(namespace, name)
```

### 引数

`namespace`

指定された属性を探す名前空間です。

`name`

探す属性の名前です。

### 返値

指定された属性の文字列値です。その属性が存在しない場合、結果は `null` になります。

**メモ:** 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。

例
-

以下の SVG 文書は独自の名前空間にある `foo` 属性の値を読み取ります。

```xml
<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:test="http://www.example.com/2014/test" width="40" height="40">

  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
 stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>

  <script>
    const ns = 'http://www.example.com/2014/test';
    const circle = document.getElementById('target');

    console.log(`attribute test:foo: "${circle.getAttributeNS(ns, 'foo')}"`);
  </script>
</svg>
```

HTML 文書では名前空間に対応していないため、この属性は `test:foo` でアクセスする必要があります。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>getAttributeNS() test page</title>
  </head>
  <body>
    <svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:test="http://www.example.com/2014/test"
 width="40"
 height="40">
      <circle
 id="target"
 cx="12"
 cy="12"
 r="10"
 stroke="#444"
 stroke-width="2"
 fill="none"
 test:foo="Foo value" />
    </svg>

    <script>
 const ns = "http://www.example.com/2014/test";
 const circle = document.getElementById("target");
 console.log(`Attribute value: ${circle.getAttribute("test:foo")}`);
 </script>
  </body>
</html>
```

メモ
--

名前空間は XML 文書でのみ対応しています。 HTML 文書では、代わりに `getAttribute()` を使用する必要があります。

`getAttributeNS()` は `getAttribute()` とは異なり、特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は Mozilla の架空の "specialspace" 名前空間に属しています。

DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブブラウザーは null を返していました。 DOM4 以降は、仕様でも null を返すように指定されました。しかし、一部の古いウェブブラウザーは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら、 `getAttributeNS` を呼ぶ前に `hasAttributeNS()` を使用して属性の存在を確かめる必要があります。

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 # ref-for-dom-element-getattributens① |

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

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

関連情報
----

* コードスニペット:getAttributeNS


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

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

**`scroll()`** は `Element` インターフェイスのメソッドで、指定された要素内の特定の座標の組まで要素をスクロールさせます。

構文
--

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

### 引数

`x-coord`

左上に表示させたいこの要素の横軸方向のピクセルです。

`y-coord`

左上に表示させたいこの要素の縦軸方向のピクセルです。

- または -

`options`

以下の引数を含む辞書オブジェクトです。

`top`

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

`left`

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

`behavior`

スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。

* `smooth`: スクロールをスムーズなアニメーションで行う
* `instant`: スクロールを単一のジャンプで即座に行う
* `auto`: スクロールの動作を `scroll-behavior` の計算値によって指定する

### 返値

なし (`undefined`)。

例
-

```js
// 1000 番目の垂直ピクセルを要素の先頭に置く
element.scroll(0, 1000);
```

`options` の使用例:

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

仕様書
---

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

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

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


Element: ariaMultiLine プロパティ - Web API

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

**`ariaMultiLine`** は `Element` インターフェイスのプロパティで、テキストボックスが複数行の入力を受け入れるか単一の行だけを受け入れるかを示す `aria-multiline` (en-US) 属性の値を反映します。

**メモ:** 可能であれば、HTMLの `<input>` 要素で `type="text"` を使用するか、`<textarea>` を使用してください。これらは意味づけが組み込まれており、ARIA 属性を必要としないからです。

値
-

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

`"true"`

これは複数行テキストボックスです。

`"false"`

これは単一行テキストボックスです。

例
-

この例では、`txtBoxInput` という ID を持つ要素の `aria-multiline` 属性は "true" に設定されており、このボックスが複数行の入力を許可していることを示しています。`ariaMultiLine` を使用して、値を "false" に更新します。

```html
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
 role="textbox"
 id="txtBoxInput"
 contenteditable="true"
 aria-multiline="true"
 aria-labelledby="txtboxMultilineLabel"
 aria-required="true"></div>
```

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

仕様書
---

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

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

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

関連情報
----

* ARIA: textbox ロール


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

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

`Element` の **`removeAttribute()`** メソッドは、指定された名前の属性を要素から削除します。

構文
--

```js
removeAttribute(attrName)
```

### 引数

`attrName`

文字列で、要素から削除する属性名を指定します。指定した属性が存在しなかった場合、`removeAttribute()` はエラーを発生させずに戻ります。

### 返値

なし (`undefined`)。

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

属性の値を直接、または `setAttribute()` を使用して `null` に設定するのではなく、 `removeAttribute()` を使用してください。多くの属性は `null` に設定しても、期待通りの動作をしません。

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

例
-

```js
// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">
```

仕様書
---

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

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

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


Element: transitioncancel イベント - Web API

Element: transitioncancel イベント
==============================

**`transitioncancel`** イベントは、 CSS トランジションがキャンセルされたときに発生します。

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`TransitionEvent.propertyName` 読取専用

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

`TransitionEvent.elapsedTime` 読取専用

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

`TransitionEvent.pseudoElement` 読取専用

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

例
-

このコードはトランジションを定義している要素を取得し、`transitioncancel` イベントのリスナーを追加します。

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

transition.addEventListener("transitioncancel", () => {
  console.log("Transition canceled");
});
```

同じことを、`ontransitioncancel` プロパティを `addEventListener()` の代わりに使用して行った例です。

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

transition.ontransitioncancel = () => {
  console.log("Transition canceled");
};
```

### ライブ例

次の例では、単純な `<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: 2s;
}

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

これにいくらかの JavaScript を追加して、`transitionstart`、`transitionrun`、`transitioncancel`、`transitionend` の各イベントが発生すると実行されるようにします。この例では、トランジションをキャンセルするには、トランジションが終了する前にトランジション中のボックスに宛てたマウスを外してください。トランジション終了イベントを発生させるには、トランジションが終了するまでトランジションの上にマウスを当てたままにしてください。

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

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

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

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

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

`transitioncancel` イベントは `transitionrun` イベントが発生した後、`transitionend` イベントが発生する前にトランジションがどちらかの方向に取り消された場合に発行されます。

トランジションの遅延や継続時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。

`transitioncancel` イベントが発行された場合、`transitionend` イベントは発行されません。

仕様書
---

| Specification |
| --- |
| CSS Transitions # transitioncancel |
| CSS Transitions # dom-globaleventhandlers-ontransitioncancel |

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

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`
* 関連イベント: `transitionrun`, `transitionstart`, `transitionend`


Element: ariaExpanded プロパティ - Web API

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

**`ariaExpanded`** は `Element` インターフェイスのプロパティで、`aria-expanded` (en-US) 属性の値を反映し、この要素が所有または制御するグループ化要素が展開されているか折りたたまれているかを示します。

値
-

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

`"true"`

この要素が所有または制御しているグループ化要素が展開されています。

`"false"`

この要素が所有または制御しているグループ化要素が折り畳まれています。

`"undefined"`

この要素は展開されているグループ化要素を所有または制御していません。

例
-

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

```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="list"
 aria-expanded="false"
 aria-haspopup="true" />
  <button id="animals-button" tabindex="-1" aria-label="Open">▽</button>
  <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.ariaExpanded); // false
el.ariaExpanded = "true";
console.log(el.ariaExpanded); // true
```

仕様書
---

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

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

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


Element: ariaColSpan プロパティ - Web API

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

**`ariaColSpan`** は `Element` インターフェイスのプロパティで、`aria-colspan` (en-US) 属性の値を反映し、表、グリッド、ツリーグリッドの中にあるセル、グリッドセルがまたがる列の数を定義します。

値
-

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

例
-

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

```html
<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</td>
  </tr>
  <tr>
    <td colspan="2" aria-colspan="2" id="spanning-column">Spanning</td>
    <td>One</td>
  </tr>
</table>
```

```js
let el = document.getElementById("spanning-column");
console.log(el.ariaColSpan);
el.ariaColSpan = "3";
console.log(el.ariaColSpan);
```

仕様書
---

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

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

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

関連情報
----

* ARIA: table ロール


Element: pointerdown イベント - Web API

Element: pointerdown イベント
=========================

`pointerdown` イベントは、ポインターがアクティブになったときに発生します。マウスでは、その機器のボタンが押されていない状態から 1 つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。

**メモ:** 直接操作ができるタッチ画面のブラウザーでは、 `pointerdown` イベントで暗黙的なポインターキャプチャが発生するため、ターゲットが以降のすべてのポインターイベントをキャプチャし、キャプチャターゲット上で発生したかのように扱います。そのため、 `pointerover`, `pointerenter`, `pointerleave`, `pointerout` はこのキャプチャーが発生している間は**発生しません**。このキャプチャはターゲット要素上で `element.releasePointerCapture` を呼び出すことで手動で解除することができ、 `pointerup` または `pointercancel` イベントの後で暗黙的に解除されます。

構文
--

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

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

onpointerdown = (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("pointerdown", (event) => {
  console.log("Pointer down event");
});
```

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

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

para.onpointerdown = (event) => {
  console.log("Pointer down event");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerdown-event |
| Pointer Events # dom-globaleventhandlers-onpointerdown |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointermove`
    + `pointercancel`
    + `pointerup`
    + `pointerout`
    + `pointerleave`


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

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

**`setAttributeNode()`** メソッドは、新しい `Attr` ノードを指定された要素に追加します。

### 構文

```js
setAttributeNode(attribute)
```

### 引数

* `attribute` は要素に追加する `Attr` ノードです。
### 返値

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

例
-

この例では `align` 属性をある要素から別の要素へコピーしています。

### HTML

```html
<div id="one" align="left">one</div>
<div id="two">two</div>
```

### JavaScript

```js
let d1 = document.getElementById("one");
let d2 = document.getElementById("two");
let a = d1.getAttributeNode("align");

d2.setAttributeNode(a.cloneNode(true));

// 返値: 'left'
alert(d2.attributes[1].value);
```

メモ
--

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

このメソッドが使われることはあまりなく、通常は `Element.setAttribute()` が要素の属性を変更するために使われます。

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

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

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

関連情報
----

* `Document.createAttribute()`


Element: animationstart イベント - Web API

Element: animationstart イベント
============================

**`animationstart`** イベントは、 CSS アニメーションが開始したときに発生します。 `animation-delay` がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは `elapsedTime` が待ち時間の絶対値と等しくなったときに発生します（および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります）。

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`AnimationEvent.animationName` 読取専用

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

`AnimationEvent.elapsedTime` 読取専用

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

`AnimationEvent.pseudoElement` 読取専用

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

例
-

このコードは `animationstart` イベントを待ち受けし、イベント発生時にメッセージを記録します。

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

animated.addEventListener("animationstart", () => {
  console.log("Animation started");
});
```

同様に、 `onanimationstart` を使用するとこうなります。

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

animated.onanimationstart = () => {
  console.log("Animation started");
};
```

### ライブ例

#### 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 {
    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";
});
```

#### Result

仕様書
---

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

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

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

関連情報
----

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


Element: mousedown イベント - Web API

Element: mousedown イベント
=======================

**`mousedown`** イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたとき、その要素 (`Element`) に発行されます。

**メモ:** `click` イベントとの違いは、 `click` イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 `mousedown` はボタンが最初に押された時点で発行されます。

構文
--

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

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

onmousedown = (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-mousedown |
| HTML Standard # handler-onmousedown |

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

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

関連情報
----

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


Element: prefix プロパティ - Web API

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

**`Element.prefix`** は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は `null` を返します。

値
-

文字列です。

例
-

次の例はコンソールに "x" を記録します。

```xml
<x:div onclick="console.log(this.prefix)"/>
```

注
-

これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。HTML 文書では動作しません。

仕様書
---

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

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

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

関連情報
----

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


Element: ariaPlaceholder プロパティ - Web API

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

**`ariaPlaceholder`** は `Element` インターフェイスのプロパティで、`aria-placeholder` 属性の値を反映します。この属性は、コントロールに値がない場合表示する、ユーザーのデータ入力を助けることを意図した短いヒントを定義します。

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

値
-

文字列です。

例
-

この例では、IDが `txtBoxInput` の要素の `aria-placeholder` 属性には文字列が設定されています。`ariaPlaceholder`を使用して、文字列を別の値に更新します。

```html
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
 role="textbox"
 id="txtBoxInput"
 contenteditable="true"
 aria-placeholder="5-digit zipcode"
 aria-labelledby="txtboxLabel"></div>
```

```js
let el = document.getElementById("txtBoxInput");
console.log(el.ariaPlaceholder); // "5-digit zipcode"
el.ariaPlaceholder = "12345";
console.log(el.ariaPlaceholder); // "12345"
```

仕様書
---

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

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

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

関連情報
----

* ARIA: textbox ロール


Element: ariaValueNow プロパティ - Web API

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

**`ariaValueNow`** は `Element` インターフェイスのプロパティで、範囲ウィジェットの現在値を定義する `aria-valuenow` (en-US) 属性の値を反映します。

値
-

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

例
-

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

```html
<div
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```

```js
let el = document.getElementById("slider");
console.log(el.ariaValueNow); // 1
el.ariaValueNow = "2";
console.log(el.ariaValueNow); // 2
```

仕様書
---

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

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

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


Element: ariaRowCount プロパティ - Web API

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

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

値
-

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

例
-

この例では、ID が `semantic-table` の要素の `aria-rowcount` 属性は、現在表示されている行ではなく、表の行の総数を表します。`ariaRowCount` を使用して、値を "101" に更新します。

```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100">
  <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.ariaRowCount); // 100
el.ariaRowCount = "101";
console.log(el.ariaRowCount); // 101
```

仕様書
---

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

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

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

* ARIA: table ロール


Element: gesturechange イベント - Web API

Element: gesturechange イベント
===========================

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

**`gesturechange`** イベントは、タッチジェスチャー中に数字が動いたときに発生します。

これは WebKit 固有のイベントです。

構文
--

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

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

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

イベント型
-----

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

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

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

`GestureEvent.rotation` 読取専用

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

`GestureEvent.scale` 読取専用

イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* GestureEventClassReference at the Safari Developer Library


Element: mousewheel イベント - Web API

Element: mousewheel イベント
========================

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

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

古い標準外の **`mousewheel`** イベントは、このイベントは `Element` で非同期に発生し、マウスホイールまたは類似の機器を操作している間の更新を提供します。`mousewheel` イベントはどの標準にも含まれておらず、いくつかのブラウザーで実装されていましたが、Firefox で実装されることはありませんでした。

**メモ:** この古いイベントの代わりに、標準の `wheel` イベントを使用してください。

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*このインターフェイスには、祖先である `MouseEvent`, `UIEvent`, `Event` から継承したプロパティがあります。*

`WheelEvent.deltaX` 読取専用

水平スクロール量を表す `double` を返します。

`WheelEvent.deltaY` 読取専用

垂直方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaZ` 読取専用

z 軸のスクロール量を表す `double` を返します。

`WheelEvent.deltaMode` 読取専用

`delta*` 値のスクロール量の単位を表す `unsigned long` を返します。指定可能な値は次の通りです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` の値はピクセル単位で指定します。 |
| `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。 |
| `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。 |

`WheelEvent.wheelDelta` 読取専用
非推奨

ピクセル単位で距離を表す整数（32 ビット）を返します。

`WheelEvent.wheelDeltaX` 読取専用
非推奨

水平スクロール量を表す整数を返します。

`WheelEvent.wheelDeltaY` 読取専用
非推奨

垂直スクロール量を表す整数を返します。

detail プロパティ
------------

`detail` プロパティの値は常にゼロです。ただし、Opera では `detail` は Firefox 専用の `DOMMouseScroll` イベントの `detail` 値はスクロール距離を行単位で示し、負の値はスクロール移動が下方向または右方向であることを示し、正の値は上方向または左方向であることを示します。

**メモ:** macOS では、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。

Linux では、`2` または `-2` がネイティブのホイールイベントごとに設定されます。

wheelDelta, wheelDeltaX, wheelDeltaY の値
---------------------------------------

`wheelDelta` 属性の値は、ホイールがどれだけ回転したかを示す抽象的な値です。ホイールがユーザーから離れる方向に回転した場合は正の値、そうでない場合は負の値となります。これはデルタ値の符号が DOM Level 3 Event の `wheel` と異なることを意味しています。しかし、これらの値の量の意味はブラウザー間で同じではありません。詳しくは以下の説明を参照してください。

IE と Opera (Presto) は `wheelDelta` 属性にのみ対応しており、水平スクロールには対応していません。

`wheelDeltaX` 属性値は、横軸に沿った `wheelDelta` 属性値を示します。ユーザーが右にスクロールする機器を運営する場合、値は負になります。そうでない場合、つまり左にスクロールする場合、値は正の値になります。

`wheelDeltaY` 属性値は縦軸の `wheelDelta` 属性値を示します。値の符号は `wheelDelta` 属性値と同じです。

### Chrome

Windows では `WM_MOUSEWHEEL` または `WM_MOUSEHWHEEL` の差分値と同じになります。また、システム設定のスクロール量がページスクロールであっても値は変わりません。

Linux の場合、値はネイティブホイールイベントごとに `120` または `-120` です。これは Windows の IE や Chrome と同じ動作になります。

Macの場合、値は複雑です。ネイティブホイールイベントを発生させる**機器**が連続スクロールに対応している場合、値が変更されます。

連続スクロールに対応している機器（MacBook のトラックパッドや滑らかに回転するマウスホイールなど）の場合は、加速スクロール量から値が計算されます。この場合、値は Safari と同じです。

機器が連続スクロールに対応して**いない**場合（典型的な例として、スムーズに回転させることができない古いマウスホイール）、値は非加速スクロール量（1 ノッチあたり 120）から計算されます。この場合、値は Safari とは異なります。

この違いはウェブアプリケーションの開発者にとって深刻な課題となります。つまり、ウェブ開発者は `mousewheel` イベントがどの機器によって発生させられたのかを知ることができません。

### Safari

値は常に加速スクロール量から計算されます。これは、連続スクロールに対応している Chrome 以外のブラウザーとは実に異なります。

### Opera (Presto)

値は常に `detail` 属性の値 ✕ `40` です。

Windows では、`detail` 属性の値は実際のスクロール量から計算されるため、システム設定やページで 1 ノッチあたりのスクロール量が 3 行になる以外は、他のブラウザーとは値が異なります。

Linuxでは、値はネイティブホイールイベントごとに `80` または `-80` です。これは他のブラウザーとは異なります。

Mac では、`detail` 属性の値はネイティブイベントの加速スクロール量から計算されます。この値は通常、Safari や Chrome の値よりもはるかに大きくなります。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* 代わりに待ち受けすべき標準の `wheel` イベント。


Element: compositionupdate イベント - Web API

Element: compositionupdate イベント
===============================

**`compositionupdate`** イベントは、 IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

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

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

`CompositionEvent.data` 読取専用

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

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

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

例
-

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

inputElement.addEventListener("compositionupdate", (event) => {
  console.log(`generated characters were: ${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;
}
```

#### JavaScript

```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-compositionupdate |

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

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

関連情報
----

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


Element: ariaRoleDescription プロパティ - Web API

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

**`ariaRoleDescription`** は `Element` インターフェイスのプロパティで、要素のロールに関する人間が読み取り可能な、作者がローカライズした説明を定義する `aria-roledescription` (en-US) 属性の値を反映します。

値
-

文字列です。

例
-

この例では、ID が `myApplication` である要素の `aria-roledescription` 属性が設定されています。`ariaRoleDescription` を用いて値を更新することができます。

```html
<div
 id="myApplication"
 role="application"
 aria-roledescription="a description of this widget">
  …
</div>
```

```js
let el = document.getElementById("myApplication");
console.log(el.ariaRoleDescription); // "a description of this widget"
el.ariaRoleDescription = "an updated description of this widget";
console.log(el.ariaRoleDescription); // "an updated description of this widget"
```

仕様書
---

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

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

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

* ARIA: application ロール


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

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

`Element` の **`getElementsByClassName()`** メソッドは、引数で与えられたクラス名を含むすべての子要素を、生きた `HTMLCollection` で返します。

`getElementsByClassName()` メソッドはこのメソッドとほぼ同様に動作しますが、 `Document` 全体に働きます。特定された文書ルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。

構文
--

```js
getElementsByClassName(names)
```

### 引数

`names`

文字列で、一致させる一つ以上のクラス名を表し、空白区切りで指定できます。

### 返値

`HTMLCollection` で、`names` で指定したすべてのクラスを持つすべての要素のライブで更新されるリストです。

使用上の注意
------

この関数が返すコレクションは常に*生きています*。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で `names` に一致する新しい要素が追加された場合は、直ちにこのコレクションに追加されます。同様に、サブツリー上にある `names` に一致しなかった要素が一致するよう変更された場合も、すぐにこのコレクションに現れます。

逆もしかりです。 `names` に一致しなくなったりツリーから外された要素は、すぐにコレクションから除外されます。

**メモ:** クラス名は後方互換モードでは大文字・小文字が区別されず、それ以外では区別されます。

例
-

### 単一のクラスと一致させる

単一の指定されたクラスを含む要素を探すには、 `getElementsByClassName()` を呼び出す際にそのクラス名を指定するだけです。

```js
element.getElementsByClassName("test");
```

この例は `main` の `id` を持つ要素の子孫の中で、`test` クラスをもつ全要素を見つけます。

```js
document.getElementById("main").getElementsByClassName("test");
```

### 複数のクラスと一致させる

`red` と `test` 両方のクラスを含んだ要素を見つけます。

```js
element.getElementsByClassName("red test");
```

### 結果を調査する

標準の配列構文や、`HTMLCollection` の `item()` メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。`colorbox` クラスを外した際に、`matches` がすぐに変更されてしまうからです。

```js
const matches = element.getElementsByClassName("colorbox");

for (let i = 0; i < matches.length; i++) {
  matches[i].classList.remove("colorbox");
  matches.item(i).classList.add("hueframe");
}
```

別の手段を使いましょう。例えば、

```js
const matches = element.getElementsByClassName("colorbox");

while (matches.length > 0) {
  matches.item(0).classList.add("hueframe");
  matches[0].classList.remove("colorbox");
}
```

このコードは、`"colorbox"` クラスを持つ子孫要素を見つけ、`item(0)`を呼び出して `"hueframe"` クラスを追加し、（配列記法で） `"colorbox"` を削除します。その後、（もし残っていれば）別の要素が `item(0)` になります。

### 配列のメソッドで結果を抽出する

`Array` のメソッドに `this` 値として `HTMLCollection` を渡すことで、
 任意の `HTMLCollection` に対して配列のメソッドを呼び出すことができます。ここでは、`test` のクラスのある `<div>` 要素をすべて探します。

```js
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === "DIV",
);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

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


Element: ariaLevel プロパティ - Web API

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

**`ariaLevel`** は `Element` インターフェイスのプロパティで、構造内の要素の階層レベルを定義する `aria-level` 属性の値を反映します。

**メモ:** 使用可能な場合は、HTML の h1 または他の正しい見出しレベルを使用してください。

値
-

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

例
-

この例では、IDが `main-heading` の要素の `aria-level` 属性は "1" に設定されています。`ariaLevel` を使用して値を "2 "に更新します。

```html
<div role="heading" id="main-heading" aria-level="1">
  This is a main page heading
</div>
```

```js
let el = document.getElementById("main-heading");
console.log(el.ariaLevel); // "1"
el.ariaLevel = "2";
console.log(el.ariaLevel); // "2"
```

仕様書
---

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

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

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

関連情報
----

* ARIA: heading ロール


Element: classList プロパティ - Web API

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

**`Element.classList`** は読み取り専用のプロパティで、生きた `DOMTokenList` コレクションでその要素の `class` 属性を返します。これを使用してクラスリストを操作することができます。

`classList` を使用することは、 `element.className` から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。

値
-

`DOMTokenList` で、その要素の `class` 属性を返します。 `class` 属性が設定されていない場合や空の場合は、空の `DOMTokenList` を返します。すなわち、 `DOMTokenList` の `length` プロパティが `0` になります。

`DOMTokenList` 自体は読み取り専用ですが、 `add()`, `remove()`, `replace()`, `toggle()` の各メソッドを用いてオブジェクトを変更することはできます。

要素が指定されたクラスを含むかどうかは、`classList.contains()` メソッドを用いて検査することができます。

例
-

```js
const div = document.createElement("div");
div.className = "foo";

// 最初の状態: <div class="foo"></div>
console.log(div.outerHTML);

// classList API を用いてクラスを除去、追加
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// visible が設定されていれば除去し、なければ追加
div.classList.toggle("visible");

// i が 10 未満であるかどうかの条件によって visible を追加または除去
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// 複数のクラスを追加または除去
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// スプレッド構文を使用したクラスの追加または除去
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// "foo" クラスを "bar" クラスで置き換え
div.classList.replace("foo", "bar");
```

仕様書
---

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

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

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

関連情報
----

* `element.className`
* `DOMTokenList`
* `classList.js` (クロスブラウザーの JavaScript ポリフィルで、完全に `element.classList` を実装しています)


Element: shadowRoot プロパティ - Web API

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

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

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

* Learn more
* See full compatibility
* Report feedback
`Element.shadowRoot` は読み取り専用のプロパティで、その要素がホストになっているシャドウルートを表します。

既に存在している要素にシャドウルートを追加するには `Element.attachShadow()` を使用してください。

値
-

`ShadowRoot` オブジェクトインスタンス、またはシャドウルートが `mode` に `closed` を設定されて取り付けられた場合は `null` です（詳しくは `Element.attachShadow()` を参照してください）。

例
-

次のスニペットは life-cycle-callbacks の例から取ったものです (ライブで確認)。その要素の属性で指定された大きさと色の正方形を表示する要素を生成します。

`<custom-square>` 要素のクラス定義の中に、外部関数である `updateStyle()` を呼び出すライフサイクルコールバックをいくつか入れて、実際にサイズと色を要素に適用しています。引数として `this` （カスタム要素そのもの）を渡していることが分かるでしょう。

```js
class Square extends HTMLElement {
  connectedCallback() {
    console.log("Custom square element added to page.");
    updateStyle(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log("Custom square element attributes changed.");
    updateStyle(this);
  }
}
```

`updateStyle()` 関数自体で、`Element.shadowRoot` を使用してシャドウ DOM への参照を取得します。ここから標準的な DOM 走査技術を使用して、シャドウ DOM 内の `<style>` 要素を見つけ、その中にある CSS を更新します。

```js
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach((childNode) => {
    if (childNode.nodeName === "STYLE") {
      childNode.textContent = `
 div {
 width: ${elem.getAttribute("l")}px;
 height: ${elem.getAttribute("l")}px;
 background-color: ${elem.getAttribute("c")};
 }
 `;
    }
  });
}
```

仕様書
---

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

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

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


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

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

**`removeAttributeNS()`** は `Element` インターフェイスのメソッドで、要素から指定された属性を取り除きます。

構文
--

```js
removeAttributeNS(namespace, attrName)
```

### 引数

* `namespace` は文字列で、属性の名前空間を示します。
* `attrName` は文字列で、現在のノードから取り除く属性の名前を示します。
### 返値

なし (`undefined`)。

### 例

```js
// Given:
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
// special:specialAlign="utterleft" width="200px" />
d = document.getElementById("div1");
d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
// Now: <div id="div1" width="200px" />
```

メモ
--

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 # ref-for-dom-element-removeattributens① |

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

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

Firefox 3 以降では、このメソッドは DOM 値を既定値にリセットします。


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

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

**`Element.getElementsByTagName()`** メソッドは、生きた `HTMLCollection` で指定されたタグ名を持つ要素を返します。

この要素のすべての子孫が検索されますが、要素そのものは検索されません。返されるリストは*生きており*、 DOM ツリーとともに自動的に更新されます。したがって、同じ要素と引数で `Element.getElementsByTagName()` を繰り返し呼び出す必要はなく、呼び出しの間に DOM が変化しても大丈夫です。

HTML 文書内の HTML 要素に対して呼び出された場合、 `getElementsByTagName` は引数を小文字に変換してから検索を行います。これは、HTML 文書内のキャメルケースの SVG 要素（例えば `<linearGradient>`）と照合しようとする場合には望ましくありません。代わりに、 `Element.getElementsByTagNameNS()` を使ってください。この場合、タグ名の大文字と小文字は区別されます。

`Element.getElementsByTagName` は `Document.getElementsByTagName()` に似ていますが、指定した要素の子孫の要素のみを検索する点が異なります。

構文
--

```js
getElementsByTagName(tagName)
```

### 引数

* `tagName` は検索する修飾名です。特別な文字列 `"*"` はすべての要素を表します。XHTML との互換性のため、小文字を使用してください。
### 返値

*生きた* `HTMLCollection` で、タグ名が一致する要素が出現順で入ります。要素が見つからなかった場合は `HTMLCollection` は空になります。

例
-

```js
// テーブル内のセルの数だけ反復処理します
const table = document.getElementById("forecast-table");
const cells = table.getElementsByTagName("td");

for (const cell of cells) {
  const status = cell.getAttribute("data-status");
  if (status === "open") {
    // データを取得
  }
}
```

仕様書
---

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

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

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


Element: scrollLeft プロパティ - Web API

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

**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

要素の `direction` が `rtl`（right-to-left、右書き）の場合、`scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

`scrollLeft` は任意の整数値で設定することができます。しかし、

* 要素がスクロールできない場合（例えば、はみ出した部分がない場合）、 `scrollLeft` は `0` に設定されます。
* 指定された値が `0` より小さかったら（右書きの要素では `0` より大きかったら）、 `scrollLeft` は `0` に設定されます。
* 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。

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

値
-

数値です。

例
-

### HTML

```html
<div id="container">
  <div id="content">ボタンをクリックすると右へスライドします。</div>
</div>

<button id="slide" type="button">右へスライド</button>
```

### CSS

```css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}
```

### JavaScript

```js
const button = document.getElementById("slide");

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};
```

### 結果

仕様書
---

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

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

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

関連情報
----

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


Element: click イベント - Web API

Element: click イベント
===================

**`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。

ある要素でボタンが押され、ボタンが離される前にポインターが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。

`click` は `mousedown` および `mouseup` イベントの後、順番通りに発生します。

構文
--

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

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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

PointerEvent

**メモ:** この仕様書の以前のバージョンでは、このイベントのイベント型は `MouseEvent` でした。 Firefox と Safari では今でもこの型で渡されます。

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

*親である `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` の別名です。

`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` 読取専用

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

使用上の注意
------

`click` のイベントハンドラーに渡される `PointerEvent` オブジェクトの `detail` プロパティには、 `target` がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。

例
-

この例は `<button>` を連続してクリックした数を表示します。

### HTML

```html
<button>Click</button>
```

### JavaScript

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

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});
```

### 結果

ボタンを素早く何度もクリックしてみて、クリックカウントを増やしましょう。クリックの間に休憩を挟むと、カウントがリセットされます。

仕様書
---

| Specification |
| --- |
| UI Events # event-type-click |
| HTML Standard # handler-onclick |

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

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

関連情報
----

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


Element: gesturestart イベント - Web API

Element: gesturestart イベント
==========================

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

**`gesturestart`** イベントは、複数の指がタッチ面に接触したとき、新しいジェスチャーを開始したとき に発生します。ジェスチャー中は `gesturechange` イベントが発生します。ジェスチャーが終了すると、`gestureend` イベントが発生します。

これは WebKit 固有のイベントです。

構文
--

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

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

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

イベント型
-----

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

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

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

`GestureEvent.rotation` 読取専用

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

`GestureEvent.scale` 読取専用

イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* GestureEventClassReference at the Safari Developer Library


Element: clientTop プロパティ - Web API

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

要素の上境界の幅をピクセル数で表します。これは要素の読み取り専用で整数型のプロパティです。

たまたま、2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。

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

値
-

数値です。

例
-

次の例では、クライアント領域の背景が白で、 `border-top` が 24px の黒になっています。 `clientTop` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 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-top: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}
```

### 結果

メモ
--

`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。

仕様書
---

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

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

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


Element: ariaValueMax プロパティ - Web API

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

**`ariaValueMax`** は `Element` インターフェイスのプロパティで、範囲ウィジェットの最大許容値を定義する `aria-valuemax` (en-US) 属性の値を反映します。

値
-

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

例
-

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

```html
<div
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```

```js
let el = document.getElementById("slider");
console.log(el.ariaValueMax); // 7
el.ariaValueMax = "6";
console.log(el.ariaValueMax); // 6
```

仕様書
---

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

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

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


Element: ariaValueMin プロパティ - Web API

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

**`ariaValueMin`** は `Element` インターフェイスのプロパティで、範囲ウィジェットの最小許容値を定義する `aria-valuemin` (en-US) 属性の値を反映します。

値
-

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

例
-

この例では、ID が `slider` の要素の `aria-valuemin` 属性は "1" に設定されています。`ariaValueMin` を使用して、値を "2" に更新します。

```html
<div
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```

```js
let el = document.getElementById("slider");
console.log(el.ariaValueMin); // 1
el.ariaValueMin = "2";
console.log(el.ariaValueMin); // 2
```

仕様書
---

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

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

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


Element: pointerenter イベント - Web API

Element: pointerenter イベント
==========================

`pointerenter` イベントは、ポインティングデバイスが要素またはその子孫のヒットテスト領域に入ったときに発生します。ホバーに対応していない機器では `pointerdown` イベントの結果として移動した場合も含みます（`pointerdown` を参照）。

構文
--

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

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

onpointerenter = (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("pointerenter", (event) => {
  console.log("Pointer entered element");
});
```

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

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

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

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerenter-event |
| Pointer Events # dom-globaleventhandlers-onpointerenter |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`


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

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

`hasAttributeNS` は、現在の要素が指定された属性を持っているかどうかを示す論理値を返します。

構文
--

```js
hasAttributeNS(namespace,localName)
```

### 引数

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

論理値です。

### 例

```js
// 値をセットする前に属性が存在しているか検証します。
const d = document.getElementById("div1");
if (
  d.hasAttributeNS("http://www.mozilla.org/ns/specialspace/", "special-align")
) {
  d.setAttribute("align", "center");
}
```

メモ
--

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 # ref-for-dom-element-hasattributens① |

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

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


Element: ariaReadOnly プロパティ - Web API

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

**`ariaReadOnly`** は `Element` インターフェイスのプロパティで、要素が編集不可であるが、それ以外は操作可能であることを示す `aria-readonly` (en-US) 属性の値を反映します。

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

値
-

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

`"true"`

ユーザーは要素の値を変更できません。

`"false"`

ユーザーは要素の値を設定することができます。

例
-

この例では、ID が `txtBoxInput` の要素の `aria-readonly` 属性は "true" に設定されており、この入力は現在読み取り専用であることを示しています。`ariaReadOnly` を使用して、値を "false" に更新します。

```html
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
 role="textbox"
 id="txtBoxInput"
 contenteditable="true"
 aria-multiline="true"
 aria-labelledby="txtboxMultilineLabel"
 aria-readonly="true"></div>
```

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

仕様書
---

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

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

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

関連情報
----

* ARIA: textbox ロール


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

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

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

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

* Learn more
* See full compatibility
* Report feedback
`Element` インターフェイスの **`scrollIntoView()`** メソッドは、 `scrollIntoView()` が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。

構文
--

```js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
```

### 引数

`alignToTop` 省略可

論理値です。

* `true` の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 `scrollIntoViewOptions: {block: "start", inline: "nearest"}` に相当します。これが既定値です。
* `false` の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 `scrollIntoViewOptions: {block: "end", inline: "nearest"}` に相当します。

`scrollIntoViewOptions` 省略可

Experimental

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

`behavior` 省略可

スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。

* `smooth`: スクロールをスムーズなアニメーションで行う
* `instant`: スクロールを単一のジャンプで即座に行う
* `auto`: スクロールの動作を `scroll-behavior` の計算値によって指定する

`block` 省略可

 垂直方向の配置を定義します。
 `start`, `center`, `end`, `nearest` のいずれかです。既定値は `start` です。

`inline` 省略可

 水平方法の配置を定義します。
 `start`, `center`, `end`, `nearest` のいずれかです。既定値は `nearest` です。

### 返値

なし (`undefined`)。

例
-

```js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

メモ
--

他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。

仕様書
---

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

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

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

関連情報
----

* `Element.scrollIntoViewIfNeeded()`
Non-standard


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

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

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

構文
--

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

### 引数

`node1`, …, `nodeN`

挿入する一連の `Node` オブジェクトまたは文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。

例
-

### 要素の挿入

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

p.after(span);

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

### テキストの挿入

```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);

p.after("Text");

console.log(container.outerHTML);
// "<div><p></p>Text</div>"
```

### 要素とテキストの挿入

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

p.after(span, "Text");

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

仕様書
---

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

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

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

関連情報
----

* `Element.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
* `NodeList`


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

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

**`Element.append()`** メソッドは、一連の `Node` オブジェクトまたは文字列を `Element` の最後の子の後に挿入します。文字列は、等価な `Text` ノードとして挿入されます。

`Node.appendChild()` との違いは次の通りです。

* `Element.append()` は文字列も追加することができますが、`Node.appendChild()` は`Node` オブジェクトのみを受け付けます。
* `Element.append()` には返値がありませんが、`Node.appendChild()` は追加された `Node` オブジェクトを返します。
* `Element.append()` は複数のノードや文字列を追加することができますが、`Node.appendChild()` はノードを 1 つだけしか追加することができせん。
構文
--

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

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` オブジェクトまたは文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。

例
-

### 要素の追加

```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]
```

### テキストの追加

```js
let div = document.createElement("div");
div.append("Some text");

console.log(div.textContent); // "Some text"
```

### 要素とテキストの追加

```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]
```

### append メソッドはスコープが効かない

`append()` メソッドは `with` 文の中ではスコープが効きません。詳しくは `Symbol.unscopables` をご覧ください。

```js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined
```

仕様書
---

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

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

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

関連情報
----

* `Element.prepend()`
* `Node.appendChild()`
* `Element.after()`
* `Element.insertAdjacentElement()`
* `NodeList`


Element: ariaCurrent プロパティ - Web API

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

**`ariaCurrent`** は `Element` インターフェイスのプロパティで、`aria-current` (en-US) 属性の値を反映し、コンテナーや関連する要素の集合の中で現在の項目を表します。

値
-

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

`"page"`

設定するには、一連のページ内での現在のページを表します。

`"step"`

プロセス内の現在のステップを表します。

`"location"`

現在の位置、例えばパンくず階層内の現在のページを表します。

`"date"`

日付の集合の中における現在の日付を表します。

`"time"`

時刻の集合内の現在時刻を表します。

`"true"`

集合内の現在の項目を表します。

`"false"`

集合内の現在の項目を表しません。

例
-

この例では、リンクの集合がサイトナビゲーションに使用されています。`aria-current` 属性は現在のページを示します。値 `page` はスクリーンリーダーのアナウンスに組み込まれています。`ariaCurrent` を用いて、その値を更新することができます。

```html
<nav>
  <ul>
    <li><a id="link-home" href="/" aria-current="page">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Contact</a></li>
  </ul>
</nav>
```

```js
let el = document.getElementById("link-home");
console.log(el.ariaCurrent); // "page"
el.ariaCurrent = "tab";
console.log(el.ariaCurrent); // "tab"
```

仕様書
---

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

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

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

関連情報
----

* Using the aria-current attribute


Element: ariaDisabled プロパティ - Web API

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

**`ariaDisabled`** は `Element` インターフェイスのプロパティで、`aria-disabled` 属性の値を反映し、要素が知覚可能だが無効であり、編集や他の処理をすることはできないことを示します。

**メモ:** 可能であれば、`<input>` 要素に `type="button"` を使用するか、`<button>` 要素を使用してください。これらの要素は意味づけが組み込まれており、ARIA 属性を必要としないからです。

値
-

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

`"true"`

要素とフォーカス可能なすべての子孫は無効ですが、知覚可能であり、それらの値はユーザーによって変更できません。

`"false"`

要素が有効になっています。

例
-

この例では、ID が `saveChanges` である要素の `aria-disabled` 属性が "true" に設定されており、この入力が現在無効であることを示しています。`ariaDisabled` を使用して、値を "false" に更新します。

```html
<div id="saveChanges" tabindex="0" role="button" aria-disabled="true">Save</div>
```

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

仕様書
---

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

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

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


Element: paste イベント - Web API

Element: paste イベント
===================

**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。

カーソルが編集可能なコンテキストにある場合（`<textarea>` や `contenteditable` 属性が `true` の要素など）、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。

このイベントのハンドラーは、イベントの `clipboardData` プロパティにある `getData()` を呼び出すことでクリップボードの中身にアクセスすることができます。

既定の動作を上書きする場合（例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など）、イベントハンドラーで `event.preventDefault()` を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。

合成した `paste` イベントを構築して配信することができますが、文書の内容には影響しません。

構文
--

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

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

onpaste = (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;
}
```

#### JS

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

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

関連情報
----

* 関連イベント: `cut`, `copy`
* `Document` を対象としたこのイベント: `paste`
* `Window` を対象としたこのイベント: `paste`


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

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

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

**`setHTML()`** は `Element` インターフェイスのメソッドで、 HTML の文字列を解釈して無害化し、この要素のサブツリーとして DOM に挿入します。
 信頼できない HTML の文字列を挿入するために、 `Element.innerHTML` の代わりに使用してください。

 解釈処理では、現在の要素のコンテキストで無効な HTML 文字列の要素を削除し、無害化処理では、安全でない、あるいは不要な要素、属性、コメントを削除します。
 既定の `Sanitizer()` 設定では、`<script>` タグ、カスタム要素、コメントを含む XSS 関連の入力が取り除かれます。
 無害化の設定は `Sanitizer()` (en-US) コンストラクターのオプションを使用してカスタマイズすることができます。

**メモ:** 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに `Sanitizer.sanitizeFor()` (en-US) を使用してください。

構文
--

```js
setHTML(input, options)
```

### 引数

`input`

無害化する HTML を定義する文字列です。

`options` 省略可

オプションのオブジェクトで、以下のオプションの引数を持ちます。

`sanitizer`

`Sanitizer` (en-US) で、入力されたどの要素を無害化するかを定義します。
 指定されなかった場合、既定の `Sanitizer` (en-US) オブジェクトが使用されます。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

以下のコードは、 HTML の文字列を無害化して、 id が `target` である `Element` に挿入する方法を示しています。

```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // 無害化前の HTML の文字列
const sanitizer1 = new Sanitizer(); // 既定の無害化

// id が "target" の Element を取得し、無害化された文字列を設定します。
document
  .getElementById("target")
  .setHTML(unsanitized_string, { sanitizer: sanitizer1 });

// 結果 (文字列): "abc def"
```

**メモ:** この例では既定の無害化を使用しています。
 `Sanitizer` (en-US) コンストラクターで無害化のオプションを構成することができます。

仕様書
---

| Specification |
| --- |
| HTML Sanitizer API # dom-element-sethtml |

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

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

関連情報
----

* `Sanitizer.sanitizeFor()` (en-US)
* `HTML Sanitizer API`


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

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

**`toggleAttribute()`** は `Element` インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします（存在する場合は取り除き、存在しない場合は追加します）。

構文
--

```js
toggleAttribute(name)
toggleAttribute(name, force)
```

### 引数

`name`

文字列で、トグル切り替えしたい属性の名前を指定します。HTML 文書内の HTML 要素に対して `toggleAttribute()` が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。

`force` 省略可

論理値で、以下の効果があります。

* 指定されなかった場合、 `toggleAttribute` メソッドは `name` という名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。
* true であった場合、 `toggleAttribute` メソッドは、 `name` という名前の属性を追加します。
* false であった場合、 `toggleAttribute` メソッドは `name` という名前の属性を取り除きます。

### 返値

**`name`** という属性が存在する状態になれば `true`、そうでなければ `false` となります。

### 例外

`InvalidCharacterError` `DOMException`

指定された属性 `name` に、属性名として無効な文字が 1 文字以上含まれています。

例
-

次の例では、 `toggleAttribute()` を使って `<input>` の `disabled` 属性をトグル切り替えしています。

### HTML

```html
<input value="text" /> <button>toggleAttribute("disabled")</button>
```

### JavaScript

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

button.addEventListener("click", () => {
  input.toggleAttribute("disabled");
});
```

### 結果

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 # ref-for-dom-element-toggleattribute① |

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

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


Element: mouseover イベント - Web API

Element: mouseover イベント
=======================

**`mouseover`** イベントは、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに、その要素 (`Element`) に発行されます。

構文
--

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

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

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

例
-

以下の例は、`mouseover` と `mouseenter` の各イベントの違いを説明しています。

### HTML

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

### JavaScript

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

// このハンドラーは、カーソルが順序なしリストの上を移動した
// ときに1度だけ実行されます
test.addEventListener(
  "mouseenter",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

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

// このハンドラーは異なるリスト項目の上を移動するごとに
// 実行されます
test.addEventListener(
  "mouseover",
  (event) => {
    // mouseover の対象を強調
    event.target.style.color = "orange";

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

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-mouseover |
| HTML Standard # handler-onmouseover |

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

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

Element: beforescriptexecute イベント
=================================

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

**警告:** このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。

**`beforescriptexecute`** イベントは、スクリプトが実行しようとされているときに発生します。このイベントをキャンセルすると、スクリプトの実行が阻止されます。

これは Gecko (Firefox) 固有のイベントです。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* `afterscriptexecute` イベント