HTMLElement インターフェイス

　HTMLElement インターフェイスは、HTML タグエレメントインターフェイスの元になるインターフェイスです。すべての HTML タグの元です。
　Element インターフェイスを継承しています。

HTMLElement 継承図

EventTarget
- └ Node
- - └ Element
  - - └ HTMLElement
    - - ├ HTMLHtmlElement
      - ├ HTMLHeadElement
      - ├ HTMLBodyElement

　HTMLタグエレメントはこのインターフェイスのプロパティ、メソッド、イベントハンドラーを継承しています。

　混同しそうですが、<html> オブジェクトのためのインターフェイスは HTMLHtmlElement です。

　HTMLElement の内容を取得するには、innerHTML または textContent、innerText を使用します。
　innerHTML は内容を HTML テキストで返します。textContent、innerText はタグがないテキストだけの状態を返します。
　これらのプロパティに値を代入すると内容が変更されます。

プロパティ(Properties)

　HTMLElementエレメントは、ElementContentEditable、 HTMLOrSVGElement のプロパティとメソッドを含みます。

　以下のプロパティはタグエレメントによって有効に機能します。タグによっては機能しないものもあります。

プロパティ	概要	分類
.accessKey	エレメントのaccesskey属性の値
.accessKeyLabel	エレメントのaccesskey属性の属性名と値
.attributeStyleMap	StylePropertyMap のハンドラー。 style 属性の定義
.contentEditable	エレメントを編集可能に。true、false、inherit のいずれか	編集機能
.isContentEditable	エレメントが編集可能か／否か。 Boolean 型	編集機能
.dataset	カスタムデータ属性 (data-*)を操作するための DOMStringMap へのハンドラー
.dir	エレメントの書字方向、 dir 属性。値は、"ltr" 、"rtl"、"auto"
.draggable	'true' でエレメントをドラッグ可能に。 Boolean 型	ドラッグ
.enterkeyhint	Enter による処理内容を示すアクションラベル	編集機能
.hidden	非表示であるか／否か。 Boolean 型
.inert	入力機能やアンカー機能を使用できなくする。 Boolean 型	FORM
.innerText	エレメントの内容のテキストだけを取得。HTML、XMLテキストで取得するには Element.innerHTML を使う
.itemScope	itemscope属性であるか／否か。 Boolean 型
.lang	lang 属性の取得と設定
.noModule	<script> エレメントの nomodule 属性の取得と設定。Boolean 型
.nonce	<script> や <style> エレメントのセキュリティーに関する nonce 属性の値の取得と設定
.offsetHeight	エレメントのmarginを含まない全高 double 型	サイズ
.offsetLeft	親エレメントの左端から自エレメントの左端までの幅。親エレメントは border を含まない。double 型	サイズ
.offsetParent	オフセットの基準となるエレメント	サイズ
.offsetTop	親エレメントの上端から自エレメントの上端までの高さ。親エレメントは border を含まない。double 型	サイズ
.offsetWidth	エレメントのmarginを含まない全幅 double 型	サイズ
.outerText	エレメント自身の内容も含んだテキストだけを取得。HTML、XMLテキストで取得するには Element.outerHTML を使う
.spellcheck	spellcheck 属性の取得と設定。 Boolean 型
.style	JavaScriptからスタイル宣言ができる。 CSSStyleDeclaration オブジェクトを返す
.tabIndex	何番目のエレメントか。long 型
.title	ポインターがエレメント上にあると表示されるポップアップのテキスト
.translate	翻訳を行うか／否か。Boolean 型

　HTMLElement は Node と Element インターフェイスを継承しています。以下は Node と Element インターフェイスのプロパティです。

Nodeのプロパティ一覧　

タイプ名（ハンドラー名）	概要	分類

Elementのプロパティ一覧　

タイプ名（ハンドラー名）	概要	分類

メソッド(Methods)

メソッド	概要	分類
.attachInternals()	カスタムエレメントに関する ElementInternals オブジェクトを返す
.blur()	エレメントからフォーカスを外す
.click()	任意にクリックを実行する
.focus()	エレメントにフォーカスを当てる

　HTMLElement は Node と Element インターフェイスを継承しています。以下は Node と Element インターフェイスのメソッドです。

Nodeのメソッド一覧　

タイプ名（ハンドラー名）	概要	分類

Elementのメソッド一覧　

タイプ名（ハンドラー名）	概要	分類

イベント( Event )

　HTMLElement にイベントハンドラーを定義する方法には以下があります。

HTMLElement.addEventListener( 'click', ()=>{...} )

HTMLElement.onclick = function(){...}

<p onclick = "..." >

　イベントハンドラーとは、onイベント名のエレメントの属性です。イベント名はイベントタイプともいいます。このハンドラー属性が設定されることで、ユーザーの操作やブラウザ内の変化を監視します。 HTMLElementでイベントを捉えたら、そのハンドラーに定義された関数や関数式を実行します。

　イベントについてはEventを参照してください。イベントの監視についてはEventTargetが担っています。

　HTMLElement のイベントは、 GlobalEventHandlers、DocumentAndElementEventHandlers を含みます。
　以下は Element インターフェイスに定義されたイベント一覧です。HTMLElement は、Element インターフェイスを継承していますので利用することができます。

タイプ名（ハンドラー名）	概要	分類

GlobalEventHandlersのイベント一覧　

タイプ名（ハンドラー名）	概要	分類

DocumentAndElementEventHandlersのイベント一覧　

タイプ名（ハンドラー名）	概要	分類

HTMLElement インターフェイス

ページ内 Index

プロパティ(Properties)

メソッド(Methods)

イベント( Event )

関連（Related）