DOM

Element インターフェイス

 編集:2022.11.10 by T.A.

[Edge]。→

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

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

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

EventTargetNode ← Element

ParentNodeNonDocumentTypeChildNode インターフェイスを含んでいます(includes)。

プロパティ
element.assignedSlot 読取専用
element が挿入された <slot> 要素を表す HTMLSlotElement で返します。
element.attributes 読取専用
element に登録された全ての属性ノードのコレクションを NamedNodeMap で返します。
element.childElementCount 読取専用
element の子要素数を整数値で返します。

ParentNode の mixin による。

element.children 読取専用
element のすべての子要素を含むライブ内容のリストを HTMLCollection で返します。

ParentNode の mixin による。

element.classList 読取専用
element の生きた class 属性のリストを DOMTokenList で返します。
element.className
element の class 属性の値を文字列で取得/設定をします。
element.clientHeight 読取専用
element のパディング領域を含む要素内容の高さを数値で返します。スクロール バー幅は含みません。
element.clientLeft 読取専用
element が配置された場所からパディング領域までの距離を数値で返す。実質 element の左ボーダー幅に一致する?。
element.clientTop 読取専用
element の上ボーダーの幅のピクセル数を表す数値を返します。
element.clientWidth 読取専用
element のパディング領域を含む要素内容の横幅を数値で返します。スクロール バー幅は含みません。
element.firstElementChild 読取専用
element の最初の子要素を Element で返します。子要素がない場合は null を返します。

ParentNode の mixin による。

element.id
element の識別子を文字列で取得/設定します。
element.innerHTML
element の HTML、XML のマークアップを文字列で取得/設定します。
element.innerText
element のテキスト内容を文字列で取得/設定する。
element.lastElementChild 読取専用
element の最後の子要素を Element で返します。子要素がない場合は null を返します。

ParentNode の mixin による。

element.localName 読取専用
element の修飾名のローカル部分を文字列で返します。
element.namespaceURI 読取専用
element の名前空間 URI を文字列で返します。この要素が名前空間に所属していない場合は null を返します。
element.nextElementSibling 読取専用
element の次の兄弟要素を Element で返します。該当がなければ null。

NonDocumentTypeChildNode インターフェイスによる。

element.outerHTML
element の自身のタグを含む要素 HTML 内容を文字列で取得/設定します。
element.outerText
element 自身のタグを含めてテキストを文字列で取得/設定します。

設定した場合は要素全体がテキストになってしまうことに注意。

element.part
element の部品識別子(すなわち part 属性を使用して設定されたもの)を DOMTokenList で返します。
element.prefix 読取専用
element の名前空間の接頭辞を文字列で返します。接頭辞が指定されていない場合は null となります。
element.previousElementSibling 読取専用
element の兄弟関係で兄の要素を Element で返します。該当が無い場合は null となります。

NonDocumentTypeChildNode インターフェイスによる。

element.scrollHeight 読取専用
element のスクロール部など隠れた部分を含めた中身の高さを数値で返します。
element.scrollLeft
element の内容が左端からスクロールするピクセル数を数値で取得/設定します。
element.scrollLeftMax 読取専用 非推奨
element で可能な最大の左スクロール オフセットを表す数値を返します。
element.scrollTop
element の内容が垂直にスクロールするピクセル数を数値で取得/設定します。
element.scrollTopMax 読取専用 非推奨
element で可能な最大の上スクロール オフセットを表す数値を返します。
element.scrollWidth 読取専用
element のスクロールで隠れた部分も含めた内容の横幅を数値で示します。
element.shadowRoot 読取専用
element がホストになっているシャドウルートを ShadowRoot で表します。
element.openOrClosedShadowRoot 読取専用 非推奨
element が保持しているシャドウルートを ShadowRoot で返します、mode が open であるか closed であるかに関わらず。
element.slot 実験的
element が挿入されたシャドウ DOM のスロットの名前を文字列で取得/設定します。
element.tagName 読取専用
element の名前を文字列で返します。
ARIA から導入されたプロパティ

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

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

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

EventTarget.addEventListener(TypeString, Listener, )
EventTarget に指定のイベントが起こるたびに指定の関数処理をさせるように組み込みます。
element.attachShadow(ShadowRootInit)
element に shadow DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
element.animate(Keyframes, Option) 実験的
element に指定のアニメーションを適用し再生します。

Animation オブジェクトのインスタンスを返します。

element.append(...NodeやDOMStrings)
element の最後の子ノードとして、指定の NodeDOMString オブジェクトを挿入します。

ParentNode の mixin による。

element.closest(selectors)
element と、その親に(文書ルートに)向かって、指定された CSS セレクターに一致するノードが見つかるまで探索し Element を返します
element.createShadowRoot() 非標準 非推奨 [Edge]⛌ 削除
element でシャドウ DOM ShadowRoot を作成して返します。→attachShadow()
element.computedStyleMap() 実験的
element に定義されているスタイルシートを取得し StylePropertyMapReadOnly で返します。
EventTarget.dispatchEvent(event)
EventTarget で指定のイベント起動させます。
element.getAnimations(options) 実験的
element にスケジュールされている全てのアニメーション オブジェクトを配列で返します。¶スケジュールはスクリプトによるもの?。
element.getAttribute(attrName)
element の指定属性の値を文字列で返します。
element.getAttributeNames()
element に指定されている属性の名前を文字列の配列で返します。
element.getAttributeNode(attrName)
element の指定された属性を属性ノード Attr で返します。
element.getAttributeNodeNS(名前空間, 属性名)
element の指定された名前空間の名前を持つ指定属性を属性ノード Attr で返します。
element.getAttributeNS(名前空間, 属性名)
element の指定された名前空間の名前を持つ指定属性の値を文字列で返します。
element.getBoundingClientRect()
element とそのビューポートに対する配置位置と要素寸法に関する情報を表す DOMRect で返します。
element.getBoxQuads() 実験的
DOMQuad オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。
element.getClientRects()
element とそのビューポートに対する配置位置と要素寸法に関する情報を表す DOMRect のコレクションを返します。
element.getElementsByClassName(classNames)
element 内の指定されたクラス名を含むすべての子要素を、生きた HTMLCollection で返します。
element.getElementsByTagName(tagName)
element 内の指定タグ名の要素の生きたリストを HTMLCollection で返します。
element.getElementsByTagNameNS(名前空間URI, ローカル名)
element 内の指定された名前空間に属する、指定されたタグ名を持つ要素のリストを HTMLCollection でライブで返します。
element.hasAttribute(属性名)
element が指定の属性を持つか否かを真偽値で返します。
element.hasAttributeNS(名前空間, ローカル名)
element が指定された名前空間で指定した属性を所有するか否かを Boolean で返します。
element.hasAttributes()
element が属性を1つでも持っているか否かを Boolean で返します。
element.hasPointerCapture(ポインターID)
element が与えられたポインターID によって識別されるポインタに対するポインター キャプチャを持つかどうかを Boolean で示します。
element.insertAdjacentElement(挿入位置, 要素ノード)
element の開始タグまたは終了タグの隣に指定のノードを挿入します。
element.insertAdjacentHTML(位置, HTMLテキスト)
element の開始タグまたは終了タグの隣に指定の HTML/XML テキストを挿入します。
element.insertAdjacentText(位置, テキスト)
element の開始タグまたは終了タグの隣に指定のテキストを挿入します。
element.matches(セレクター)
element が指定されたセレクターで選択されるか否かを返します。
element.prepend(…NodeやDOMString)
element の最初の子ノードの前に指定の NodeDOMString オブジェクトを挿入します。

ParentNode の mixin による。

element.querySelector(セレクターs)
element の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。

ParentNode の mixin による。

element.querySelectorAll(セレクターs)
element の子孫要素のうち、セレクター群に一致するもののリストを静的な(ライブではない)NodeList で返します。

ParentNode の mixin による。

element.releasePointerCapture(ポインターID)
element の、指定のポインター ID のポインター キャプチャを解放(停止)します。
element.remove()
element を DOM ツリーから除去します。
element.removeAttribute(属性名)
element の指定された属性を削除します。
element.removeAttributeNode(Attr)
element の指定された属性を削除します。削除された Attr ノードが返ります。
element.removeAttributeNS(名前空間, 属性名)
element の指定された名前空間を持つ指定属性を削除します。
EventTarget.removeEventListener(イベント名, EventListener, )
EventTarget から、以前に EventTarget.addEventListener() で登録されたイベント リスナーを削除します。
element.replaceChildren(...NodeやDOMString)
element の子ノードを指定のNodeDOMStringに置き換えます。

ParentNode の mixin による。

element.replaceWith(...NodeやDOMString)
element 自体を指定の NodeDOMString で置き換えます。
element.requestFullscreen() 実験的
element を全画面表示するためにブラウザーに要求し、Promise を返します。
element.requestPointerLock() 実験的
element でポインターをロックすることをブラウザーに要求します。
element.scroll(座標X, 座標Y)
element.scroll(オプション)
element の内容を指定の位置までスクロールします。
element.scrollBy(X量, Y量)
element.scrollBy(オプション)
element の内容を指定量だけスクロールします。
element.scrollIntoView([alignToTop])、
element.scrollIntoView(オプション)
実験的
element をユーザーに見えるところまで、親コンテナーをスクロールします。
element.scrollIntoViewIfNeeded() 非標準 非推奨
element がブラウザー ウィンドウの表示領域内にない場合にスクロールさせて見えるようにします。そして親コンテナー内で配置される。
element.scrollTo(X位置, Y位置)
element.scrollTo(オプション)
element の内容を指定座標までスクロールします。
element.setAttribute(属性名, )
element に指定された属性を追加、または変更します。
element.setAttributeNode(Attr)
element に指定された属性 Attr ノードを追加、または置き換えます。置き換えた場合は、置き換えられた Attr が返ります。
element.setAttributeNodeNS(Attr)
element に指定された名前空間を持つ属性名と値で属性を追加、または置き換えます。
element.setAttributeNS(名前空間, 属性名, )
element に指定された名前空間と属性名と値で属性を追加、または置き換えます。
element.setCapture(ターゲットFg) 非標準 削除 非推奨 [Edge]⛌
element のイベント処理中にこのメソッドを呼び出されると document.releaseCapture() が呼び出されるまでイベントを補足します。
element.setHTML(input, sanitizer) 実験的
element の内容の HTML を無害化して、代わりに HTML コードを置きます。
element.setPointerCapture(ポインターID)
イベントターゲット element を指定のポインター イベントでキャプチャ ターゲットとして設定します。
element.toggleAttribute(論理属性名, オプション)
イベントターゲット element の指定の論理属性の値を切り替えをします。属性の結果が true に値する場合は属性が追加され、false に値するなら削除されます。
element.webkitMatchesSelector(セレクター)
element に指定のセレクターを照合する¶。→matches()
イベント

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

cancel
ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに <dialog> に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザー インターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。oncancel プロパティからも利用できます。
error
リソースの読み込みに失敗したか、利用できなかった場合に発行されます。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。onerror プロパティからも利用できます。
scroll
文書のビューまたは要素がスクロールしたときに発行されます。onscroll プロパティからも利用できます。
select
いくらかのテキストが選択されたときに発行されます。onselect プロパティからも利用できます。
show
contextmenu イベントが contextmenu 属性 非推奨 廃止 を持つ要素で発生したか、バブリングで到達した場合に発行されます。onshow プロパティからも利用できます。
wheel
ユーザーがポインティングデバイス(普通はマウス)のホイールボタンを回転させたときに発行されます。onwheel プロパティからも利用できます。
securitypolicyviolation
の違反があった場合に発行されます。グローバルの onsecuritypolicyviolation プロパティからも利用できます。これは要素と DocumentWindow の各オブジェクトで利用できます。
クリップボード イベント
copy
ユーザーがブラウザーのユーザー インターフェイスを通して、コピー操作を行ったときに発行されます。oncopy プロパティからも利用できます。
cut
ユーザーがブラウザーのユーザー インターフェイスを通して、切り取り操作を行ったときに発行されます。oncut プロパティからも利用できます。
paste
ユーザーがブラウザーのユーザー インターフェイスを通して、貼り付け操作を行ったときに発行されます。onpaste プロパティからも利用できます。
構成イベント
compositionend
インプット メソッド エディターのようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
compositionstart
インプット メソッド エディターのようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。
compositionupdate
インプット メソッド エディターのようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。
フォーカス イベント
blur
要素がフォーカスを失ったときに発行されます。onblur プロパティからも利用できます。
focus
要素がフォーカスを受け取ったときに発行されます。onfocus プロパティからも利用できます。
focusin
要素がフォーカスを受け取ろうとしているときに発行されます。
focusout
要素がフォーカスを失おうとしているときに発行されます。
全画面イベント
fullscreenchange
全画面モードへの移行時または終了時に、Element に送られます。
fullscreenerror
全画面モードへの移行または終了を試みている中でエラーが発生したときに、Element に送られます。
キーボード イベント
keydown
要素でキーが押されたときに発生します。シフト キーなどの装飾キーも発生します。

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

keypress 非推奨
要素でキーが入力されたときに発行されます。シフト キーなどの装飾キーは発行されません。FEP など利用で変換入力では発行されません。

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

テスト