HTMLElement

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

親である Element からプロパティを継承しており、 DocumentAndElementEventHandlers, ElementCSSInlineStyle, GlobalEventHandlers, HTMLOrForeignElement, TouchEventHandlers からのプロパティを実装しています。

HTMLElement.accessKey

要素に割り当てられたアクセスキーを表す DOMString です。

HTMLElement.accessKeyLabel 読取専用

要素に割り当てられたアクセスキーを含む DOMString を返します。

HTMLElement.contentEditable

DOMString。この文字列が true の場合は要素が編集可能、false の場合は編集不可です。

HTMLElement.isContentEditable 読取専用

要素のコンテンツが編集可能か否かを示す Boolean を返します。

HTMLElement.contextMenu

要素に割り当てたコンテキストメニューを表す HTMLMenuElement です。null になる可能性があります。

HTMLOrForeignElement.dataset 読取専用

要素の カスタムデータ属性 (data-*) を読み書きできるスクリプトの DOMStringMap を返します。

HTMLElement.dir

要素の記述方向を表す dir グローバル属性を反映する DOMString です。可能な値は、"ltr" および "rtl"、"auto" です。

HTMLElement.draggable

要素がドラッグ可能かどうかを示す Boolean です。

HTMLElement.dropzone 読取専用

dropzone グローバル属性を反映し、要素のドロップ操作に関する動作を記述する DOMSettableTokenList を返します。

HTMLElement.hidden

要素が hidden か否かを示す Boolean です。

HTMLElement.inert

Boolean で、ユーザー操作イベント、ページ内テキスト検索 (「ページ内を検索」)、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。

HTMLElement.innerText

ノードやその子孫の「描画される」テキストの内容を表します。ゲッターとしては、およそユーザーがカーソルで要素の内容を選択してからクリップボードにコピーしたときのテキストに相当します。

HTMLElement.itemScope

アイテムのスコープを表す Boolean です。

HTMLElement.itemType 読取専用

DOMSettableTokenList… を返します。

HTMLElement.itemId

アイテム ID を表す DOMString です。

HTMLElement.itemRef 読取専用

DOMSettableTokenList… を返します。

HTMLElement.itemProp 読取専用

DOMSettableTokenList… を返します。

HTMLElement.itemValue

アイテムの値を表す Object を返します。

HTMLElement.lang

要素の属性およびテキスト、要素のコンテンツの言語を表す DOMString です。

HTMLElement.noModule

Boolean であり、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。

HTMLOrForeignElement.nonce

指定されたフェッチが実行を許可されるかどうかを判断するために Content Security Policy が使用する、一度だけ使用される暗号学的な数値を返します。

HTMLElement.offsetHeight 読取専用

レイアウトに対して相対的な要素の高さを含む double 値を返します。

HTMLElement.offsetLeft 読取専用

この要素の左境界線からその offsetParent の左境界線までの距離である double 値を返します。

HTMLElement.offsetParent 読取専用

現在計算済みのすべてのオフセット計算値からの要素である Element を返します。

HTMLElement.offsetTop 読取専用

要素の上境界線からその offsetParent の上境界線までの距離である double 値を返します。

HTMLElement.offsetWidth 読取専用

レイアウトに対して相対的な要素の幅を含む double 値を返します。

HTMLElement.properties 読取専用

HTMLPropertiesCollection… を返します。

HTMLElement.spellcheck

スペルチェック を制御する Boolean です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。

HTMLElement.style

要素の style 属性の宣言を表すオブジェクトである CSSStyleDeclaration です。

HTMLElement.tabIndex

タブ順内の要素の位置を表す long 値です。

HTMLElement.title

マウスポインターが要素上に置かれた時に現れるポップアップボックスのテキストを含む DOMString です。

HTMLElement.translate

translation を表す Boolean です。

イベントハンドラー

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

HTMLElement.oncopy

copy イベントのイベントハンドリングコードを返します (バグ 280959)。

HTMLElement.oncut

cut イベントのイベントハンドリングコードを返します (バグ 280959)。

HTMLElement.onpaste

paste イベントのイベントハンドリングコードを返します (バグ 280959)。

TouchEventHandlers.ontouchstart

touchstart イベントのイベントハンドリングコードを返します。

TouchEventHandlers.ontouchend

touchend イベントのイベントハンドリングコードを返します。

TouchEventHandlers.ontouchmove

touchmove イベントのイベントハンドリングコードを返します。

TouchEventHandlers.ontouchenter

touchenter イベントのイベントハンドリングコードを返します。

TouchEventHandlers.ontouchleave

touchleave イベントのイベントハンドリングコードを返します。

TouchEventHandlers.ontouchcancel

touchcancel イベントのイベントハンドリングコードを返します。

メソッド

親である Element からメソッドを継承しており、 DocumentAndElementEventHandlers, ElementCSSInlineStyle, GlobalEventHandlers, HTMLOrForeignElement, TouchEventHandlers からのメソッドを実装しています。

HTMLElement.attachInternals()

ElementInternals のインスタンスをカスタム要素に割り当てます。

HTMLOrForeignElement.blur()

現在フォーカスされている要素からキーボードフォーカスを外します。

HTMLElement.click()

要素にマウスクリックイベントを送信します。

HTMLOrForeignElement.focus()

要素に現在のキーボードフォーカスを当てます。

HTMLElement.forceSpellCheck()

要素上のコンテンツに対してスペルチェックを実行します。

イベント

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

invalid

Fired when an element does not satisfy its constraints during constraint validation.
Also available via the oninvalid property.

アニメーションイベント

animationcancel

Fired when an animation unexpectedly aborts.
Also available via the onanimationcancel property.

animationend

Fired when an animation has completed normally.
Also available via the onanimationend property.

animationiteration

Fired when an animation iteration has completed.
Also available via the onanimationiteration property.

animationstart

Fired when an animation starts.
Also available via the onanimationstart property.

入力イベント

beforeinput

Fired when the value of an <input>, <select>, or <textarea> element is about to be modified.

input

Fired when the value of an <input>, <select>, or <textarea> element has been changed.
Also available via the oninput property.

ポインターイベント

gotpointercapture

Fired when an element captures a pointer using setPointerCapture().
Also available via the ongotpointercapture property.

lostpointercapture

Fired when a captured pointer is released.
Also available via the onlostpointercapture property.

pointercancel

Fired when a pointer event is canceled.
Also available via the onpointercancel property.

pointerdown

Fired when a pointer becomes active.
Also available via the onpointerdown property.

pointerenter

Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
Also available via the onpointerenter property.

pointerleave

Fired when a pointer is moved out of the hit test boundaries of an element.
Also available via the onpointerleave property.

pointermove

Fired when a pointer changes coordinates.
Also available via the onpointermove property.

pointerout

Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
Also available via the onpointerout property.

pointerover

Fired when a pointer is moved into an element's hit test boundaries.
Also available via the onpointerover property.

pointerup

Fired when a pointer is no longer active.
Also available via the onpointerup property.

トランジションイベント

transitioncancel

Fired when a CSS transition is canceled.
Also available via the ontransitioncancel property.

transitionend

Fired when a CSS transition has completed.
Also available via the ontransitionend property.

transitionrun

Fired when a CSS transition is first created.
Also available via the ontransitionrun property.

transitionstart

Fired when a CSS transition has actually started.
Also available via the ontransitionstart property.

仕様書

ｓ

ブラウザーの互換性

関連情報

• Element