---
title: HTMLElement
slug: Web/API/HTMLElement
tags:
  - API
  - HTML DOM
  - HTMLElement
  - Interface
  - NeedsNewLayout
  - Reference
translation_of: Web/API/HTMLElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLElement</code></strong> インターフェイスは、任意の <a href="/ja/docs/Web/HTML">HTML</a> 要素を表します。要素によってはこのインターフェイスで直接実装しており、その他の要素はこれを継承したインターフェイスを通して実装されています。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties">プロパティ</h2>

<p><em>親である {{DOMxRef("Element")}} からプロパティを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} からプロパティを実装しています。</em></p>

<dl>
 <dt>{{DOMxRef("HTMLElement.accessKey")}}</dt>
 <dd>要素に割り当てられたアクセスキーを表す {{DOMxRef("DOMString")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.accessKeyLabel")}} {{ReadOnlyInline}}</dt>
 <dd>要素に割り当てられたアクセスキーを含む {{DOMxRef("DOMString")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.attributeStyleMap")}} {{ReadOnlyInline}}</dt>
 <dd>{{DOMxRef("StylePropertyMap")}} で、その要素の {{htmlattrxref("style")}} 属性の宣言を表します。</dd>
 <dt>{{DOMxRef("HTMLElement.contentEditable")}}</dt>
 <dd>{{DOMxRef("DOMString")}}。この文字列が <code>true</code> の場合は要素が編集可能、<code>false</code> の場合は編集不可です。</dd>
 <dt>{{DOMxRef("HTMLElement.isContentEditable")}} {{ReadOnlyInline}}</dt>
 <dd>要素のコンテンツが編集可能か否かを示す {{DOMxRef("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.contextMenu")}} {{Deprecated_Inline}}</dt>
 <dd>要素に割り当てたコンテキストメニューを表す {{DOMxRef("HTMLMenuElement")}} です。<code>null</code> になる可能性があります。</dd>
 <dt>{{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}}</dt>
 <dd>要素の <a href="docs/Web/Guide/HTML/Using_data_attributes">カスタムデータ属性</a> (<code>data-*</code>) を読み書きできるスクリプトの {{DOMxRef("DOMStringMap")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.dir")}}</dt>
 <dd>要素の記述方向を表す <code>dir</code> グローバル属性を反映する {{DOMxRef("DOMString")}} です。可能な値は、<code>"ltr"</code> および <code>"rtl"</code>、<code>"auto"</code> です。</dd>
 <dt>{{DOMxRef("HTMLElement.draggable")}}</dt>
 <dd>要素がドラッグ可能かどうかを示す {{jsxref("Boolean")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
 <dd><code>dropzone</code> グローバル属性を反映し、要素のドロップ操作に関する動作を記述する {{DOMxRef("DOMSettableTokenList")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.hidden")}}</dt>
 <dd>要素が hidden か否かを示す {{jsxref("Boolean")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.inert")}}</dt>
 <dd>{{JSxRef("Boolean")}} で、ユーザー操作イベント、ページ内テキスト検索 (「ページ内を検索」)、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。</dd>
 <dt>{{DOMxRef("HTMLElement.innerText")}}</dt>
 <dd>ノードやその子孫の「描画される」テキストの内容を表します。ゲッターとしては、およそユーザーがカーソルで要素の内容を選択してからクリップボードにコピーしたときのテキストに相当します。</dd>
 <dt>{{DOMxRef("HTMLElement.itemScope")}} {{Experimental_Inline}}</dt>
 <dd>アイテムのスコープを表す {{jsxref("Boolean")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.itemType")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.itemId")}} {{Experimental_Inline}}</dt>
 <dd>アイテム ID を表す {{DOMxRef("DOMString")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.itemRef")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.itemProp")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.itemValue")}} {{Experimental_Inline}}</dt>
 <dd>アイテムの値を表す {{jsxref("Object")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.lang")}}</dt>
 <dd>要素の属性およびテキスト、要素のコンテンツの言語を表す {{DOMxRef("DOMString")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.noModule")}}</dt>
 <dd>{{JSxRef("Boolean")}} であり、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。</dd>
 <dt>{{DOMxRef("HTMLElement.nonce")}}</dt>
 <dd>指定されたフェッチが実行を許可されるかどうかを判断するために Content Security Policy が使用する、一度だけ使用される暗号学的な数値を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.offsetHeight")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>レイアウトに対して相対的な要素の高さを含む <code>double</code> 値を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.offsetLeft")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>この要素の左境界線からその <code>offsetParent</code> の左境界線までの距離である <code>double</code> 値を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.offsetParent")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>現在計算済みのすべてのオフセット計算値からの要素である {{DOMxRef("Element")}} を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.offsetTop")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>要素の上境界線からその <code>offsetParent</code> の上境界線までの距離である <code>double</code> 値を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.offsetWidth")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>レイアウトに対して相対的な要素の幅を含む <code>double</code> 値を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.properties")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>{{DOMxRef("HTMLPropertiesCollection")}}… を返します。</dd>
 <dt>{{DOMxRef("HTMLElement.spellcheck")}}</dt>
 <dd><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck">スペルチェック</a> を制御する {{jsxref("Boolean")}} です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。</dd>
 <dt>{{DOMxRef("HTMLElement.style")}}</dt>
 <dd>要素の style 属性の宣言を表すオブジェクトである {{DOMxRef("CSSStyleDeclaration")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.tabIndex")}}</dt>
 <dd>タブ順内の要素の位置を表す <code>long</code> 値です。</dd>
 <dt>{{DOMxRef("HTMLElement.title")}}</dt>
 <dd>マウスポインターが要素上に置かれた時に現れるポップアップボックスのテキストを含む {{DOMxRef("DOMString")}} です。</dd>
 <dt>{{DOMxRef("HTMLElement.translate")}} {{Experimental_Inline}}</dt>
 <dd>translation を表す {{jsxref("Boolean")}} です。</dd>
</dl>

<h3 id="Event_handlers">イベントハンドラー</h3>

<p>ほとんどのイベントハンドラープロパティは、<code>onXYZ</code> の形であり、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} の何れかのインターフェイスで定義されていて、<code>HTMLElement</code> により実装されています。さらに <code>HTMLElement</code> 固有のイベントプロパティがいくつかあります。</p>

<dl>
 <dt>{{DOMxRef("HTMLElement.oncopy")}} {{Non-standard_Inline}}</dt>
 <dd><code>copy</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
 <dt>{{DOMxRef("HTMLElement.oncut")}} {{Non-standard_Inline}}</dt>
 <dd><code>cut</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
 <dt>{{DOMxRef("HTMLElement.onpaste")}} {{Non-standard_Inline}}</dt>
 <dd><code>paste</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchstart")}} {{Non-standard_Inline}}</dt>
 <dd>{{domxref("Element/touchstart_event", "touchstart")}} イベントのイベントハンドリングコードを返します。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchend")}} {{Non-standard_Inline}}</dt>
 <dd>{{domxref("Element/touchend_event", "touchend")}} イベントのイベントハンドリングコードを返します。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchmove")}} {{Non-standard_Inline}}</dt>
 <dd>{{domxref("Element/touchmove_event", "touchmove")}} イベントのイベントハンドリングコードを返します。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchenter")}} {{Non-standard_Inline}}</dt>
 <dd>{{event("touchenter")}} イベントのイベントハンドリングコードを返します。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchleave")}} {{Non-standard_Inline}}</dt>
 <dd>{{event("touchleave")}} イベントのイベントハンドリングコードを返します。</dd>
 <dt>{{DOMxRef("TouchEventHandlers.ontouchcancel")}} {{Non-standard_Inline}}</dt>
 <dd>{{domxref("Element/touchcancel_event", "touchcancel")}} イベントのイベントハンドリングコードを返します。</dd>
</dl>

<h2 id="Methods">メソッド</h2>

<p><em>親である {{DOMxRef("Element")}} からメソッドを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} からのメソッドを実装しています。</em></p>

<dl>
 <dt>{{DOMxRef("HTMLElement.attachInternals()")}} {{Experimental_Inline}}</dt>
 <dd>{{DOMxRef("ElementInternals")}} のインスタンスをカスタム要素に割り当てます。</dd>
 <dt>{{DOMxRef("HTMLElement.blur()")}}</dt>
 <dd>現在フォーカスされている要素からキーボードフォーカスを外します。</dd>
 <dt>{{DOMxRef("HTMLElement.click()")}}</dt>
 <dd>要素にマウスクリックイベントを送信します。</dd>
 <dt>{{DOMxRef("HTMLElement.focus()")}}</dt>
 <dd>要素に現在のキーボードフォーカスを当てます。</dd>
 <dt>{{DOMxRef("HTMLElement.forceSpellCheck()")}} {{Experimental_Inline}}</dt>
 <dd>要素上のコンテンツに対してスペルチェックを実行します。</dd>
</dl>

<h2 id="Events">イベント</h2>

<p>これらのイベントを待ち受けするには <code>addEventListener()</code> を用いるか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかしてください。</p>

<dl>
 <dt>{{domxref("HTMLElement/invalid_event", "invalid")}}</dt>
 <dd>制約の検証で、要素が制約を満たさなかった場合に発行されます。<br>
 {{domxref("GlobalEventHandlers/oninvalid", "oninvalid")}} プロパティからも利用できます。</dd>
</dl>

<h3 id="Animation_events">アニメーションイベント</h3>

<dl>
 <dt>{{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</dt>
 <dd>アニメーションが予期せず中断されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/animationend_event", "animationend")}}</dt>
 <dd>アニメーションが正常に完了したときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</dt>
 <dd>アニメーションが 1 回分完了したときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/animationstart_event", "animationstart")}}</dt>
 <dd>アニメーションが開始されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。</dd>
</dl>

<h3 id="Input_events">入力イベント</h3>

<dl>
 <dt>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</dt>
 <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素が変更される前に発行されます。</dd>
 <dt>{{domxref("HTMLElement/input_event", "input")}}</dt>
 <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の <code>value</code> が変更されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/oninput", "oninput")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/change_event", "change")}}</dt>
 <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の <code>value</code> が変更され、ユーザーが確定したときに発行されます。{{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、<code>change</code> イベントは要素の <code>value</code> が変更されるたびに発行されるわけではありません。</dd>
</dl>

<h3 id="Pointer_events">ポインターイベント</h3>

<dl>
 <dt>{{domxref("HTMLElement/gotpointercapture_event", "gotpointercapture")}}</dt>
 <dd>{{domxref("Element/setPointerCapture", "setPointerCapture()")}} を用いて要素がポインターをキャプチャしたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/lostpointercapture_event", "lostpointercapture")}}</dt>
 <dd><a href="/ja/docs/Web/API/Pointer_events#pointer_capture">キャプチャされたポインター</a>が解放されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointercancel_event", "pointercancel")}}</dt>
 <dd>ポインターイベントがキャンセルされたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerdown_event", "pointerdown")}}</dt>
 <dd>ポインターがアクティブになったときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerenter_event", "pointerenter")}}</dt>
 <dd>ポインターが要素またはその子孫の一つのヒットテスト境界に入ったときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerleave_event", "pointerleave")}}</dt>
 <dd>ポインターが要素のヒットテスト境界から出たときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointermove_event", "pointermove")}}</dt>
 <dd>ポインターの座標が変化したときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerout_event", "pointerout")}}</dt>
 <dd>ポインターが要素の<em>ヒットテスト</em>境界を (他の理由で) 出たときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerover_event", "pointerover")}}</dt>
 <dd>ポインターが要素のヒットテスト境界に入ったときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/pointerup_event", "pointerup")}}</dt>
 <dd>ポインターがアクティブではなくなったときに発行されます。<br>
 {{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} プロパティからも利用できます。</dd>
</dl>

<h3 id="Transition_events">トランジションイベント</h3>

<dl>
 <dt>{{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</dt>
 <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/transitionend_event", "transitionend")}}</dt>
 <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が完了したときに発行されます。<br>
 {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/transitionrun_event", "transitionrun")}}</dt>
 <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a> が最初に作成されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("HTMLElement/transitionstart_event", "transitionstart")}}</dt>
 <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたときに発行されます。<br>
 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。</dd>
</dl>

<h2 id="Specifications">仕様書</h2>

{{Specifications}}

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat}}</p>

<h2 id="See_also">関連情報</h2>

<ul>
 <li>{{DOMxRef("Element")}}</li>
</ul>