備忘録的プログラミングリファレンス

HTMLElement インターフェイス

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

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

HTMLElement 継承図

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

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

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

プロパティ(Properties)

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

プロパティ概要分類
.accessKeyエレメントのaccesskey属性の値
.accessKeyLabelエレメントのaccesskey属性の属性名と値
.attributeStyleMapStylePropertyMap のハンドラー。 style 属性の定義
.contentEditableエレメントを編集可能に。true、false、inherit のいずれか
.isContentEditableエレメントが編集可能か/否か。 Boolean 型
.datasetカスタムデータ属性 (data-*)を操作するための DOMStringMap へのハンドラー
.dirエレメントの書字方向、 dir 属性。値は、"ltr" 、"rtl"、"auto"
.draggable'true' でエレメントをドラッグ可能に。 Boolean 型
.enterkeyhintEnter  による処理内容を示すアクションラベル
.hidden非表示であるか/否か。 Boolean 型
.inert入力機能やアンカー機能を使用できなくする。 Boolean 型
.innerTextエレメントの内容のテキストだけを取得。HTML、XMLテキストで取得するには Element.innerHTML を使う
.itemScopeitemscope属性であるか/否か。 Boolean 型
.langlang 属性の取得と設定
.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 型
.styleJavaScriptからスタイル宣言ができる。 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のイベント一覧 

タイプ名(ハンドラー名)概要分類