HTMLElement - HTML要素
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+ |
関連記事
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- HTMLCollection.item()
- item()は、HTMLCollectionのメソッドです。インデックス番号を指定してHTML要素を取得します。このメソッドは、ブラケット記法(例: [0])に置き換えられます。
- HTMLElement.blur()
- blur()は、HTMLElementのメソッドです。要素に対するフォーカスを外します。
- HTMLElement.dataset
- datasetは、HTMLElementのプロパティです。HTMLのグローバル属性であるdata-*属性を反映します。値はDOMStringMapで扱われます。