Element
Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。
例えば HTMLElement インターフェイスは HTML 要素の基本インターフェイスであり、 SVGElement インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。
XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを実装しています。
プロパティ
Element は、親インターフェイスである Node、およびその親インターフェイスである EventTarget からプロパティを継承しています。
Element.assignedSlot読取専用-
このノードが挿入された
<slot>を表すHTMLSlotElementを返します。 Element.attributes読取専用-
対応する HTML 要素に関連したすべての属性のリストである
NamedNodeMapを返します。 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になります。メモ: 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.scrollLeftMaxNon-standard 読取専用-
この要素で可能な左スクロールオフセットの最大値を表す数値を返します。
Element.scrollTop-
この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。
Element.scrollTopMaxNon-standard 読取専用-
要素で可能な上スクロールオフセットの最大値を表す数値を返します。
Element.scrollWidth読取専用-
要素のスクロールビュー幅を表す数値を返します。
Element.shadowRoot読取専用-
要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。
Element.openOrClosedShadowRootNon-standard 読取専用-
オープン・クローズに関係なく、要素が所持しているさh同ルートを返します。WebExtensions に限り使用できます。
Element.setHTML-
HTML の文字列を解釈して無害化し、 DOM の中にこの要素のサブツリーとして挿入します。
Element.slotExperimental-
この要素が挿入されているシャドウ 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-
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) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。 -
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(en-US) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。 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-
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()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()Element.querySelector()-
要素に対して、指定したセレクターに一致する最初の
Nodeを返します。 Element.querySelectorAll()-
要素に対して、指定したセレクターに一致するノードの
NodeListを返します。 Element.releasePointerCapture()-
以前に特定の
ポインターイベント向けに設定したポインターキャプチャーを解放 (停止) します。 Element.remove()-
親要素の子リストから、要素を取り除きます。
Element.removeAttribute()-
現在ノードから，指定された名前を持つ属性を取り除きます。
Element.removeAttributeNode()-
現在のノードから名前の付いた属性のノード表現を取り除きます。
Element.removeAttributeNS()-
現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
EventTarget.removeEventListener()-
要素からイベントリスナーを取り除きます。
Element.replaceChildren()-
Nodeの既存の子を指定された新しい一連の子に置き換えます。 Element.replaceWith()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の各オブジェクトで利用できます。
クリップボードイベント
構成イベント
compositionend-
インプットメソッドエディターのようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
compositionstart-
インプットメソッドエディターのようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。
compositionupdate-
インプットメソッドエディターのようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。
フォーカスイベント
全画面イベント
fullscreenchangefullscreenerror-
全画面モードへの移行または終了を試みている中でエラーが発生したときに、
Elementに送られます。
キーボードイベント
マウスイベント
auxclick-
ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。
onauxclick(en-US) プロパティからも利用できます。 click-
ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。
onclickプロパティからも利用できます。 -
ユーザーがコンテキストメニューを開こうとしたときに発行されます。
oncontextmenu(en-US) プロパティからも利用できます。 dblclick-
ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。
ondblclick(en-US) プロパティからも利用できます。 DOMActivateDeprecated-
要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。
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プロパティからも利用できます。
仕様書
ブラウザーの互換性
BCD tables only load in the browser