Element
は Document
の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element
を継承します。例えば HTML 要素には HTMLElement
インターフェイス、SVG 要素には SVGElement
インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。
XUL の XULElement
インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element
インターフェイスを通じて要素を実装しています。
プロパティ
親インターフェスである Node
、およびその親インターフェイスである EventTarget
からプロパティを継承します。そして ParentNode
、ChildNode
、NonDocumentTypeChildNode
、Animatable
のプロパティを実装しています。
Element.attributes
読取専用- 対応する HTML 要素に関連したすべての属性のリストである
NamedNodeMap
を返します。 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
読取専用Element
型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければnull
。Element.outerHTML
DOMString
型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。Element.part
- 要素のパート識別子 (すなわち、
part
属性を使用して設定されるもの) が、DOMTokenList
として返されます。 Element.prefix
読取専用- 要素の名前空間プレフィックスを表す
DOMString
。プレフィックスが指定されていない場合はnull
。 NonDocumentTypeChildNode.previousElementSibling
読取専用Element
型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければnull
。Element.scrollHeight
読取専用- 要素のスクロールビューの高さを表す
Number
を返します。 Element.scrollLeft
Number
型であり、要素の左スクロールオフセット値を表します。Element.scrollLeftMax
読取専用- 要素で可能な左スクロールオフセットの最大値を表す
Number
を返します。 Element.scrollTop
- 文書の上端が垂直方向にスクロールされた量をピクセル数で表す
Number
です。 Element.scrollTopMax
読取専用- 要素で可能な上スクロールオフセットの最大値を表す
Number
を返します。 Element.scrollWidth
読取専用- 要素のスクロールビュー幅を表す
Number
を返します。 Element.shadowRoot
読取専用- 要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。
Element.openOrClosedShadowRoot
読取専用- オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。
Element.slot
- 要素が挿入されている shadow DOM スロットの名前を返します。
Element.tabStop
Boolean
型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。Element.tagName
読取専用- 要素のタグ名を
String
で返します。 Element.undoManager
読取専用- 要素に関連する
UndoManager
を返します。 Element.undoScope
Boolean
型であり、要素が undo scope を提供しているか否かを示します。
注: DOM Level 3 では、Node
インターフェスで namespaceURI
、localName
、prefix
を定義しています。これらは DOM4 で Element
に移動されました。
この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。
Slotable に含まれるプロパティ
Element
インターフェイスは、Slotable
ミックスインで定義された以下のプロパティを含んでいます。
Slotable.assignedSlot
読取専用- ノードが挿入されている
<slot>
を表すHTMLSlotElement
を返します。
イベントハンドラー
Element.onfullscreenchange
- 要素が全画面モードに入ったり出たりしたときに送られる
fullscreenchange
イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。 Element.onfullscreenerror
- 全画面モードへ移行しようとしてエラーが発生したときに送られる
fullscreenerror
イベントのイベントハンドラーです。
メソッド
親である Node
、およびその親である EventTarget
からメソッドを継承しています。そして ParentNode
、ChildNode
、NonDocumentTypeChildNode
、Animatable
のメソッドを実装しています。
EventTarget.addEventListener()
- 要素に特定のイベント型を扱うイベントハンドラーを登録します。
Element.attachShadow()
- 指定した要素に shadow DOM ツリーを結びつけて、その
ShadowRoot
への参照を返します。 Element.animate()
- 要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.closest()
- 引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を
Element
型で返します。 Element.createShadowRoot()
- 要素で shadow DOM を作成します。その要素は Shadow Host になります。また、
ShadowRoot
を返します。 Element.computedStyleMap()
CSSStyleDeclaration
に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供するStylePropertyMapReadOnly
インターフェイスを返します。EventTarget.dispatchEvent()
- DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す
Boolean
を返します。 Element.getAnimations()
- 要素でアクティブな 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()
- メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
Element.insertAdjacentHTML()
- テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。
Element.insertAdjacentText()
- メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
Element.matches()
- 要素が指定されたセレクター文字列で選択されているか否かを示す
Boolean
を返します。 Element.pseudo()
- 指定された擬似要素セレクターに一致するこの擬似要素を表す
CSSPseudoElement
を返します。 Element.querySelector()
- 要素に対して、指定したセレクターにマッチする最初の
Node
を返します。 Element.querySelectorAll()
- 要素に対して、指定したセレクターにマッチするノードの
NodeList
を返します。 Element.releasePointerCapture()
- 以前に特定の
pointer イベント
向けに設定したポインターキャプチャーを解放 (停止) します。 ChildNode.remove()
- 親要素の子リストから、要素を取り除きます。
Element.removeAttribute()
- 現在ノードから,指定された名前を持つ属性を取り除きます。
Element.removeAttributeNS()
- 現在ノードから,指定された名前と名前空間を持つ属性を取り除きます。
EventTarget.removeEventListener()
- 要素からイベントリスナーを取り除きます。
Element.requestFullscreen()
- 要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。
Element.requestPointerLock()
- 指定した要素でポインターをロックするよう、非同期的に要求できます。
Element.scroll()
- 指定された要素の中で特定の座標のセットへスクロールします。
Element.scrollBy()
- 指定された量だけ要素をスクロールします。
Element.scrollIntoView()
- 要素がビューの内側に来るまでページをスクロールします。
Element.scrollTo()
- 指定された要素の中で特定の座標のセットへスクロールします。
Element.setAttribute()
- 現在ノードに、指定された名前を持つ属性値を設定します。
Element.setAttributeNS()
- 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
Element.setCapture()
- すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
Element.setPointerCapture()
- 以降の pointer イベント のキャプチャー対象とする、特定の要素を指定します。
Element.toggleAttribute()
- 指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。
-
廃止されたメソッド
Element.getAttributeNode()
- 現在ノードから指定された名前の属性のノード表現を取得して、
Attr
を返します。 Element.getAttributeNodeNS()
- 現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、
Attr
を返します。 Element.removeAttributeNode()
- 現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。
Element.setAttributeNode()
- 現在ノードに、指定された名前を持つ属性値のノード表現を設定します。
Element.setAttributeNodeNS()
- 現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。
イベント
これらのイベントを待ち受けするには、 addEventListener()
を使用するか、イベントリスナーをこのインターフェイスの onイベント名
プロパティに代入するかします。
cancel
- ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに
<dialog>
に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。
oncancel
プロパティから利用することもできます。 error
- リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
onerror
プロパティから利用することもできます。 scroll
- 文書のビューまたは要素がスクロールしたときに発生します。
onscroll
プロパティから利用することもできます。 select
- いくらかのテキストが選択されたときに発生します。
onselect
プロパティから利用することもできます。 show
contextmenu
イベントがcontextmenu
属性を持つ要素で発生したか、バブリングで到達した場合に発生します。
onshow
プロパティから利用することもできます。wheel
- ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。
onwheel
プロパティから利用することもできます。
クリップボードイベント
構成イベント
compositionend
- input method editor のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。
compositionstart
- input method editor のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。
compositionupdate
- input method editor のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。
フォーカスイベント
全画面イベント
fullscreenchange
- 全画面モードへの移行時または終了時に、
Document
またはElement
に送られます。 onfullscreenchange
プロパティから利用することもできます。fullscreenerror
- 全画面モードへの移行または終了を試みている中でエラーが発生したときに、
Document
またはElement
に送られます。 onfullscreenerror
プロパティから利用することもできます。
キーボードイベント
マウスイベント
auxclick
- ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。
onauxclick
プロパティから利用することもできます。 click
- ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。
onclick
プロパティから利用することもできます。 contextmenu
- ユーザーがコンテキストメニューを開こうとしたときに発生します。
oncontextmenu
プロパティから利用することもできます。 dblclick
- ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。
ondblclick
プロパティから利用することもできます。 DOMActivate
- 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。
mousedown
- ポインティングデバイスのボタンが要素上で押されたときに発生します。
onmousedown
プロパティから利用することもできます。 mouseenter
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。
onmouseenter
プロパティから利用することもできます。 mouseleave
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。
onmouseleave
プロパティから利用することもできます。 mousemove
- ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。
onmousemove
プロパティから利用することもできます。 mouseout
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。
onmouseout
プロパティから利用することもできます。 mouseover
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。
onmouseover
プロパティから利用することもできます。 mouseup
- ポインティングデバイスのボタンが要素の上で離されたときに発生します。
onmouseup
プロパティから利用することもできます。 webkitmouseforcechanged
- trackpadtouchscreen の上の圧力が変化するたびに発生します。
webkitmouseforcedown
- 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。
webkitmouseforcewillbegin
mousedown
イベントの前に発生します。webkitmouseforceup
- 「強制クリック」が終了したといえるほど圧力が減少した直後の
webkitmouseforcedown
イベントの後で発生します。
タッチイベント
touchcancel
- 1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。
ontouchcancel
プロパティから利用することもできます。 touchend
- 1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。
ontouchend
プロパティから利用することもできます。 touchmove
- 1つ以上のタッチ点がタッチ面上で移動したときに発生します。
ontouchmove
プロパティから利用することもできます。 touchstart
- 1つ以上のタッチ点がタッチ面に配置されたときに発生します。
ontouchstart
プロパティから利用することもできます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Pseudo-Elements Level 4 Element の定義 |
草案 | pseudo() メソッドを追加 |
Web Animations | 草案 | getAnimations() メソッドを追加 |
UndoManager and DOMTransaction Element の定義 |
編集者草案 | undoScope と undoManager プロパティを追加した。 |
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 インターフェイスのインスタンスを追加。 |
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