Element

Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。

例えば HTMLElement インターフェイスは HTML 要素の基本インターフェイスであり、 SVGElement インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。

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

プロパティ

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

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

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

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

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

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

メソッド

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

EventTarget.addEventListener(): この要素、特定のイベント型を扱うイベントハンドラーを登録します。
Element.after(): Node または DOMString オブジェクトをこの Element の親の子ノードリストの中、 Element の直後に追加します。
Element.attachShadow(): 指定した要素にシャドウ DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
Element.animate() Experimental: この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.append(): この要素の最後の子の後に、一連の Node オブジェクトまたは DOMString オブジェクトを挿入します。
Element.before(): Node または DOMString オブジェクトをこの Element の親の子ノードリストの中、 Element の直前に追加します。
Element.closest(): Element 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。
Element.createShadowRoot() Non-Standard Deprecated: この要素にシャドウ DOM を作成し、シャドウホストにします。 ShadowRoot を返します。
Element.computedStyleMap() Experimental: StylePropertyMapReadOnly インターフェイスで、 CSSStyleDeclaration に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。
EventTarget.dispatchEvent(): DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。
Element.getAnimations() Experimental: 要素でアクティブな Animation オブジェクトの配列を返します。
Element.getAttribute(): 現在ノードから指定された名前付きの属性値を取得して文字列で返します。
Element.getAttributeNames(): 現在の要素の属性名の配列を返します。
Element.getAttributeNode(): 現在のノードから、指定された属性のノード表現を取得し、 Attr として返します。
Element.getAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを Attr として返します。
Element.getAttributeNS(): 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。
Element.getBoundingClientRect(): この要素のサイズと、ビューポートにおける位置を返します。
Element.getBoxQuads() Experimental: このノードの CSS フラグメントを表す DOMQuad (en-US) オブジェクトのリストを返します。
Element.getClientRects(): クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。
Element.getElementsByClassName(): 生きた HTMLCollection で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた HTMLCollection で、返します。
Element.getElementsByTagName(): 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた HTMLCollection で返します。
Element.getElementsByTagNameNS(): 生きた HTMLCollection で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた HTMLCollection で返します。
Element.hasAttribute(): 要素が指定された指定された属性を持っているか否かを示す論理値を返します。
Element.hasAttributeNS(): 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。
Element.hasAttributes(): 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。
Element.hasPointerCapture(): 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
Element.insertAdjacentElement(): メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
Element.insertAdjacentHTML(): テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。
Element.insertAdjacentText(): メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
Element.matches(): 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。
Element.prepend(): この要素の最初の子の前に、一連の Node オブジェクトまたは DOMString オブジェクトを挿入します。
Element.querySelector(): 要素に対して、指定したセレクターに一致する最初の Node を返します。
Element.querySelectorAll(): 要素に対して、指定したセレクターに一致するノードの NodeList を返します。
Element.releasePointerCapture(): 以前に特定のポインターイベント向けに設定したポインターキャプチャーを解放 (停止) します。
Element.remove(): 親要素の子リストから、要素を取り除きます。
Element.removeAttribute(): 現在ノードから，指定された名前を持つ属性を取り除きます。
Element.removeAttributeNode(): 現在のノードから名前の付いた属性のノード表現を取り除きます。
Element.removeAttributeNS(): 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
EventTarget.removeEventListener(): 要素からイベントリスナーを取り除きます。
Element.replaceChildren(): Node の既存の子を指定された新しい一連の子に置き換えます。
Element.replaceWith(): 親の子リストの要素を、一連の Node または DOMString オブジェクトで置き換えます。
Element.requestFullscreen() Experimental: 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
Element.requestPointerLock() Experimental: 指定した要素でポインターをロックするよう、非同期的に要求できます。
Element.scroll(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.scrollBy(): 指定された量だけ要素をスクロールします。
Element.scrollIntoView() Experimental: 要素がビューの内側に来るまでページをスクロールします。
Element.scrollTo(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.setAttribute(): 現在ノードに、指定された名前を持つ属性値を設定します。
Element.setAttributeNode(): 現在のノードから指定された属性のノード表現を設定します。
Element.setAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
Element.setAttributeNS(): 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
Element.setCapture() Non-Standard Deprecated: マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。
Element.setPointerCapture(): 指定された要素を、以降のポインターイベントのキャプチャー対象として指定します。
Element.toggleAttribute(): 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。

イベント

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

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

onselect プロパティからも利用できます。

show: contextmenu イベントが contextmenu 属性 Deprecated を持つ要素で発生したか、バブリングで到達した場合に発行されます。 onshow プロパティからも利用できます。
wheel: ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。 onwheel プロパティからも利用できます。
securitypolicyviolation (en-US): コンテンツセキュリティポリシーの違反があった場合に発行されます。グローバルの onsecuritypolicyviolation (en-US) プロパティからも利用できます。これは要素と Document と Window の各オブジェクトで利用できます。

クリップボードイベント

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

構成イベント

compositionend: インプットメソッドエディターのようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
compositionstart: インプットメソッドエディターのようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。
compositionupdate: インプットメソッドエディターのようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。

フォーカスイベント

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

全画面イベント

fullscreenchange: 全画面 (en-US)モードへの移行時または終了時に、 Element に送られます。
fullscreenerror: 全画面 (en-US)モードへの移行または終了を試みている中でエラーが発生したときに、 Element に送られます。

キーボードイベント

keydown (en-US): キーが押されたときに発行されます。

onkeydown プロパティからも利用できます。

keypress (en-US): 文字の値を発行させるキーが押されたときに発行されます。 Deprecated

onkeypress プロパティからも利用できます。

keyup (en-US): キーが離されたときに発行されます。

onkeyup プロパティからも利用できます。

マウスイベント

auxclick: ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。 onauxclick (en-US) プロパティからも利用できます。
click: ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。 onclick プロパティからも利用できます。
contextmenu: ユーザーがコンテキストメニューを開こうとしたときに発行されます。 oncontextmenu (en-US) プロパティからも利用できます。
dblclick: ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。 ondblclick (en-US) プロパティからも利用できます。
DOMActivate Deprecated: 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。
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 # interface-element
Pointer Events # extensions-to-the-element-interface
Pointer Lock 2.0 # extensions-to-the-element-interface
Fullscreen API Standard # api
DOM Parsing and Serialization # extensions-to-the-element-interface
CSSOM View Module # extension-to-the-element-interface

ブラウザーの互換性

BCD tables only load in the browser