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

**`scrollend`** イベントは、要素のスクロールが完了した時に発行されます。
 スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。

 スクロール位置の更新には、マウスホイールのスムーズなスクロールや瞬間的なスクロール、キーボードスクロール、スクロールスナップイベント、他にもスクロール位置を更新させるAPIや ジェスチャーなどがあります。
 タッチパンやトラックパッドのスクロールなどのユーザージェスチャーは、ポインターまたはキーが離されるまで完了しません。
 スクロール位置が変化しなかった場合、scrollend イベントは発行されません。

文書内のスクロールが完了した時を検出したい場合は、 `Document: scrollend イベント`を参照してください。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

### `scrollend` をイベントリスナーで使用

次の例では、`scrollend` イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。
```

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}
```



```html
<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.innerHTML = "Scroll event fired, waiting for scrollend...";
});

element.addEventListener("scrollend", (event) => {
  output.innerHTML = "Scrollend event fired!";
});
```

### `onscrollend` イベントハンドラープロパティの使用

次の例では、`onscrollend` イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。
```

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}
```



```html
<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.innerHTML = "Element scroll event fired, waiting for scrollend...";
};

element.onscrollend = (event) => {
  output.innerHTML = "Element scrollend event fired!";
};
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scrollend |
| HTML Standard # handler-onscrollend |

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

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

関連情報
----

* Element の `scroll` イベント
* Document の `scrollend` イベント
* Document の `scroll` イベント
Element: className プロパティ
========================

**`className`** は `Element` インターフェイスのプロパティで、この要素の `class` 属性の値を取得したり設定したりします。

値
-

文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。

例
-


```js
const el = document.getElementById("item");
el.className = el.className === "active" ? "inactive" : "active";
```

メモ
--

 このプロパティでは、 `className` という名前が `class` の代わりに使用されています。
 これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。

`className` は `SVGAnimatedString` (en-US) のインスタンスにも、`element` が `SVGElement` であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は `Element.getAttribute` や `Element.setAttribute` を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の `class` 属性が空であった場合、`Element.getAttribute` は`""` ではなく `null` を返すことに注意してください。


```js
elm.setAttribute("class", elm.getAttribute("class"));
```


**メモ:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。

仕様書
---

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

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

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

関連情報
----

* `element.classList`
Element: pointerrawupdate イベント
==============================

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

**`pointerrawupdate`** は `PointerEvent` で、ポインターに `pointerdown` または `pointerup` イベントが発生しない変化が起きたときに発生します。
 これらのプロパティの一覧は `pointermove` を参照してください。

 イベントループ内で配信されていない、同じポインター ID を持つ別の `pointerrawupdate` イベントが既に存在する場合、`pointerrawupdate` イベントは併合イベントになる可能性があります。
 併合イベントの詳細については、`PointerEvent.getCoalescedEvents` のドキュメントを参照してください。

`pointerrawupdate` イベントのリスナーは、JavaScript が高頻度のイベントを必要とし、それらが配信されると同時に素早く処理できる場合にのみ追加すべきです。
 ほとんどの用途では、`pointerrawupdate` イベント用のリスナーを追加することで、パフォーマンスに影響が出る可能性があるため、他のポインターイベント型で十分です。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

このイベントは、`PointerEvent` インターフェイスのプロパティを実装しています。

例
-


```js
addEventListener("pointerrawupdate", (event) => {
  if (event.getCoalescedEvents && event.getCoalescedEvents().length > 1) {
    console.log("Coalesced events:", event.getCoalescedEvents().length);
    for (let coalescedEvent of event.getCoalescedEvents()) {
      // 併合されたイベントに対して何かをする
    }
  } else {
    // イベントに対して何かをする
    console.log("Raw event", event);
  }
});
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerrawupdate-event |
| Pointer Events # dom-globaleventhandlers-onpointerrawupdate |

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

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

関連情報
----

* Related events
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointerout`
    + `pointerleave`
Element: prepend() メソッド
=======================

**`Element.prepend()`** メソッドは、一連の `Node` または文字列をこの `Element` の最初の子の前に挿入します。文字列は、同等の `Text` ノードとして挿入されます。

構文
--


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

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` または文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードを階層の指定された箇所に追加することができない場合に発生します。

例
-

### 要素の前に追加


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

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

### テキストの前に追加


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

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

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


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

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

### prepend() メソッドはスコープが効かない

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


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

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

仕様書
---

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

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

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

関連情報
----

* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.before()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element: hasAttributes() メソッド
=============================

**`hasAttributes()`** は `Element` インターフェイスのメソッドで、現在の要素が属性を持っているか否かを論理値で返します。

構文
--


```js
hasAttributes()
```

### 引数

なし。

### 返値

論理値です。

例
-


```js
let foo = document.getElementById("foo");
if (foo.hasAttributes()) {
  // Do something with 'foo.attributes'
}
```

仕様書
---

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

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

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

関連情報
----

* `Element.attributes`
* `Element.hasAttribute()`
Element: DOMMouseScroll イベント
============================

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

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

DOM の `DOMMouseScroll` イベントは、マウスホイールなどが操作され、前回のイベントから 1 行または 1 ページ以上スクロールした場合に非同期に発生します。このイベントは `MouseScrollEvent` インターフェイスで表されます。このイベントは Firefox でのみ実装されています。代わりに、標準の `wheel` イベントを使用してください。

もしマウスホイールイベントの既定の動作を防ぎたいのであれば、Gecko 上でこのイベントだけを処理すればよいというわけではありません。なぜなら、ネイティブのマウスホイールイベントによるスクロール量が 1 行未満（システム設定がページスクロールの場合は 1 ページ未満）である場合、このイベントが発生しなくても他のマウスホイールイベントが発生する可能性があるからです。

Gecko 17 (Firefox 17) 以降では、ネイティブイベントごとに発生する `wheel` イベントの `preventDefault()` を呼び出す必要があります。

可能であれば、標準化された `wheel` イベントを使用してください。

構文
--

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


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

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

イベント型
-----

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

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

このイベントには、標準的なイベントに加えて、1 つだけ追加のプロパティがあります。

### detail

`detail` プロパティはスクロールをより正確に記述し、正の値は下方向へのスクロールを、負の値は上方向へのスクロールを示します。

イベントがページ単位での上スクロールを表している場合、`detail` の値は -32768 になります。イベントがページ単位での下スクロールを表す場合、値は +32768 になります。その他の値はスクロールする行数を表し、その方向は値の符号で示されます。

**メモ:** 信頼できるイベントは、`detail` に 0 を指定して送信されることはありません。

信頼できるイベントは 0 では発生しません。

**メモ:** プラットフォームのネイティブマウスホイールイベントがピクセル単位のスクロール距離しか提供していない場合、またはユーザーが速度をカスタマイズできる場合、値はイベントのターゲットの最も近いスクロール可能な祖先要素の行の高さを使用して計算されます。その要素のフォントサイズが `mousewheel.min_line_scroll_amount` よりも小さい場合、その環境設定の値が行の高さとして使用されます。

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

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

関連情報
----

* `MouseScrollEvent`
* Gecko の古いピクセルスクロールイベント: `MozMousePixelScroll`
* Gecko 以外のブラウザーの古いマウスホイールイベント: `mousewheel`
* 標準化されたホイールイベント: `wheel`
Element: blur イベント
==================

**`blur`** イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する `focusout` イベントはバブリングします。

 要素は他の要素が選択されるとフォーカスを失います。
 また、`hidden`のようなフォーカスを許可しないスタイルが適用された場合や、文書から要素が除去された場合もフォーカスを失います。どちらの場合も、フォーカスは `body` 要素（ビューポート）へ移動します。
 なお、フォーカスされた要素が文書から除去された場合には `blur` は発生しないことに注意してください。

`blur` の反対は `focus` イベントであり、こちらは要素がフォーカスを得たときに発生します。

`blur` イベントはキャンセル不可です。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`FocusEvent.relatedTarget`

もしあれば、フォーカスを受け取った要素。

例
-

### 簡単な例

#### HTML


```html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


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

password.addEventListener("focus", (event) => {
  event.target.style.background = "pink";
});

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});
```


#### 結果

### イベント委譲

このイベントのイベント委譲を実装する方法は 2 つあります。`focusout` イベントを使用するか、`addEventListener()` の `useCapture` 引数に `true` を設定するかです。

#### HTML


```html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


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

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);
```


#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

このイベントが処理されている間、`Document.activeElement` の値はブラウザーによって異なります (Firefox バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。

関連情報
----

* `HTMLElement.blur()` メソッド
* 関連イベント: `focus`, `focusin`, `focusout`
* `Window` を対象としたこのイベント: `blur` イベント
* Focusing: focus/blur
Element: ariaRequired プロパティ
===========================

**`ariaRequired`** は `Element` インターフェイスのプロパティで、フォームを送信する前にユーザー入力が必要であることを示す `aria-required` 属性の値を反映します。

**メモ:** 使用可能な場合は、HTML の `<input>` 要素で `type="text"` と `<textarea>` を使用してください。

値
-

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

`"true"`

ユーザーはフォームを送信する前に要素に入力する必要があります。

`"false"`

フォームを送信するためにユーザー入力は必要ありません。

例
-

この例では、`txtBoxInput` という ID を持つ要素の `aria-required` 属性は "true" に設定されており、この入力が完了しなければならないことを示しています。`ariaRequired` を使用して値を "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.ariaRequired); // "true"
el.ariaRequired = "false";
console.log(el.ariaRequired); // "false"
```

仕様書
---

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

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

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

関連情報
----

* ARIA: textbox ロール
Element: part プロパティ
===================

**`part`** は `Element` インターフェイスのプロパティで、この要素の部品識別子（すなわち `part` 属性を使用して設定されたもの）を `DOMTokenList` で返します。これらはシャドウ DOM の部品を `::part` 擬似要素でスタイル付けするために使用することができます。

値
-

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

例
-

以下は、 shadow-part の例から抜粋したものです。ここでは、 `part` 属性を使用してシャドウ部品を見つけ、 `part` プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。


```js
const tabs = [];
const children = this.shadowRoot.children;

for (const elem of children) {
  if (elem.getAttribute("part")) {
    tabs.push(elem);
  }
}

tabs.forEach((tab) => {
  tab.addEventListener("click", (e) => {
    tabs.forEach((tab) => {
      tab.part = "tab";
    });
    e.target.part = "tab active";
  });

  console.log(tab.part);
});
```

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # idl |

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

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

関連情報
----

* `::part`
* part
HTMLElement: beforeinput イベント
=============================

DOM の **`beforeinput`** イベントは、`<input>` または `<textarea>` 要素の値が変更されようとしているときに発生します。 このイベントは、`contenteditable` が有効になっている要素、および `designMode` がオンになっている要素にも適用されます。

これにより、ブラウザーが DOM ツリーを変更する前に、ウェブアプリがテキスト編集の動作を上書きすることができ、入力イベントをより詳細に制御してパフォーマンスを向上させることができます。

`contenteditable` や `designMode` の場合、イベントのターゲットは**編集ホスト**です。これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

構文
--

このイベント名を `addEventListener()` などのメソッドで使うか、イベントハンドラープロパティを代入するかします。


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

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

イベント型
-----

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

Event

UIEvent

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

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

`InputEvent.data` 読取専用 

挿入された文字を文字列で返します。変更によって挿入されたテキストがない場合は、空文字列になることがあります（文字を削除した場合など）。

`InputEvent.dataTransfer` 読取専用 

編集可能なコンテンツに追加またはされるリッチテキストまたはプレーンテキストデータに関する情報が入った `DataTransfer` オブジェクトを返します。

`InputEvent.inputType` 読取専用 

編集可能なコンテンツの変更の種類、例えばテキストの挿入、削除、整形などを返します。入力型の完全なリストについては、プロパティページを参照してください。

`InputEvent.isComposing` 読取専用 

論理値で、このイベントが `compositionstart` の後、`compositionend` の前に発生したかどうかを示します。

例
-

### 機能の検出

以下の関数は、 `beforeinput` および `getTargetRanges` に対応していれば true を返します。


```js
function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}
```

### 単純なロガー

この例では、 `<input>` 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録します。

#### HTML


```html
<input placeholder="テキストを入力" name="name" />
<p id="values"></p>
```


#### JavaScript


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

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 関連イベント: `input`
Element: clientHeight プロパティ
===========================

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

`clientHeight` は CSS `height` + CSS `padding` - 水平スクロールバーの高さ (もしあれば) として計算できます。

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

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

値
-

数値です。

例
-

![clientHeight プロパティが高さとパディングを考慮して要素の内側の高さを決定する方法です。](/ja/docs/Web/API/Element/clientHeight/dimensions-client.png)

仕様書
---

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

### メモ

`clientHeight` は Internet Explorer オブジェクトモデルで導入されたプロパティです。

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

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

関連情報
----

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* 要素の寸法の決定
HTMLElement: input イベント
=======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`input`** イベントは、 `<input>`, `<select>`, `<textarea>` の各要素の値 (`value`) が変更されたときに発生します。

このイベントは、 `contenteditable` を有効にした要素、 `designMode` を有効にしたすべての要素にも適用されます。 `contenteditable` や `designMode` の場合、イベントのターゲットは*編集ホスト*です。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。

`<input>` 要素が `type=checkbox` または `type=radio` 型であった場合、 HTML Living Standard 仕様書によれば、 `input` イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに `change` イベントを使用するようにするかしてください。

`<textarea>` およびテキスト入力を受け入れる `<input>` 要素（`type=text`、`type=tel`、など）では、インターフェイスは `InputEvent` です。それ以外の場合は、インターフェイスは `Event` になります。

**メモ:** `input` イベントは、要素の `value` の値が変化するたびに発生します。これは、 `change` イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

この例では、 `<input>` 要素の値が変化するたびに値をログ出力します。

### HTML


```html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
```

### JavaScript


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

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

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

関連情報
----

* 関連イベント:
    + `beforeinput`
    + `change`
    + `invalid`
Element: nextElementSibling プロパティ
=================================

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

値
-

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

例
-


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

<script>
 let el = document.getElementById("div-01").nextElementSibling;
 console.log("Siblings of div-01:");
 while (el) {
 console.log(el.nodeName);
 el = el.nextElementSibling;
 }
</script>
```


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

Siblings of div-01:
DIV
SCRIPT
```

仕様書
---

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

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

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

関連情報
----

* `Element.previousElementSibling`
Element: matches() メソッド
=======================

**`matches()`** は `Element` インターフェイスのメソッドで、この要素が指定した CSS セレクター によって選択されるかどうかを検査します。

構文
--


```js
matches(selectors)
```

### 引数

`selectors`

`Element` を検査するために有効な CSS セレクターを格納した文字列です。

### 返値

`Element` が `selectors` に一致すれば `true` です。そうでなければ `false` です。

### 例外

`SyntaxError` `DOMException`

`selectors` が CSS のセレクターリストとして解釈できない場合に発生します。

例
-

### HTML


```html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>
```

### JavaScript


```js
const birds = document.querySelectorAll("li");

for (const bird of birds) {
  if (bird.matches(".endangered")) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}
```


要素が実際に値 `endangered` 持つ `class` 属性を持つので、これは、コンソールのログに "The Philippine eagle is endangered!" と表示されます。

仕様書
---

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

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

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

関連情報
----

* CSS セレクターモジュール
* セレクターを使用するその他のメソッド: `element.querySelector()` および `element.closest()`
Element: ariaColIndex プロパティ
===========================

**`ariaColIndex`** は `Element` インターフェイスのプロパティで、`aria-colindex` (en-US) 属性の値を反映し、表、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスや位置を定義します。

値
-

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

例
-

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


```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.ariaColIndex); // 1
el.ariaColIndex = "2";
console.log(el.ariaColIndex); // 2
```

仕様書
---

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

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

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

関連情報
----

* ARIA: table ロール