Element

ElementDocument の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element を継承します。例えば HTML 要素には HTMLElement インターフェイス、SVG 要素には SVGElement インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。

XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを通じて要素を実装しています。

プロパティ

親インターフェスである Node、およびその親インターフェイスである EventTarget からプロパティを継承します。そして ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable のプロパティを実装しています。

Element.attributes 読取専用
対応する HTML 要素に関連したすべての属性のリストである NamedNodeMap (en-US) を返します。
Element.classList 読取専用
class 属性のトークンリストを含む DOMTokenList を返します。
Element.className
DOMString 型であり、要素のクラスを表します。
Element.clientHeight 読取専用
要素の内部の高さを表す Number を返します。
Element.clientLeft 読取専用
要素の左境界の幅を表す Number を返します。
Element.clientTop 読取専用
要素の上境界の幅を表す Number を返します。
Element.clientWidth 読取専用
要素の内部の幅を表す Number を返します。
Element.computedName 読取専用
アクセシビリティ向けに公開されたラベルを含む DOMString を返します。
Element.computedRole 読取専用
特定の要素に適用された ARIA ロールを含む DOMString を返します。
Element.id
DOMString 型であり、要素の id を表します。
Element.innerHTML
DOMString 型であり、要素内容のマークアップを表します。
Element.localName 読取専用
要素の修飾名のローカル部分を表す DOMString です。
Element.namespaceURI 読取専用
要素の名前空間の URI。名前空間がない場合は null になります。

注: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。

NonDocumentTypeChildNode.nextElementSibling (en-US) 読取専用
Element 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ null
Element.outerHTML
DOMString 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。
Element.part (en-US)
要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 DOMTokenList として返されます。
Element.prefix 読取専用
要素の名前空間プレフィックスを表す DOMString。プレフィックスが指定されていない場合は null
NonDocumentTypeChildNode.previousElementSibling (en-US) 読取専用
Element 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ null
Element.scrollHeight 読取専用
要素のスクロールビューの高さを表す Number を返します。
Element.scrollLeft
Number 型であり、要素の左スクロールオフセット値を表します。
Element.scrollLeftMax (en-US) この API は標準化されていません。 読取専用
要素で可能な左スクロールオフセットの最大値を表す Number を返します。
Element.scrollTop
文書の上端が垂直方向にスクロールされた量をピクセル数で表す Number です。
Element.scrollTopMax (en-US) この API は標準化されていません。 読取専用
要素で可能な上スクロールオフセットの最大値を表す Number を返します。
Element.scrollWidth 読取専用
要素のスクロールビュー幅を表す Number を返します。
Element.shadowRoot読取専用
要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。
Element.openOrClosedShadowRoot (en-US) この API は標準化されていません。 読取専用
オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。
Element.slot これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素が挿入されている shadow DOM スロットの名前を返します。
Element.tabStop (en-US) この API は標準化されていません。
Boolean 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。
Element.tagName 読取専用
要素のタグ名を String で返します。
Element.undoManager これは実験段階の API です。製品内のコードで使用しないようご注意ください。 読取専用
要素に関連する UndoManager を返します。
Element.undoScope これは実験段階の API です。製品内のコードで使用しないようご注意ください。
Boolean 型であり、要素が undo scope を提供しているか否かを示します。

注: DOM Level 3 では、Node インターフェスで namespaceURIlocalNameprefix を定義しています。これらは DOM4 で Element に移動されました。

この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。

Slotable に含まれるプロパティ

Element インターフェイスは、Slotable ミックスインで定義された以下のプロパティを含んでいます。

Slotable.assignedSlot (en-US)読取専用
ノードが挿入されている <slot> を表す HTMLSlotElement を返します。

イベントハンドラー

Element.onfullscreenchange
要素が全画面モードに入ったり出たりしたときに送られる fullscreenchange イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。
Element.onfullscreenerror
全画面モードへ移行しようとしてエラーが発生したときに送られる fullscreenerror イベントのイベントハンドラーです。

メソッド

親である Node、およびその親である EventTarget からメソッドを継承しています。そして ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable のメソッドを実装しています。

EventTarget.addEventListener()
要素に特定のイベント型を扱うイベントハンドラーを登録します。
Element.attachShadow()
指定した要素に shadow DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
Element.animate() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.closest() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を Element 型で返します。
Element.createShadowRoot() (en-US) この API は標準化されていません。 これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
要素で shadow DOM (en-US) を作成します。その要素は Shadow Host になります。また、ShadowRoot を返します。
Element.computedStyleMap() (en-US) これは実験段階の API です。製品内のコードで使用しないようご注意ください。
CSSStyleDeclaration に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する StylePropertyMapReadOnly (en-US) インターフェイスを返します。
EventTarget.dispatchEvent()
DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す Boolean を返します。
Element.getAnimations() (en-US) これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素でアクティブな Animation オブジェクトの配列を返します。
Element.getAttribute()
現在ノードから指定された名前の付いた属性値を取得して、Object を返します。
Element.getAttributeNames()
現在の要素の属性名の配列を返します。
Element.getAttributeNS()
現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、Object を返します。
Element.getBoundingClientRect()
要素のサイズと、ビューポートにおける位置を返します。
Element.getClientRects()
クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。
Element.getElementsByClassName()
現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ HTMLCollection を返します。
Element.getElementsByTagName()
現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した HTMLCollection を返します。
Element.getElementsByTagNameNS()
現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した HTMLCollection を返します。
Element.hasAttribute()
要素が指定された指定された属性を持っているか否かを示す Boolean を返します。
Element.hasAttributeNS()
要素が指定された名前空間内に指定された属性を持っているか否かを示す Boolean を返します。
Element.hasAttributes()
要素が現在 1 つ以上の属性をもっているかを示す Boolean を返します。
Element.hasPointerCapture()
呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
Element.insertAdjacentElement() (en-US)
メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
Element.insertAdjacentHTML()
テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。
Element.insertAdjacentText()
メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
Element.matches() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素が指定されたセレクター文字列で選択されているか否かを示す Boolean を返します。
Element.pseudo() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
指定された擬似要素セレクターに一致するこの擬似要素を表す CSSPseudoElement (en-US) を返します。
Element.querySelector()
要素に対して、指定したセレクターにマッチする最初の Node を返します。
Element.querySelectorAll()
要素に対して、指定したセレクターにマッチするノードの NodeList を返します。
Element.releasePointerCapture()
以前に特定の pointer イベント 向けに設定したポインターキャプチャーを解放 (停止) します。
ChildNode.remove() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
親要素の子リストから、要素を取り除きます。
Element.removeAttribute()
現在ノードから,指定された名前を持つ属性を取り除きます。
Element.removeAttributeNS()
現在ノードから,指定された名前と名前空間を持つ属性を取り除きます。
EventTarget.removeEventListener()
要素からイベントリスナーを取り除きます。
Element.requestFullscreen() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。
Element.requestPointerLock() (en-US) これは実験段階の API です。製品内のコードで使用しないようご注意ください。
指定した要素でポインターをロックするよう、非同期的に要求できます。
Element.scroll() (en-US)
指定された要素の中で特定の座標のセットへスクロールします。
Element.scrollBy()
指定された量だけ要素をスクロールします。
Element.scrollIntoView() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素がビューの内側に来るまでページをスクロールします。
Element.scrollTo()
指定された要素の中で特定の座標のセットへスクロールします。
Element.setAttribute()
現在ノードに、指定された名前を持つ属性値を設定します。
Element.setAttributeNS()
現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
Element.setCapture() この API は標準化されていません。
すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
Element.setPointerCapture()
以降の pointer イベント のキャプチャー対象とする、特定の要素を指定します。
Element.toggleAttribute() (en-US)
指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。

廃止されたメソッド

Element.getAttributeNode() これは廃止された API であり、動作は保証されていません。
現在ノードから指定された名前の属性のノード表現を取得して、Attr を返します。
Element.getAttributeNodeNS() これは廃止された API であり、動作は保証されていません。
現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、Attr を返します。
Element.removeAttributeNode() これは廃止された API であり、動作は保証されていません。
現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。
Element.setAttributeNode() これは廃止された API であり、動作は保証されていません。
現在ノードに、指定された名前を持つ属性値のノード表現を設定します。
Element.setAttributeNodeNS() これは廃止された API であり、動作は保証されていません。
現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。

イベント

これらのイベントを待ち受けするには、 addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかします。

cancel (en-US)
ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに <dialog> に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。
oncancel プロパティから利用することもできます。
error
リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
onerror (en-US) プロパティから利用することもできます。
scroll
文書のビューまたは要素がスクロールしたときに発生します。
onscroll プロパティから利用することもできます。
select
いくらかのテキストが選択されたときに発生します。
onselect プロパティから利用することもできます。
show
contextmenu (en-US) イベントが contextmenu 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
onshow プロパティから利用することもできます。
wheel
ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。
onwheel プロパティから利用することもできます。

クリップボードイベント

copy
ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。
oncopy プロパティから利用することもできます。
cut
ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。
oncut プロパティから利用することもできます。
paste
ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。
onpaste プロパティから利用することもできます。

構成イベント

compositionend
input method editor のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。
compositionstart
input method editor のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。
compositionupdate
input method editor のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。

フォーカスイベント

blur
要素がフォーカスを失ったときに発生します。
onblur プロパティから利用することもできます。
focus
要素がフォーカスを受け取ったときに発生します。
onfocus プロパティから利用することもできます。
focusin
要素がフォーカスを受け取ろうとしているときに発生します。
focusout
要素がフォーカスを失おうとしているときに発生します。

全画面イベント

fullscreenchange
全画面モードへの移行時または終了時に、 Document または Element に送られます。
onfullscreenchange プロパティから利用することもできます。
fullscreenerror
全画面モードへの移行または終了を試みている中でエラーが発生したときに、 Document または Element に送られます。
onfullscreenerror プロパティから利用することもできます。

キーボードイベント

keydown (en-US)
キーが押されたときに発生します。
onkeydown プロパティから利用することもできます。
keypress (en-US)
文字の値を発生させるキーが押されたときに発生します。 これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
onkeypress プロパティから利用することもできます。
keyup (en-US)
キーが離されたときに発生します。
onkeyup プロパティから利用することもできます。

マウスイベント

auxclick (en-US)
ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。
onauxclick (en-US) プロパティから利用することもできます。
click
ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。
onclick プロパティから利用することもできます。
contextmenu (en-US)
ユーザーがコンテキストメニューを開こうとしたときに発生します。
oncontextmenu (en-US) プロパティから利用することもできます。
dblclick
ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。
ondblclick (en-US) プロパティから利用することもできます。
DOMActivate これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。
mousedown
ポインティングデバイスのボタンが要素上で押されたときに発生します。
onmousedown プロパティから利用することもできます。
mouseenter
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。
onmouseenter プロパティから利用することもできます。
mouseleave
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。
onmouseleave プロパティから利用することもできます。
mousemove
ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。
onmousemove プロパティから利用することもできます。
mouseout
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。
onmouseout プロパティから利用することもできます。
mouseover
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。
onmouseover プロパティから利用することもできます。
mouseup
ポインティングデバイスのボタンが要素の上で離されたときに発生します。
onmouseup プロパティから利用することもできます。
webkitmouseforcechanged (en-US)
trackpadtouchscreen の上の圧力が変化するたびに発生します。
webkitmouseforcedown (en-US)
「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。
webkitmouseforcewillbegin (en-US)
mousedown イベントの前に発生します。
webkitmouseforceup (en-US)
「強制クリック」が終了したといえるほど圧力が減少した直後の webkitmouseforcedown (en-US) イベントの後で発生します。

タッチイベント

touchcancel
1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。
ontouchcancel プロパティから利用することもできます。
touchend
1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。
ontouchend プロパティから利用することもできます。
touchmove
1つ以上のタッチ点がタッチ面上で移動したときに発生します。
ontouchmove (en-US) プロパティから利用することもできます。
touchstart
1つ以上のタッチ点がタッチ面に配置されたときに発生します。
ontouchstart プロパティから利用することもできます。

仕様書

仕様書 状態 備考
CSS Pseudo-Elements Level 4
Element の定義
草案 pseudo() メソッドを追加
Web Animations 草案 getAnimations() メソッドを追加
UndoManager and DOMTransaction
Element の定義
編集者草案 undoScopeundoManager プロパティを追加した。
Pointer Events – Level 2
Element の定義
勧告 イベントハンドラーを追加: ongotpointercapture, onlostpointercapture
メソッドを追加: setPointerCapture(), releasePointerCapture()
Pointer Events
Element の定義
廃止 イベントハンドラーを追加: ongotpointercapture, onlostpointercapture
メソッドを追加: setPointerCapture(), releasePointerCapture()
Selectors API Level 1
Element の定義
廃止 メソッドを追加: querySelector(), querySelectorAll()
Pointer Lock
Element の定義
勧告候補 requestPointerLock() メソッドを追加
Fullscreen API
Element の定義
現行の標準 requestFullscreen() メソッドを追加
DOM Parsing and Serialization
Element の定義
草案 プロパティを追加: innerHTML, outerHTML
メソッドを追加: insertAdjacentHTML()
CSS Object Model (CSSOM) View Module
Element の定義
草案 プロパティを追加: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight
メソッドを追加: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
Element Traversal Specification
Element の定義
廃止 ElementTraversal (en-US) インターフェイスのインスタンスを追加。
DOM
Element の定義
現行の標準 メソッドを追加: closest(), insertAdjacentElement(), insertAdjacentText()
Moved hasAttributes() from the Node interface to this one.
DOM4
Element の定義
廃止 メソッドを削除: closest(), setIdAttribute(), setIdAttributeNS(), setIdAttributeNode()
getElementsByTag() および getElementsByTagNS() の返値を変更。
schemaTypeInfo プロパティを削除。
Document Object Model (DOM) Level 3 Core Specification
Element の定義
廃止 メソッドを追加: setIdAttribute(), setIdAttributeNS(), setIdAttributeNode()。これらのメソッドは実装されず、のちの仕様書で削除されました。
schemaTypeInfo プロパティを追加。このプロパティは実装されず、後の仕様で削除されました。
Document Object Model (DOM) Level 2 Core Specification
Element の定義
廃止 normalize() メソッドを Node に移動。
Document Object Model (DOM) Level 1 Specification
Element の定義
廃止 初回定義

ブラウザーの互換性

BCD tables only load in the browser