HTMLElement インターフェイス
HTMLElement インターフェイスは、HTML タグエレメントインターフェイスの元になるインターフェイスです。すべての HTML タグの元です。
Element インターフェイスを継承しています。
- EventTarget
-
- └ Node
-
- └ Element
-
- └ HTMLElement
-
- ├ HTMLHtmlElement
- ├ HTMLHeadElement
- ├ HTMLBodyElement
- ├─ HTMLAnchorElement
- ├─ HTMLAreaElement
- ├─ HTMLAudioElement
- ├─ HTMLBaseElement
- ├─ HTMLBRElement
- ├─ HTMLButtonElement
- ├─ HTMLCanvasElement
- ├─ HTMLDataElement
- ├─ HTMLDataListElement
- ├─ HTMLDetailsElement
- ├─ HTMLDialogElement
- ├─ HTMLDivElement
- ├─ HTMLDListElement
- ├─ HTMLEmbedElement
- ├─ HTMLFieldSetElement
- ├─ HTMLFormElement
- ├─ HTMLHeadingElement
- ├─ HTMLHRElement
- ├─ HTMLIFrameElement
- ├─ HTMLImageElement
- ├─ HTMLInputElement
- ├─ HTMLLabelElement
- ├─ HTMLLegendElement
- ├─ HTMLLIElement
- ├─ HTMLLinkElement
- ├─ HTMLMapElement
- ├─ HTMLMediaElement
- ├─ HTMLMenuElement
- ├─ HTMLMetaElement
- ├─ HTMLMeterElement
- ├─ HTMLModElement
- ├─ HTMLObjectElement
- ├─ HTMLOListElement
- ├─ HTMLOptGroupElement
- ├─ HTMLOptionElement
- ├─ HTMLOptionsCollection
- ├─ HTMLOutputElement
- ├─ HTMLParagraphElement
- ├─ HTMLPictureElement
- ├─ HTMLPreElement
- ├─ HTMLProgressElement
- ├─ HTMLQuoteElement
- ├─ HTMLScriptElement
- ├─ HTMLSelectElement
- ├─ HTMLSourceElement
- ├─ HTMLSpanElement
- ├─ HTMLStyleElement
- ├─ HTMLTableCaptionElement
- ├─ HTMLTableCellElement
- ├─ HTMLTableColElement
- ├─ HTMLTableElement
- ├─ HTMLTableRowElement
- ├─ HTMLTableSectionElement
- ├─ HTMLTemplateElement
- ├─ HTMLTextAreaElement
- ├─ HTMLTimeElement
- ├─ HTMLTitleElement
- ├─ HTMLTrackElement
- ├─ HTMLUListElement
- ├─ HTMLUnknownElement
- └─ HTMLVideoElement
その他
HTMLタグエレメントはこのインターフェイスのプロパティ、メソッド、イベントハンドラーを継承しています。
混同しそうですが、<html> オブジェクトのためのインターフェイスは HTMLHtmlElement です。
HTMLElement の内容を取得するには、innerHTML または textContent、innerText を使用します。
innerHTML は内容を HTML テキストで返します。textContent、innerText はタグがないテキストだけの状態を返します。
これらのプロパティに値を代入すると内容が変更されます。
ページ内 Index
プロパティ(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のイベント一覧
タイプ名(ハンドラー名) | 概要 | 分類 |
---|