Element

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

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

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

EventTarget Node Element

インスタンスプロパティ

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

Element.assignedSlot 読取専用

このノードが挿入された <slot> を表す HTMLSlotElement を返します。

Element.attributes 読取専用

対応する HTML 要素に関連したすべての属性のリストである NamedNodeMap を返します。

Element.childElementCount 読取専用

この要素の子要素の数を返します。

Element.children 読取専用

この要素の子要素を返します。

Element.classList 読取専用

class 属性のリストが入った DOMTokenList を返します。

Element.className

文字列で、この要素のクラスを表します。

Element.clientHeight 読取専用

この要素の内部の高さを表す数値を返します。

Element.clientLeft 読取専用

この要素の左境界の幅を表す数値を返します。

Element.clientTop 読取専用

この要素の上境界の幅を表す数値を返します。

Element.clientWidth 読取専用

この要素の内部の幅を表す数値を返します。

Element.elementTiming Experimental

PerformanceElementTiming API において要素を監視するためのマークとなる elementtiming 属性を に反映した文字列です。

Element.firstElementChild 読取専用

この要素の最初の子要素を返します。

Element.id

文字列で、この要素の id を表します。

Element.innerHTML

文字列で、この要素の内容のマークアップを表します。

Element.lastElementChild 読取専用

この要素の最後の子要素を返します。

Element.localName 読取専用

文字列で、この要素の修飾名のローカル部分を表します。

Element.namespaceURI 読取専用

この要素の名前空間の URI。名前空間がない場合は null になります。

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

Element.nextElementSibling 読取専用

Element で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ null になります。

Element.outerHTML

文字列で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。

Element.part

要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 DOMTokenList として返されます。

Element.prefix 読取専用

文字列で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は 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.slot

この要素が挿入されているシャドウ DOM スロットの名前を返します。

Element.tagName 読取専用

この要素のタグ名を文字列で返します。

ARIA から導入されたインスタンスプロパティ

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

Element.ariaAtomic

文字列で、aria-atomic 属性を反映し、 aria-relevant (en-US) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。

Element.ariaAutoComplete

文字列で、aria-autocomplete 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。

Element.ariaBusy

文字列で、aria-busy (en-US) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。

Element.ariaChecked

文字列で、aria-checked (en-US) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。

Element.ariaColCount

文字列で、aria-colcount (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。

Element.ariaColIndex

文字列で、aria-colindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。

Element.ariaColSpan

文字列で、aria-colspan (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。

Element.ariaCurrent

文字列で、aria-current (en-US) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。

Element.ariaDescription

文字列で、aria-description (en-US) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。

Element.ariaDisabled

文字列で、aria-disabled 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。

Element.ariaExpanded

文字列で、aria-expanded (en-US) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。

Element.ariaHasPopup

文字列で、aria-haspopup (en-US) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。

Element.ariaHidden

文字列で、aria-hidden (en-US) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。

Element.ariaKeyShortcuts

文字列で、aria-keyshortcuts (en-US) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。

Element.ariaLabel

文字列で、aria-label 属性を反映し、現在の要素をラベル付けする文字列値を定義します。

Element.ariaLevel

文字列で、aria-level (en-US) 属性を反映し、構造内の要素の階層レベルを定義します。

Element.ariaLive

文字列で、aria-live (en-US) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。

Element.ariaModal

文字列で、aria-modal (en-US) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。

Element.ariaMultiline

文字列で、aria-multiline 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。

Element.ariaMultiSelectable

文字列で、aria-multiselectable (en-US) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。

Element.ariaOrientation

文字列で、aria-orientation (en-US) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。

Element.ariaPlaceholder

文字列で、aria-placeholder (en-US) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。

Element.ariaPosInSet

文字列で、aria-posinset (en-US) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。

Element.ariaPressed

文字列で、aria-pressed (en-US) 属性を反映し、トグルボタンの現在の「押された」状態を示します。

Element.ariaReadOnly

文字列で、aria-readonly (en-US) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。

Element.ariaRelevant Non-standard

文字列で、aria-relevant (en-US) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 aria-live リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。

Element.ariaRequired

文字列で、aria-required (en-US) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。

Element.ariaRoleDescription

文字列で、aria-roledescription (en-US) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。

Element.ariaRowCount

文字列で、aria-rowcount (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。

Element.ariaRowIndex

文字列で、aria-rowindex (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。

Element.ariaRowSpan

文字列で、aria-rowspan (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。

Element.ariaSelected

文字列で、aria-selected (en-US) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。

Element.ariaSetSize

文字列で、aria-setsize (en-US) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。

Element.ariaSort

文字列で、aria-sort (en-US) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。

Element.ariaValueMax

文字列で、aria-valueMax (en-US) 属性を反映し、 range ウィジェットの最大許容値を定義します。

Element.ariaValueMin

文字列で、aria-valueMin (en-US) 属性を反映し、 range ウィジェットに許容される最小値を定義します。

Element.ariaValueNow

文字列で、aria-valueNow (en-US) 属性を反映し、 range ウィジェットの現在の値を定義します。

Element.ariaValueText

文字列で、aria-valuetext (en-US) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。

インスタンスメソッド

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

EventTarget.addEventListener()

この要素、特定のイベント型を扱うイベントハンドラーを登録します。

Element.after()

Node オブジェクトまたは文字列を、この Element の親の子ノードリストの中、 Element の直後に追加します。

Element.attachShadow()

指定した要素にシャドウ DOM ツリーを結びつけて、その ShadowRoot への参照を返します。

Element.animate()

この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。

Element.append()

この要素の最後の子の後に、一連の Node オブジェクトまたは文字列を挿入します。

Element.before()

Node オブジェクトまたは文字列をこの Element の親の子ノードリストの中、 Element の直前に追加します。

Element.closest()

Element 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素(または当該要素自身)を返します。

Element.computedStyleMap()

StylePropertyMapReadOnly インターフェイスで、 CSSStyleDeclaration に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。

EventTarget.dispatchEvent()

DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。

Element.getAnimations()

要素でアクティブな Animation オブジェクトの配列を返します。

Element.getAttribute()

現在ノードから指定された名前付きの属性値を取得して文字列で返します。

Element.getAttributeNames()

現在の要素の属性名の配列を返します。

Element.getAttributeNode()

現在のノードから、指定された属性のノード表現を取得し、 Attr として返します。

Element.getAttributeNodeNS()

指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを Attr として返します。

Element.getAttributeNS()

現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。

Element.getBoundingClientRect()

この要素のサイズと、ビューポートにおける位置を返します。

Element.getBoxQuads() Experimental

このノードの CSS フラグメントを表す DOMQuad オブジェクトのリストを返します。

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 オブジェクトまたは文字列を挿入します。

Element.querySelector()

要素に対して、指定したセレクターに一致する最初の Node を返します。

Element.querySelectorAll()

要素に対して、指定したセレクターに一致するノードの NodeList を返します。

Element.releasePointerCapture()

以前に特定のポインターイベント向けに設定したポインターキャプチャーを解放 (停止) します。

Element.remove()

親要素の子リストから、要素を取り除きます。

Element.removeAttribute()

現在ノードから,指定された名前を持つ属性を取り除きます。

Element.removeAttributeNode()

現在のノードから名前の付いた属性のノード表現を取り除きます。

Element.removeAttributeNS()

現在ノードから,指定された名前と名前空間を持つ属性を取り除きます。

EventTarget.removeEventListener()

要素からイベントリスナーを取り除きます。

Element.replaceChildren()

Node の既存の子を指定された新しい一連の子に置き換えます。

Element.replaceWith()

親の子リストの要素を、一連の Node オブジェクトまたは文字列で置き換えます。

Element.requestFullscreen()

要素を全画面表示するよう、ブラウザーへ非同期的に要求します。

Element.requestPointerLock()

指定した要素でポインターをロックするよう、非同期的に要求できます。

Element.scroll()

指定された要素の中で特定の座標のセットへスクロールします。

Element.scrollBy()

指定された量だけ要素をスクロールします。

Element.scrollIntoView()

要素がビューの内側に来るまでページをスクロールします。

Element.scrollIntoViewIfNeeded() Non-standard

現在の要素がまだブラウザーウィンドウの可視領域内にない場合、ブラウザーウィンドウの可視領域内にスクロールさせます。標準の Element.scrollIntoView() を代わりに使用してください。

Element.scrollTo()

指定された要素の中で特定の座標のセットへスクロールします。

Element.setAttribute()

現在ノードに、指定された名前を持つ属性値を設定します。

Element.setAttributeNode()

現在のノードから指定された属性のノード表現を設定します。

Element.setAttributeNodeNS()

指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。

Element.setAttributeNS()

現在ノードに、指定された名前と名前空間を持つ属性値を設定します。

Element.setCapture() Non-standard 非推奨

マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。

Element.setHTML() Experimental

HTML の文字列を解釈して無害化し、DOM にこの要素のサブツリーとして挿入します。

Element.setPointerCapture()

指定された要素を、以降のポインターイベントのキャプチャー対象として指定します。

Element.toggleAttribute()

論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。

イベント

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

beforematch Experimental

見つかるまでの間は非表示状態にある要素で、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを公開しようとしているときに発行されます。

cancel

ユーザーがブラウザーに、現在開いているモーダルダイアログを閉じたいと指示したときに <dialog> に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが Esc キーを押してモーダルダイアログを閉じた時です。

contentvisibilityautostatechange Experimental

content-visibility: auto が設定されている要素がユーザーに関連するコンテンツのスキップを開始または終了するときに、その要素を対象に発行されます。

scroll

文書のビューまたは要素がスクロールしたときに発行されます。

securitypolicyviolation

コンテンツセキュリティポリシーに違反したときに発生します。

wheel

ユーザーがポインティングデバイス(普通はマウス)のホイールボタンを回転させたときに発行されます。

クリップボードイベント

copy

ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。

cut

ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。

paste

ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。

構成イベント

compositionend

インプットメソッドエディターのようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。

compositionstart

インプットメソッドエディターのようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。

compositionupdate

インプットメソッドエディターのようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。

フォーカスイベント

blur

要素がフォーカスを失ったときに発行されます。

focus

要素がフォーカスを受け取ったときに発行されます。

focusin

要素がフォーカスを受け取ったとき、focus の後に発行されます。

focusout

要素がフォーカスを失ったとき、 blur の後に発行されます。

全画面イベント

fullscreenchange

全画面モードへの移行時または終了時に、 Element に送られます。

fullscreenerror

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

キーボードイベント

keydown

キーが押されたときに発行されます。

keypress 非推奨

文字の値を発行させるキーが押されたときに発行されます。

keyup

キーが離されたときに発行されます。

マウスイベント

auxclick

ポインティングデバイスの第一ボタン以外のボタン(例えば、マウスの左ボタン以外のボタン)が要素上で押されて離されたときに発行されます。

click

ポインティングデバイスのボタン(例えば、マウスの第一ボタン)が単一の要素上で押されて離されたときに発行されます。

contextmenu

ユーザーがコンテキストメニューを開こうとしたときに発行されます。

dblclick

ポインティングデバイスのボタン(例えば、マウスの第一ボタン)が単一の要素上で 2 回クリックされたときに発行されます。

DOMActivate 非推奨

要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。

mousedown

ポインティングデバイスのボタンが要素上で押されたときに発行されます。

mouseenter

ポインティングデバイス(ふつうはマウス)が、リスナーが割り当てられた要素の上へ移動したときに発行されます。

mouseleave

ポインティングデバイス(ふつうはマウス)が、リスナーが割り当てられた要素の外へ移動したときに発行されます。

mousemove

ポインティングデバイス(ふつうはマウス)が、要素の上を移動したときに発行されます。

mouseout

ポインティングデバイス(ふつうはマウス)が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。

mouseover

ポインティングデバイス(ふつうはマウス)が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。

mouseup

ポインティングデバイスのボタンが要素の上で離されたときに発行されます。

webkitmouseforcechanged Non-standard

trackpadtouchscreen の上の圧力が変化するたびに発行されます。

webkitmouseforcedown Non-standard

「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。

webkitmouseforcewillbegin Non-standard

mousedown イベントの前に発行されます。

webkitmouseforceup Non-standard

「強制クリック」が終了したといえるほど圧力が減少した直後の webkitmouseforcedown イベントの後で発行されます。

タッチイベント

touchcancel

1 つ以上のタッチ点が実装依存の理由により破棄された(例えば、タッチ点が多く作られすぎた)場合に発行されます。

touchend

1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。

touchmove

1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。

touchstart

1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。

仕様書

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