Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Element インターフェイスは Document の一部分を表現します。このインターフェイスは個々の種類の要素に共通するメソッドとプロパティを記述するものです。特異な挙動は Element から継承した特異なインターフェイスで記述します。例えば HTML 要素には HTMLElement インターフェイス、SVG要素には SVGElement インターフェイスなど。

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

プロパティ

Node、自身の親、および EventTarget からプロパティを継承します。そして ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable のプロパティを実装しています。

Element.attributes 読取専用
その要素に関連したすべての属性のリストである NamedNodeMap を返します。
ParentNode.childElementCount 読取専用
Number 型であり、要素である子ノードの数を表します。
ParentNode.children 読取専用
HTMLCollection 型であり、collection としての要素のすべての子ノードを含みます。
Element.classList 読取専用
class 属性のトークンリストを含む DOMTokenList を返します。
Element.className
DOMString 型であり、要素のクラスを表します。
Element.clientHeight 読取専用
要素の内部高さを表す Number を返します。
Element.clientLeft 読取専用
要素の左ボーダーの幅を表す Number を返します。
Element.clientTop 読取専用
要素の上ボーダーの幅を表す Number を返します。
Element.clientWidth 読取専用
要素の内部幅を表す Number を返します。
ParentNode.firstElementChild 読取専用
Element 型であり、先頭の直接の子要素を表します。子要素がなければ null
Element.id
DOMString 型であり、要素の id を表します。
Element.innerHTML
DOMString 型であり、要素内容のマークアップを表します。
ParentNode.lastElementChild 読取専用
Element 型であり、末尾の直接の子要素を表します。子要素がなければ null
Element.localName 読取専用
 
Element.namespaceURI 読取専用
要素の名前空間の URI。名前空間がない場合は null になります。Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。
最近の仕様では namespaceURIElement インターフェイスで定義することが要求されていますが、Gecko ベースのブラウザは現在も Node インターフェイスで実装しています。
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 を返します。
Element.tabStop
Boolean 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。
Element.tagName 読取専用
要素のタグ名を String で返します。
Element.undoManager 読取専用
要素に関連する UndoManager を返します。
Element.undoScope
Boolean 型であり、要素が undo scope を提供しているか否かを示します。

イベントハンドラ

Element.ongotpointercapture
gotpointercapture イベントのイベントハンドラを返します。
Element.onlostpointercapture
lostpointercapture イベントのイベントハンドラを返します。
Element.onwheel
wheel イベントのイベント処理コードを返します。

メソッド

Node、自身の親、および EventTarget からメソッドを継承します。そして ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable のメソッドを実装しています。

EventTarget.addEventListener()
要素に特定のイベント型を扱うイベントハンドラを登録します。
Element.attachShadow()
指定した要素に shadow DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
Element.animate()
要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.closest()
引数に指定したセレクタによって選択される要素がもっとも近い祖先要素である子孫要素 (または当該要素自身) を Element 型で返します。
Element.createShadowRoot()
要素で shadow DOM を作成します。その要素は Shadow Host になります。また、ShadowRoot を返します。
EventTarget.dispatchEvent()
DOM 内のこの (this) ノードにイベントを送ります。そして、少なくとも 1 つのハンドラがイベントをキャンセルしなかったことを示す Boolean を返します。
Element.find()
...
Element.findAll()
...
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.getDestinationInsertionPoints()
Element.getElementsByClassName()
現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ HTMLCollection を返します。
Element.getElementsByTagName()
現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した HTMLCollection を返します。
Element.getElementsByTagNameNS()
現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した HTMLCollection を返します。
Element.hasAttribute()
要素が指定された指定された属性を持っているか否かを示す Boolean を返します。
Element.hasAttributeNS()
要素が指定された名前空間内に指定された属性を持っているか否かを示す Boolean を返します。
Element.hasAttributes()
要素が現在 1 つ以上の属性をもっているかを示す Boolean を返します。
Element.insertAdjacentHTML
テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。
Element.matches()
要素が指定されたセレクタ文字列で選択されているか否かを示す Boolean を返します。
Element.querySelector()
Returns Node...
Element.querySelectorAll
Returns a 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 イベントのキャプチャー対象とする、特定の要素を指定します。

仕様

仕様書 策定状況 コメント
Shadow DOM 草案  
Web Animations 草案 getAnimations() メソッドを追加
UndoManager and DOMTransaction
Element の定義
勧告改訂案 undoScopeundoManager プロパティを追加した。
Pointer Events – Level 2
Element の定義
勧告改訂案 以下のイベントハンドラを追加: ongotpointercaptureonlostpointercapture
以下のメソッドを追加: setPointerCapture()releasePointerCapture()
Pointer Events
Element の定義
勧告 以下のイベントハンドラを追加: ongotpointercaptureonlostpointercapture
以下のメソッドを追加: setPointerCapture()releasePointerCapture()
Selectors API Level 2
Element の定義
草案 以下のメソッドを追加: matches() (mozMatchesSelector() として実装)、find()findAll()
Selectors API Level 1
Element の定義
勧告 以下のメソッドを追加: querySelector()querySelectorAll()
Pointer Lock
Element の定義
勧告候補 requestPointerLock() メソッドを追加
Fullscreen API
Element の定義
現行の標準 requestFullscreen() メソッドを追加
DOM Parsing and Serialization
Element の定義
草案 以下のプロパティを追加: innerHTMLouterHTML
以下のメソッドを追加: insertAdjacentHTML()
CSS Object Model (CSSOM) View Module
Element の定義
草案 以下のプロパティを追加: scrollTopscrollLeftscrollWidthscrollHeightclientTopclientLeftclientWidthclientHeight
以下のメソッドを追加: getClientRects()getBoundingClientRect()scrollIntoView()
Element Traversal Specification
Element の定義
勧告 ElementTraversal インターフェイスのインスタンスを追加。
DOM
Element の定義
現行の標準 以下のメソッドを削除: closest()setIdAttribute()setIdAttributeNS()setIdAttributeNode()
schemaTypeInfo プロパティを削除。
getElementsByTag() および getElementsByTagNS() の戻り値を変更。
hasAttributes() を、Node インターフェイスから移動。
Document Object Model (DOM) Level 3 Core Specification
Element の定義
勧告 以下のメソッドを追加: setIdAttribute()setIdAttributeNS()setIdAttributeNode()。これらのメソッドは実装されず、後の仕様で削除されました。
schemaTypeInfo プロパティを追加。このプロパティ杯実装されず、後の仕様で削除されました。
Document Object Model (DOM) Level 2 Core Specification
Element の定義
勧告 normalize() メソッドを Node に移動。
Document Object Model (DOM) Level 1 Specification
Element の定義
勧告 最初期の定義

ブラウザ互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier) (有) (有) 1.0
children (有) 3.0 (1.9) 7.0 重大な不具合あり [1]
9.0 仕様書どおりの実装
(有) 未サポート
childElementCount, nextElementSibling, previousElementSibling (有) 3.5 (1.9.1) 9.0 (有) (有)
firstElementChild, lastElementChild (有) 3.0 (1.9) 9.0 (有) (有)
classList (有) 3.6 (1.9.2)   (有) (有)
outerHTML (有) 11 (11) (有) (有) (有)
clientLeft, clientTop (有) 3.5 (1.9.1) (有) (有) (有)
getBoundingClientRect(), getClientRects() (有) 3.0 (1.9) (有) (有) (有)
querySelector(), querySelectorAll() 1.0 3.5 (1.9.1) 8.0 10.0 3.2 (525.3)
insertAdjacentHTML() 1.0 8 (8) 4.0 7.0 4.0 (527)
setCapture() 未サポート 4.0 (2) 未サポート 未サポート 未サポート
oncopy, oncut, onpaste 未サポート 3.0 (1.9) (有)   未サポート
onwheel 未サポート 17 (17) 未サポート 未サポート 未サポート
ongotpointercapture, onlostpointercapture, setPointerCapture(), releasePointerCapture() 未サポート (有) [3] 10.0 未サポート 未サポート
matches() (有) 非標準の名称 webkitMatchesSelector 3.6 (1.9.2) 非標準の名称 mozMatchesSelector
34 (34) 標準名称
9.0 非標準の名称 msMatchesSelector 11.5 非標準の名称 oMatchesSelector
15.0 非標準の名称 webkitMatchesSelector
5.0 非標準の名称 webkitMatchesSelector
find() and findAll() 未サポート 未サポート 未サポート 未サポート 未サポート
requestPointerLock() 16.0 webkit about:flags で制御
22.0 webkit (特定の場合に限るが、対象は順次拡大中 [2])
14 (14)moz 未サポート 未サポート 未サポート
requestFullscreen() 14.0 webkit 10 (10) moz 11.0 ms 12.10
15.0 webkit
5.1 webkit
undoManager, undoScope 未サポート (有) (設定 dom.undo_manager.enabled で制御) 未サポート 未サポート 未サポート
attributes ? 22 (22)
これより前は element が継承している Node インターフェイスで使用可能でした。
? ? ?
scrollTopMax(), scrollLeftMax() 未サポート 16 (16) 未サポート 未サポート 未サポート
closest() ? 35 (35) ? ? ?
hasAttributes() (有) 1.0 (1.7 or earlier) (Node インターフェイスに実装)
35 (35) (Element インターフェイスに実装)
(有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) (有) (有) 1.0
scrollTopMax(), scrollLeftMax() 未サポート 16.0 (16) 未サポート 未サポート 未サポート
closest() ? 35.0 (35) ? ? ?
hasAttributes() (有) 1.0 (1.0) (Node インターフェイスに実装)
35.0 (35) (Element インターフェイスに実装)
(有) (有) (有)

[1] Internet Explorer 7 および 8 は、誤ってコメントを要素の子の一部として返していました。これは Internet Explorer 9 で修正されました。

[2] Chrome 16 は webkitRequestPointerLock() をフルスクリーンに限り許可します。Chrome 21 は (許可を求めて) 信頼された web サイトで許可します。Chrome 22 はデフォルトで、同一オリジンのドキュメントでサポートします。Chrome 23 は sandbox 属性に非標準の値 webkit-allow-pointer-lock を設定した、サンドボックス化した <iframe> で許可します。

[3] 実装は撤回されました。バグ 1166347 をご覧ください。

ドキュメントのタグと貢献者

 このページの貢献者: sii, yyss, khalid32, acid, ethertank, kmdsbng, Potappo, kohei.yoshino, Mgjbot, Yama, Okome, Hfjapancom
 最終更新者: sii,