Element

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

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

プロパティ

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

Element.assignedSlot (en-US)読取専用: このノードが挿入された <slot> を表す HTMLSlotElement を返します。
Element.attributes 読取専用: 対応する HTML 要素に関連したすべての属性のリストである NamedNodeMap (en-US) を返します。
Element.childElementCount 読取専用: この要素の子要素の数を返します。
Element.children 読取専用: この要素の子要素を返します。
Element.classList 読取専用: class 属性のトークンリストを含む DOMTokenList を返します。
Element.className: DOMString 型であり、要素のクラスを表します。
Element.clientHeight 読取専用: 要素の内部の高さを表す Number を返します。
Element.clientLeft 読取専用: 要素の左境界の幅を表す Number を返します。
Element.clientTop 読取専用: 要素の上境界の幅を表す Number を返します。
Element.clientWidth 読取専用: 要素の内部の幅を表す Number を返します。
Element.firstElementChild (en-US) 読取専用: アクセシビリティ向けに公開されたラベルを含む DOMString を返します。
Element.id: DOMString 型であり、要素の id を表します。
Element.innerHTML: DOMString 型であり、要素内容のマークアップを表します。
Element.lastElementChild (en-US) 読取専用: Returns the last child element of this element.
Element.localName 読取専用: 要素の修飾名のローカル部分を表す DOMString です。
Element.namespaceURI 読取専用: 要素の名前空間の URI。名前空間がない場合は null になります。

注: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。
Element.nextElementSibling (en-US) 読取専用: Element 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ null。
Element.outerHTML: DOMString 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。
Element.part (en-US): 要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 DOMTokenList として返されます。
Element.prefix 読取専用: 要素の名前空間接頭辞を表す DOMString。接頭辞が指定されていない場合は null。
Element.previousElementSibling (en-US) 読取専用: Element 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ null。
Element.scrollHeight 読取専用: 要素のスクロールビューの高さを表す Number を返します。
Element.scrollLeft: Number 型であり、要素の左スクロールオフセット値を表します。
Element.scrollLeftMax (en-US) 読取専用: 要素で可能な左スクロールオフセットの最大値を表す Number を返します。
Element.scrollTop: 文書の上端が垂直方向にスクロールされた量をピクセル数で表す Number です。
Element.scrollTopMax (en-US) 読取専用: 要素で可能な上スクロールオフセットの最大値を表す Number を返します。
Element.scrollWidth 読取専用: 要素のスクロールビュー幅を表す Number を返します。
Element.shadowRoot読取専用: 要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。
Element.openOrClosedShadowRoot (en-US) 読取専用: オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。
Element.slot: 要素が挿入されている shadow DOM スロットの名前を返します。
Element.tagName 読取専用: 要素のタグ名を String で返します。

ARIA から導入されたプロパティ

Element インターフェイスは ARIAMixin ミックスインで定義されている以下のプロパティを持っています。

Element.ariaAtomic (en-US): DOMString で aria-atomic 属性を反映し、 aria-relevant 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
Element.ariaAutoComplete (en-US): DOMString で、 aria-autocomplete 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
Element.ariaBusy (en-US): DOMString で aria-busy 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
Element.ariaChecked (en-US): DOMString で aria-checked 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
Element.ariaColCount (en-US): DOMString で aria-colcount 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
Element.ariaColIndex (en-US): DOMString で aria-colindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
Element.ariaColIndexText (en-US): DOMString で aria-colindextext 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。
Element.ariaColSpan (en-US): DOMString で aria-colspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
Element.ariaCurrent (en-US): DOMString で aria-current 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
Element.ariaDescription (en-US): DOMString で aria-description 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
Element.ariaDisabled (en-US): DOMString で aria-disabled 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
Element.ariaExpanded (en-US): DOMString で aria-expanded 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
Element.ariaHasPopup (en-US): DOMString で aria-haspopup 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
Element.ariaHidden (en-US): DOMString で aria-hidden 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
Element.ariaKeyShortcuts (en-US): DOMString で aria-keyshortcuts 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
Element.ariaLabel (en-US): DOMString で aria-label 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
Element.ariaLevel (en-US): DOMString で aria-level 属性を反映し、構造内の要素の階層レベルを定義します。
Element.ariaLive (en-US): DOMString で aria-live 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
Element.ariaModal (en-US): DOMString で aria-modal 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
Element.ariaMultiline (en-US): DOMString で aria-multiline 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
Element.ariaMultiSelectable (en-US): DOMString で aria-multiselectable 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
Element.ariaOrientation (en-US): DOMString で aria-orientation 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
Element.ariaPlaceholder (en-US): DOMString で aria-placeholder 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
Element.ariaPosInSet (en-US): DOMString で aria-posinset 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
Element.ariaPressed (en-US): DOMString で aria-pressed 属性を反映し、トグルボタンの現在の「押された」状態を示します。
Element.ariaReadOnly (en-US): DOMString で aria-readonly 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
Element.ariaRelevant (en-US): DOMString で aria-relevant 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 aria-live リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
Element.ariaRequired (en-US): DOMString で aria-required 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
Element.ariaRoleDescription (en-US): DOMString で aria-roledescription 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
Element.ariaRowCount (en-US): DOMString で aria-rowcount 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
Element.ariaRowIndex (en-US): DOMString で aria-rowindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
Element.ariaRowIndexText (en-US): DOMString で aria-rowindextext 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。
Element.ariaRowSpan (en-US): DOMString で aria-rowspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
Element.ariaSelected (en-US): DOMString で aria-selected 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
Element.ariaSetSize (en-US): DOMString で aria-setsize 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
Element.ariaSort (en-US): DOMString で aria-sort 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
Element.ariaValueMax (en-US): DOMString で aria-valueMax 属性を反映し、 range ウィジェットの最大許容値を定義します。
Element.ariaValueMin (en-US): DOMString で aria-valueMin 属性を反映し、 range ウィジェットに許容される最小値を定義します。
Element.ariaValueNow (en-US): DOMString で aria-valueNow 属性を反映し、 range ウィジェットの現在の値を定義します。
Element.ariaValueText (en-US): DOMString で aria-valuetext 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。

イベントハンドラー

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

メソッド

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

EventTarget.addEventListener(): 要素に特定のイベント型を扱うイベントハンドラーを登録します。
Element.attachShadow(): 指定した要素に shadow DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
Element.animate(): 要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.append(): この要素の最後の子の後に、一連の Node オブジェクトまたは DOMString オブジェクトを挿入します。
Element.closest(): 引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を Element 型で返します。
Element.createShadowRoot() (en-US): 要素で shadow DOM を作成します。その要素はシャドウホストになります。 ShadowRoot を返します。
Element.computedStyleMap() (en-US): CSSStyleDeclaration に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する StylePropertyMapReadOnly (en-US) インターフェイスを返します。
EventTarget.dispatchEvent(): DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す Boolean を返します。
Element.getAnimations() (en-US): 要素でアクティブな Animation オブジェクトの配列を返します。
Element.getAttribute(): 現在ノードから指定された名前の付いた属性値を取得して、 Object を返します。
Element.getAttributeNames(): 現在の要素の属性名の配列を返します。
Element.getAttributeNode(): 現在のノードから、指定された属性のノード表現を取得し、 Attr として返します。
Element.getAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを Attr として返します。
Element.getAttributeNS(): 現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、Object を返します。
Element.getBoundingClientRect(): 要素のサイズと、ビューポートにおける位置を返します。
Element.getBoxQuads(): DOMQuad (en-US) オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。
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(): 要素が指定されたセレクター文字列で選択されているか否かを示す Boolean を返します。
Element.prepend(): この要素の最初の子の前に、一連の Node オブジェクトまたは DOMString オブジェクトを挿入します。
Element.querySelector(): 要素に対して、指定したセレクターに一致する最初の Node を返します。
Element.querySelectorAll(): 要素に対して、指定したセレクターに一致するノードの NodeList を返します。
Element.releasePointerCapture(): 以前に特定の pointer イベント向けに設定したポインターキャプチャーを解放 (停止) します。
Element.remove(): 親要素の子リストから、要素を取り除きます。
Element.removeAttribute(): 現在ノードから，指定された名前を持つ属性を取り除きます。
Element.removeAttributeNode(): 現在のノードから名前の付いた属性のノード表現を削除します。
Element.removeAttributeNS(): 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
EventTarget.removeEventListener(): 要素からイベントリスナーを取り除きます。
Element.replaceChildren() (en-US): Node の既存の子を指定された新しい一連の子に置き換えます。
Element.replaceWith(): 親の子リストの要素を、一連の Node または DOMString オブジェクトで置き換えます。
Element.requestFullscreen(): 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
Element.requestPointerLock() (en-US): 指定した要素でポインターをロックするよう、非同期的に要求できます。
Element.scroll(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.scrollBy(): 指定された量だけ要素をスクロールします。
Element.scrollIntoView(): 要素がビューの内側に来るまでページをスクロールします。
Element.scrollTo(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.setAttribute(): 現在ノードに、指定された名前を持つ属性値を設定します。
Element.setAttributeNode(): 現在のノードから指定された属性のノード表現を設定します。
Element.setAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
Element.setAttributeNS(): 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
Element.setCapture(): すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
Element.setPointerCapture(): 以降の pointer イベントのキャプチャー対象とする、特定の要素を指定します。
Element.toggleAttribute() (en-US): 指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。

イベント

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

cancel: ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに <dialog> に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。
oncancel プロパティから利用することもできます。
error: リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
onerror (en-US) プロパティから利用することもできます。
scroll: 文書のビューまたは要素がスクロールしたときに発生します。
onscroll プロパティから利用することもできます。
select: いくらかのテキストが選択されたときに発生します。
onselect プロパティから利用することもできます。
show: contextmenu (en-US) イベントが 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 (en-US): キーが押されたときに発生します。
onkeydown プロパティから利用することもできます。
keypress (en-US): 文字の値を発生させるキーが押されたときに発生します。
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: 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。
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 プロパティから利用することもできます。

仕様書

Specification
DOM Standard (DOM) # interface-element
Pointer Events # extensions-to-the-element-interface
Pointer Lock 2.0 # extensions-to-the-element-interface
Fullscreen API Standard (Fullscreen API) # api
DOM Parsing and Serialization # extensions-to-the-element-interface
CSSOM View Module (CSSOM View) # extension-to-the-element-interface

ブラウザーの互換性

BCD tables only load in the browser