Element

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

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

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

Element.attributes 読取専用

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

Element.classList 読取専用

class 属性のトークンリストを含む DOMTokenList を返します。

Element.className

DOMString 型であり、要素のクラスを表します。

Element.clientHeight 読取専用

要素の内部高さを表す Number を返します。

Element.clientLeft 読取専用

要素の左ボーダーの幅を表す Number を返します。

Element.clientTop 読取専用

要素の上ボーダーの幅を表す Number を返します。

Element.clientWidth 読取専用

要素の内部幅を表す Number を返します。

Element.computedName 読取専用

アクセシビリティ向けに公開されたラベルを含む DOMString を返します。

Element.computedRole 読取専用

特定の要素に適用された ARIA ロールを含む DOMString を返します。

Element.id

DOMString 型であり、要素の id を表します。

Element.innerHTML

DOMString 型であり、要素内容のマークアップを表します。

Element.localName 読取専用

要素の修飾名のローカル部分を表す DOMString です。

Element.namespaceURI 読取専用

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

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

NonDocumentTypeChildNode.nextElementSibling 読取専用

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

Element.outerHTML

DOMString 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。

Element.prefix 読取専用

要素の名前空間プレフィックスを表す DOMString。プレフィックスが指定されていない場合は null。

NonDocumentTypeChildNode.previousElementSibling 読取専用

Element 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ null。

Element.scrollHeight 読取専用

要素のスクロールビューの高さを表す Number を返します。

Element.scrollLeft

Number 型であり、要素の左スクロールオフセット値を表します。

Element.scrollLeftMax 読取専用

要素で可能な左スクロールオフセットの最大値を表す Number を返します。

Element.scrollTop

文書の上端が垂直方向にスクロールされた量をピクセル数で表す Number です。

Element.scrollTopMax 読取専用

要素で可能な上スクロールオフセットの最大値を表す Number を返します。

Element.scrollWidth 読取専用

要素のスクロールビュー幅を表す Number を返します。

Element.shadowRoot 読取専用

要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。

Element.openOrClosedShadowRoot 読取専用

オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。

Element.slot

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

Element.tabStop

Boolean 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。

Element.tagName 読取専用

要素のタグ名を String で返します。

Element.undoManager 読取専用

要素に関連する UndoManager を返します。

Element.undoScope

Boolean 型であり、要素が undo scope を提供しているか否かを示します。

Slotable に含まれるプロパティ

Element インターフェイスは、Slotable ミックスインで定義された以下のプロパティを含んでいます。

Slotable.assignedSlot読取専用

ノードが挿入されている <slot> を表す HTMLSlotElement を返します。

イベントハンドラー

Element.ongotpointercapture

gotpointercapture イベントのイベントハンドラーを返します。

Element.onlostpointercapture

lostpointercapture イベントのイベントハンドラーを返します。

廃止されたイベントハンドラー

Element.onwheel

wheel イベントのイベント処理コードを返します。現在、これは GlobalEventHandlers に実装されています。

メソッド

親である Node、およびその親である EventTarget からメソッドを継承します。そして ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable のメソッドを実装しています。

EventTarget.addEventListener()

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

Element.attachShadow()

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

Element.animate()

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

Element.closest()

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

Element.createShadowRoot()

要素で shadow DOM を作成します。その要素は Shadow Host になります。また、ShadowRoot を返します。

Element.computedStyleMap()

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

EventTarget.dispatchEvent()

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

Element.getAnimations()

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

Element.getAttribute()

現在ノードから指定された名前の付いた属性値を取得して、Object を返します。

Element.getAttributeNames()

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

Element.getAttributeNS()

現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、Object を返します。

Element.getAttributeNode()

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

Element.getAttributeNodeNS()

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

Element.getBoundingClientRect()

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

Element.getClientRects()

クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。

Element.getElementsByClassName()

現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ HTMLCollection を返します。

Element.getElementsByTagName()

現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した HTMLCollection を返します。

Element.getElementsByTagNameNS()

現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した HTMLCollection を返します。

Element.hasAttribute()

要素が指定された指定された属性を持っているか否かを示す Boolean を返します。

Element.hasAttributeNS()

要素が指定された名前空間内に指定された属性を持っているか否かを示す Boolean を返します。

Element.hasAttributes()

要素が現在 1 つ以上の属性をもっているかを示す Boolean を返します。

Element.insertAdjacentElement()

メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。

Element.insertAdjacentHTML()

テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。

Element.insertAdjacentText()

メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。

Element.matches()

要素が指定されたセレクター文字列で選択されているか否かを示す Boolean を返します。

Element.querySelector()

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

Element.querySelectorAll()

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

Element.releasePointerCapture()

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

ChildNode.remove()

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

Element.removeAttribute()

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

Element.removeAttributeNS()

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

Element.removeAttributeNode()

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

EventTarget.removeEventListener()

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

Element.requestFullscreen()

要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。

Element.requestPointerLock()

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

Element.scrollIntoView()

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

Element.setAttribute()

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

Element.setAttributeNS()

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

Element.setAttributeNode()

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

Element.setAttributeNodeNS()

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

Element.setCapture()

すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。

Element.setPointerCapture()

以降の pointer イベント のキャプチャー対象とする、特定の要素を指定します。

Element.toggleAttribute()

指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。

仕様

ブラウザー実装状況