HTMLElement インターフェイス

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

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

HTMLElement 継承図

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

オブジェクトのツリー構造

　HTMLテキストから DOM によってオブジェクトツリー化されたオブジェクト群の構成はインターフェイスの継承図とは別の形をしています。

Window
- └ Document
  - └ <html>
    - ├ <head>
      - └ <tite>、<meta>、<link>...
    - └ <body>
      - └ <article>、<header>、<main>...

　HTMLElement インターフェイスは HTMLタグエレメントのルート（根本）になるインターフェイスで、<html> オブジェクトのためのインターフェイスではありません。 <html> オブジェクトのためのインターフェイスは HTMLHtmlElement です。

プロパティ(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 型
.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 インターフェイス

オブジェクトのツリー構造

プロパティ(Properties)

メソッド(Methods)

イベント( Event )

関連（Related）