HTMLElement - HTML要素

2017/02/27

HTMLElementは、全てのHTML要素が共通して実装しているインターフェイスです。全てのHTML要素は、これと同じインターフェイスか、または、これに独自のプロパティやメソッドを追加したインターフェイスを持っています。

概要

名前

HTMLElement

継承

Element
HTMLElement

実装

DocumentAndElementEventHandlers

ElementCSSInlineStyle

ElementContentEditable

GlobalEventHandlers

IDL

[Exposed=Window,
 HTMLConstructor]
interface HTMLElement : Element {
  // metadata attributes
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;
  [SameObject] readonly attribute DOMStringMap dataset;

  // user interaction
  [CEReactions] attribute boolean hidden;
  void click();
  [CEReactions] attribute long tabIndex;
  void focus();
  void blur();
  [CEReactions] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;

  [CEReactions] attribute [TreatNullAs=EmptyString] DOMString innerText;
};
HTMLElement implements GlobalEventHandlers;
HTMLElement implements DocumentAndElementEventHandlers;
HTMLElement implements ElementContentEditable;

// CSSOM View Module
partial interface HTMLElement {
  readonly attribute Element? offsetParent;
  readonly attribute long offsetTop;
  readonly attribute long offsetLeft;
  readonly attribute long offsetWidth;
  readonly attribute long offsetHeight;
};

仕様書

https://html.spec.whatwg.org/multipage/dom.html#htmlelement

https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface (CSSOM View Module)

チュートリアル

HTMLElementを作成する例です。作成されるのはHTMLAnchorElementですが、これはHTMLElementのインターフェイスを含んでいます。

var element = document.createElement( "a" ) ;	// <a></a>

element.title = "SYNCER" ;	// <a title="SYNCER"></a>
element.lang = "ja" ;	// <a title="SYNCER" lang="ja"></a>
element.textContent = "リンク" ;	// <a title="SYNCER" lang="ja">リンク</a>

コンストラクタ

コンストラクタはありません。

プロパティ

accessKey

HTMLのグローバル属性であるaccesskey属性を反映します。

accessKeyLabel

accesskey属性で設定したアクセスキーの内容を返します。

dataset

HTMLのグローバル属性であるdata-*属性を反映します。

dir

HTMLのグローバル属性であるdir属性を反映します。

draggable

HTMLのグローバル属性であるdraggable属性を反映します。

hidden

HTMLのグローバル属性であるhidden属性を反映します。

innerText

レンダリングされた状態のテキストを反映します。

lang

HTMLのグローバル属性であるlang属性を反映します。

offsetHeight

要素のborder edgeの高さ。border-topの上端からborder-bottomの下端までの幅。

offsetLeft

包含要素(offsetParent)からの、水平方向のオフセット距離を返します。

offsetParent

オフセットの基準となる包含要素を返します。

offsetTop

包含要素(offsetParent)からの、垂直方向のオフセット距離を返します。

offsetWidth

要素のborder edgeの横幅。border-leftの左端からborder-rightの右端までの幅。

spellcheck

HTMLのグローバル属性であるspellcheck属性を反映します。

tabIndex

HTMLのグローバル属性であるtabindex属性を反映します。

title

HTMLのグローバル属性であるtitle属性を反映します。

translate

HTMLのグローバル属性であるtranslate属性を反映します。

メソッド

blur()

要素に対するフォーカスを外します。

click()

要素に対するクリックを発生させます。

focus()

要素に対するフォーカスを発生させます。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
HTMLElement	●	●	●	●	●	●	●	●
accessKey	●	●	●	●	●	●	●	●
accessKeyLabel	×	● 8+	×	×	×	×	×	×
blur()	●	●	●	●	●	●	●	●
click()	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.4+
dataset	●	● 6+	● 5.1+	●	● 11+	●	●	● 4.0+
dir	●	●	●	●	●	●	●	●
draggable	●	●	● 5.1+	●	● 10+	● 12+	●	●
focus()	●	●	●	●	●	●	●	●
hidden	●	●	● 5.1+	●	● 11+	●	●	● 4.0+
innerText	●	● 45+	●	●	●	●	●	●
lang	●	●	●	●	●	●	●	●
offsetHeight	●	●	●	●	●	●	●	●
offsetLeft	●	●	●	●	●	●	●	●
offsetParent	●	●	●	●	●	●	●	●
offsetTop	●	●	●	●	●	●	●	●
offsetWidth	●	●	●	●	●	●	●	●
spellcheck	●	●	● 5.1+	●	● 10+	●	●	● 4.0+
tabIndex	●	●	●	●	●	●	●	●
title	●	●	●	●	●	●	●	●
translate	● 19+	×	● 6.0+	×	×	● 15+	● 6.0+	● 4.4+