recursal/MDN huggingface dataset:
Element: previousElementSibling プロパティ
=====================================

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

値
-

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

例
-


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

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


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

Siblings of div-03

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

仕様書
---

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

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

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

関連情報
----

* `Element.nextElementSibling`
Element: touchstart イベント
========================

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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`TouchEvent.altKey` 読取専用 

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

`TouchEvent.changedTouches` 読取専用 

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

`TouchEvent.ctrlKey` 読取専用 

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

`TouchEvent.metaKey` 読取専用 

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

`TouchEvent.shiftKey` 読取専用 

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

`TouchEvent.targetTouches` 読取専用 

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

`TouchEvent.touches` 読取専用 

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

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

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

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

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

例
-

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

仕様書
---

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

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

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

関連情報
----

* タッチイベント
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 プロパティ
=======================

**`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 プロパティ
=================

**`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: 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 イベント
======================

`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() メソッド
===================================

**`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: 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() メソッド
======================

**`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 プロパティ
============================

**`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() メソッド
===============================

`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 イベント
==============================

**`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 プロパティ
===========================

**`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 プロパティ
==========================

**`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 ロール