SYNCERのロゴ
アイキャッチ画像

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()

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

定数

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

イベント

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

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
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+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月27日 (月)
コンテンツを公開しました。