Element インターフェイスは Document の一部分を表現します。このインターフェイスは個々の種類の要素に共通するメソッドとプロパティを記述するものです。特異な挙動は Element から継承した特異なインターフェイスで記述します。例えば HTML 要素には HTMLElement インターフェイス、SVG要素には SVGElement インターフェイスなど。
XUL のようなウエッブプラットフォームの枠外の言語もまた，XULElement インターフェイスを通じて要素を実装しています。
プロパティ
親 Node、自身の親、および EventTarget からプロパティを継承します。そして ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable のプロパティを実装しています。
Element.attributes読取専用- その要素に関連したすべての属性のリストである
NamedNodeMapを返します。 ParentNode.childElementCount読取専用Number型であり、要素である子ノードの数を表します。ParentNode.children読取専用HTMLCollection型であり、collection としての要素のすべての子ノードを含みます。Element.classList読取専用- class 属性のトークンリストを含む
DOMTokenListを返します。 Element.classNameDOMString型であり、要素のクラスを表します。Element.clientHeight読取専用- 要素の内部高さを表す
Numberを返します。 Element.clientLeft読取専用- 要素の左ボーダーの幅を表す
Numberを返します。 Element.clientTop読取専用- 要素の上ボーダーの幅を表す
Numberを返します。 Element.clientWidth読取専用- 要素の内部幅を表す
Numberを返します。 ParentNode.firstElementChild読取専用Element型であり、先頭の直接の子要素を表します。子要素がなければnull。Element.idDOMString型であり、要素の id を表します。Element.innerHTMLDOMString型であり、要素内容のマークアップを表します。ParentNode.lastElementChild読取専用Element型であり、末尾の直接の子要素を表します。子要素がなければnull。Element.localName読取専用Element.namespaceURI読取専用- 要素の名前空間の URI。名前空間がない場合は
nullになります。Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーでhttps://www.w3.org/1999/xhtml名前空間内に存在します。
最近の仕様ではnamespaceURIをElementインターフェイスで定義することが要求されていますが、Gecko ベースのブラウザは現在もNodeインターフェイスで実装しています。 NonDocumentTypeChildNode.nextElementSibling読取専用Element型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければnull。Element.outerHTMLDOMString型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。Element.prefix読取専用- 要素の名前空間プレフィックスを表す
DOMString。プレフィックスが指定されていない場合はnull。 NonDocumentTypeChildNode.previousElementSibling読取専用Element型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければnull。Element.scrollHeight読取専用- 要素のスクロールビューの高さを表す
Numberを返します。 Element.scrollLeftNumber型であり、要素の左スクロールオフセット値を表します。Element.scrollLeftMax読取専用- 要素で可能な左スクロールオフセットの最大値を表す
Numberを返します。 Element.scrollTopNumber型であり、要素の上スクロールオフセット値を表します。Element.scrollTopMax読取専用- 要素で可能な上スクロールオフセットの最大値を表す
Numberを返します。 Element.scrollWidth読取専用- 要素のスクロールビュー幅を表す
Numberを返します。 Element.shadowRoot読取専用- 要素が所持しているもっとも若い Shadow Root を返します。
Element.tabStopBoolean型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。Element.tagName読取専用- 要素のタグ名を
Stringで返します。 Element.undoManager読取専用- 要素に関連する
UndoManagerを返します。 Element.undoScopeBoolean型であり、要素が undo scope を提供しているか否かを示します。
イベントハンドラ
Element.ongotpointercapturegotpointercaptureイベントのイベントハンドラを返します。Element.onlostpointercapturelostpointercaptureイベントのイベントハンドラを返します。Element.onwheelwheelイベントのイベント処理コードを返します。
メソッド
親 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を返します。 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 の定義 |
勧告改訂案 | undoScope と undoManager プロパティを追加した。 |
| Pointer Events – Level 2 Element の定義 |
勧告改訂案 | 以下のイベントハンドラを追加: ongotpointercapture、onlostpointercapture。以下のメソッドを追加: setPointerCapture()、releasePointerCapture()。 |
| Pointer Events Element の定義 |
勧告 | 以下のイベントハンドラを追加: ongotpointercapture、onlostpointercapture。以下のメソッドを追加: 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 の定義 |
草案 | 以下のプロパティを追加: innerHTML、outerHTML。以下のメソッドを追加: insertAdjacentHTML()。 |
| CSS Object Model (CSSOM) View Module Element の定義 |
草案 | 以下のプロパティを追加: scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight。以下のメソッドを追加: 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) 非標準の名称 mozMatchesSelector34 (34) 標準名称 |
9.0 非標準の名称 msMatchesSelector |
11.5 非標準の名称 oMatchesSelector15.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 をご覧ください。