We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Element

ここへジャンプ:
  1. メソッド
  2. 仕様
  3. ブラウザー実装状況

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

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

プロパティ

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

Element.assignedSlot   読取専用
要素に関連付けられた HTMLSlotElement インターフェイスを返します。
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 を返します。
Element.slot
要素に関連付けた shadow DOM の名前を返します。slot は、ユーザーが独自のマークアップで埋めることが可能な web component 内のプレースホルダーです。
Element.tabStop
Boolean 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。
Element.tagName 読取専用
要素のタグ名を String で返します。
Element.undoManager 読取専用
要素に関連する UndoManager を返します。
Element.undoScope
Boolean 型であり、要素が undo scope を提供しているか否かを示します。

注記: DOM Level 3 では、Node インターフェスで namespaceURI、localName、prefix を定義しています。これらは DOM4 で Element に移動されました。

この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。

イベントハンドラー

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

メソッド

親である 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.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 イベント のキャプチャー対象とする、特定の要素を指定します。

仕様

仕様書 策定状況 コメント
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 インターフェイスから移動。
insertAdjacentElement() および insertAdjacentText() を追加。
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 の定義		 廃止された 最初期の定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge 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() 52.0 [4] (有) (有) [3] 10.0 未サポート 未サポート
matches() (有) 非標準の名称 webkitMatchesSelector (有) webkit ms 3.6 (1.9.2) 非標準の名称 mozMatchesSelector
34 (34) 標準名称		 9.0 非標準の名称 msMatchesSelector 11.5 非標準の名称 oMatchesSelector
15.0 非標準の名称 webkitMatchesSelector		 5.0 非標準の名称 webkitMatchesSelector
find(), 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 インターフェイスに実装)		 (有) (有) (有)
insertAdjacentElement(), insertAdjacentText() (有) 未サポート 48.0 (48.0) ? (有) (有)
assignedSlot, attatchShadow, shadowRoot, and slot 53 未サポート ? ? ? ?
computedRole, computedName 41[4] ? ? ? 28[4] ?
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Android 版 Chrome
基本サポート 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 インターフェイスに実装)		 (有) (有) (有)  
insertAdjacentElement(), insertAdjacentText() (有)   (有) 48.0 (48.0) ? (有) (有)  
assignedSlot, attatchShadow, shadowRoot, slot 未サポート 53.0 未サポート ? ? ? ? 53
computedRole, computedName 未サポート 未サポート ? ? ? 28[4] ? 未サポート

[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 をご覧ください。

[4] flag で制御しています。

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

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