HTMLElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

HTMLElement インターフェイスは、任意のHTML 要素を表します。要素によってはこのインターフェイスで直接実装されていたり、これを継承したインターフェイスを通して実装されていたりします。

インスタンスプロパティ

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

HTMLElement.accessKey: 要素に割り当てられたアクセスキーを表す文字列です。
HTMLElement.accessKeyLabel読取専用: 要素に割り当てられたアクセスキーを含む文字列を返します。
HTMLElement.anchorElement読取専用非標準 Experimental: 要素のアンカー要素への参照を返すか、アンカー要素がない場合はnull を返します。
HTMLElement.attributeStyleMap読取専用: StylePropertyMap で、その要素のstyle 属性の宣言を表します。
HTMLElement.autocapitalize: ユーザー入力に対する要素の大文字小文字の動作を表す文字列。有効な値はnone、off、on、characters、words、sentences　です。
HTMLElement.autofocus: 論理値で、HTML のautofocus グローバル属性を反映し、ページが読み込まれたとき、または<dialog> 要素やポップオーバー属性が設定されている要素内の要素に指定した場合、ダイアログやポップオーバーが表示されたときに、コントロールにフォーカスを当てるかどうかを示します。
HTMLElement.autocorrect: ユーザーが入力したテキストを自動的に修正すべきかどうかを表します。これは HTML のautocorrect グローバル属性を反映します。
HTMLElement.contentEditable: 文字列で、true の場合は要素が編集可能、false の場合は編集不可であることを表します。
HTMLElement.dataset読取専用: DOMStringMap で、スクリプトが読み書きできる要素のカスタムデータ属性 (data-*) を表します。
HTMLElement.dir: 文字列で、要素の書字方向を表すdir グローバル属性を反映します。利用可能な値は、"ltr" および"rtl"、"auto" です。
HTMLElement.draggable: 論理値で、要素がドラッグ可能かどうかを示します。
HTMLElement.editContextExperimental: この要素に関連付けられた EditContext を返します。なければnull を返します。
HTMLElement.enterKeyHint: 文字列で、仮想キーボードの Enter キーに表示するアクションラベル（またはアイコン）を定義します。
HTMLElement.hidden: 文字列または論理値で、この要素のhidden 属性の値を反映します。
HTMLElement.inert: 論理値で、ユーザー操作イベント、ページ内テキスト検索（「ページ内を検索」）、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。
HTMLElement.innerText: このノードやその子孫において、表示されるテキストの内容を表します。ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を<br> 要素に変換します。
HTMLElement.inputMode: 文字列で、この要素のinputmode 属性の値を反映します。
HTMLElement.isContentEditable読取専用: 論理値で、要素のコンテンツが編集可能か否かを示します。
HTMLElement.lang: 文字列で、要素の属性およびテキスト、要素のコンテンツの言語を表します。
HTMLElement.nonce: 指定されたフェッチが実行を許可されるかどうかを判断するためにコンテンツセキュリティポリシーが使用する、一度だけ使用される暗号学的な数値を返します。
HTMLElement.offsetHeight読取専用: double 値で、レイアウトに対して相対的な要素の高さを返します。
HTMLElement.offsetLeft読取専用: double 値で、この要素の左境界線からそのoffsetParent の左境界線までの距離を返します。
HTMLElement.offsetParent読取専用: Element で、すべてのオフセット計算が現在計算されている要素を返します。
HTMLElement.offsetTop読取専用: double 値で、要素の上境界線からそのoffsetParent の上境界線までの距離を返します。
HTMLElement.offsetWidth読取専用: double 値で、レイアウトに対して相対的な要素の幅を返します。
HTMLElement.outerText: ノードとその子孫の表示されるテキストコンテンツを表します。ゲッターとしてはHTMLElement.innerText と同じです（要素とその子孫の表示されるテキストの内容を表します）。セッターとしては、選択されたノードとその内容を指定された値で置き換え、改行を<br> 要素に変換します。
HTMLElement.popover: JavaScript から要素のポップオーバー状態を取得・設定し（"auto"、"hint"、"manual" のいずれか）、機能検出のために使用することもできます。グローバル HTML 属性popover の値を反映します。
HTMLElement.spellcheck: 論理値で、スペルチェックのヒントを制御します。これはすべての HTML 要素で利用できますが、すべての要素に効果があるとは限りません。
HTMLElement.style: CSSStyleDeclaration で、この要素のstyle 属性の宣言を表します。
HTMLElement.tabIndex: long 値で、タブ順内の要素の位置を表します。
HTMLElement.title: 文字列で、マウスポインターを要素に当てた時に現れるポップアップボックスのテキストを表します。
HTMLElement.translate: 論理値で、翻訳を行うかどうかを表します。
HTMLElement.virtualKeyboardPolicyExperimental: 文字列で、タブレットやモバイル端末、その他ハードウェアキーボードが利用できない端末において、要素のコンテンツが編集可能な場合（例えば、<input> 要素や<textarea> 要素、contenteditable 属性が設定されている要素）、画面に表示される仮想キーボードの動作を示します。
HTMLElement.writingSuggestions: 文字列で、ブラウザーが提供する文章作成の提案をこの要素のスコープで有効にすべきかどうかを示します。

インスタンスメソッド

親であるElement から継承したメソッドもあります。

HTMLElement.attachInternals(): ElementInternals オブジェクトを返し、カスタム要素を HTML フォームに参加できるようにします。
HTMLElement.blur(): 現在フォーカスされている要素からキーボードフォーカスを外します。
HTMLElement.click(): 要素にマウスクリックイベントを送信します。
HTMLElement.focus(): 要素に現在のキーボードフォーカスを当てます。
HTMLElement.hidePopover(): ポップオーバー要素を最上位レイヤーから取り除き、display: none でスタイル設定することで、ポップオーバー要素を非表示にします。
HTMLElement.showPopover(): ポップオーバー要素を最上位レイヤーに追加し、display: none; スタイル設定を削除することで、ポップオーバー要素を表示します。
HTMLElement.togglePopover(): ポップオーバー要素を非表示状態と表示状態を切り替えます。

イベント

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

親であるElement から継承したイベントもあります。

change: <input>,<select>,<textarea> のいずれかの要素のvalue が変更され、ユーザーが確定したときに発行されます。input イベントとは異なり、change イベントは要素のvalue が変更されるたびに発行されるわけではありません。
command: commandForElement およびcommand の値が有効なボタンによって制御される要素上で、ボタンが操作されるたびに（例えば、クリックされるたびに）発生します。
error: リソースの読み込みに失敗した、または使用することができない場合に発行されます。
load: リソースが正常に読み込まれたときに、リソースを保持する要素に対して発行されます。

ドラッグ＆ドロップイベント

drag: このイベントは、要素やテキスト選択がドラッグされたときに発行されます。
dragend: このイベントは、ドラッグ操作が（マウスボタンを離すか、エスケープキーを押すかして）終わったときに発行されます。
dragenter: このイベントは、ドラッグされた要素やテキスト選択が有効なドロップ対象に入ると発行されます。
dragleave: このイベントは、ドラッグされた要素やテキスト選択が有効なドロップ対象から外れたときに発行されます。
dragover: このイベントは、要素またはテキスト選択がドラッグされ、マウスポインターが有効なドロップ対象の上にあるとき（マウスが移動していないときは 50 ミリ秒ごと、移動中およそ 5 ミリ秒（移動が遅いとき）から 1 ミリ秒（移動が速いとき）の間に発生します。この発行パターンはmouseover とは異なります。）
dragstart: このイベントは、ユーザーが要素やテキスト選択のドラッグを始めるには発行されます。
drop: このイベントは、要素またはテキスト選択が有効なドロップ対象にドロップされたときに発行されます。

トグルイベント

beforetoggle: この要素がポップオーバーまたは<dialog> である場合、非表示または表示される前に発行されます。
toggle: この要素がポップオーバー、<dialog>、<details> のいずれかである場合、非表示または表示された直後に発行されます。