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

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

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

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

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


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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`KeyboardEvent.altKey` 読取専用 

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

`KeyboardEvent.code` 読取専用 

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

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

`KeyboardEvent.ctrlKey` 読取専用 

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

`KeyboardEvent.isComposing` 読取専用 

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

`KeyboardEvent.key` 読取専用 

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

`KeyboardEvent.locale` 読取専用 

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

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

`KeyboardEvent.location` 読取専用 

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

`KeyboardEvent.metaKey` 読取専用 

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

`KeyboardEvent.repeat` 読取専用 

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

`KeyboardEvent.shiftKey` 読取専用 

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

例
-

### addEventListener による keyup の例

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


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



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

input.addEventListener("keyup", logKey);

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

### onkeyup による同等の例


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

仕様書
---

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

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

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

関連情報
----

* `input`
* `keydown`
* `keypress`
Element: fullscreenerror イベント
=============================

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

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

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

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


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

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

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

requestor.requestFullscreen();
```

仕様書
---

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

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

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

関連情報
----

* `fullscreenchange`
* 全画面 API
* 全画面 API のガイド
Element: insertAdjacentElement() メソッド
=====================================

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

構文
--


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

### 引数

`position`

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

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

`element`

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

### 返値

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

### 例外

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


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


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

例
-


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

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


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

仕様書
---

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

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

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

関連情報
----

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()` (`beforebegin` と同様で、異なる引数)
* `Node.appendChild()` (`beforeend` と同様の効果)
Element: getAttributeNodeNS() メソッド
==================================

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

構文
--


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

### 引数

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

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

メモ
--

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

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

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

仕様書
---

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

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

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

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

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

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

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

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

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

値
-

数値です。

例
-

### 要素のスクロール

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

#### HTML


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

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


#### CSS


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

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


#### JavaScript


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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

* MSDN's Measuring Element Dimension and Location
* `Element.scrollLeft`
* `Element.scrollTo()`
Element: attributes プロパティ
=========================

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

値
-

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

例
-

### 基本的な例


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

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

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


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

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

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

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`CompositionEvent.data` 読取専用 

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

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

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

例
-


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

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

### 実行例

#### HTML


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

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


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

.control {
  grid-area: control;
}

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

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

label,
button {
  display: block;
}

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

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


#### JS


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

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

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

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


#### 結果

仕様書
---

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

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

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

関連情報
----

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

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

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

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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`MouseEvent.altKey` 読取専用 

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

`MouseEvent.button` 読取専用 

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

`MouseEvent.buttons` 読取専用 

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

`MouseEvent.clientX` 読取専用 

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

`MouseEvent.clientY` 読取専用 

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

`MouseEvent.ctrlKey` 読取専用 

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

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

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

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

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

`MouseEvent.metaKey` 読取専用 

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

`MouseEvent.movementX` 読取専用 

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

`MouseEvent.movementY` 読取専用 

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

`MouseEvent.offsetX` 読取専用 

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

`MouseEvent.offsetY` 読取専用 

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

`MouseEvent.pageX` 読取専用 

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

`MouseEvent.pageY` 読取専用 

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

`MouseEvent.relatedTarget` 読取専用 

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

`MouseEvent.screenX` 読取専用 

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

`MouseEvent.screenY` 読取専用 

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

`MouseEvent.shiftKey` 読取専用 

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

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

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


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

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

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名です。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名です。

仕様書
---

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

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

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

関連情報
----

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

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

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

構文
--

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


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

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

イベント型
-----

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

Event

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

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

`TransitionEvent.propertyName` 読取専用 

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

`TransitionEvent.elapsedTime` 読取専用 

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

`TransitionEvent.pseudoElement` 読取専用 

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

例
-

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


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


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


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

### ライブ例

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


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



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

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


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


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

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

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

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


違いは次の通りです。

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

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

仕様書
---

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

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

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

関連情報
----

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

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

値
-

文字列です。

例
-

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


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



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

仕様書
---

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

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

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

* ARIA: table ロール
Element: ariaChecked プロパティ
==========================

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

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

値
-

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

`"true"`

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

`"mixed"`

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

`"false"`

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

`"undefined"`

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

例
-

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


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



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

仕様書
---

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

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

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

関連情報
----

* ARIA: checkbox ロール
Element: setAttributeNodeNS() メソッド
==================================

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

### 構文


```js
setAttributeNodeNS(attributeNode)
```

### 引数

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

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

例
-


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

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

メモ
--

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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