recursal/MDN huggingface dataset:
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 プロパティ
=========================

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

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

たまたま、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 プロパティ
===========================

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

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

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

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

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

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

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

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

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

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

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

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

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