Element

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

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

親インターフェスである 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 を提供しているか否かを示します。

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 プロパティから利用することもできます。

クリップボードイベント

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

キーが押されたときに発生します。
onkeydown プロパティから利用することもできます。

keypress

文字の値を発生させるキーが押されたときに発生します。
onkeypress プロパティから利用することもできます。

keyup

キーが離されたときに発生します。
onkeyup プロパティから利用することもできます。

マウスイベント

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 プロパティから利用することもできます。

仕様書

ブラウザーの互換性