Element

« DOM リファレンス

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

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

プロパティ

Node,自身の親,およびEventTargetからプロパティを継承します.そしてElementTraversal, ParentNodeおよびChildNodeのプロパティを実装しています.

プロパティ名 説明
Node.attributes その要素に関連したすべての属性のリスト. 仕様が削除されたため,Firefox 22以降サポートされないことに留意.この動作はElement.attributesを通じてのみ利用可能. NamedNodeMap
ParentNode.childElementCount 要素である子ノードの数. Number
ParentNode.children collectionとしての要素のすべての子ノード. HTMLCollection
Element.classList クラス属性のトークンリスト. DOMTokenList
Element.className

要素のクラスを取得し,設定します.仕様ではElementインターフェイスにclassNameを定義することが要求されていますが,GeckoベースのブラウザはHTMLElementインターフェイス上でのみ実装しています.

String
Element.clientHeight 要素の内部高さ. Number
Element.clientLeft 要素の左ボーダーの幅. Number
Element.clientTop 要素の上ボーダーの幅. Number
Element.clientWidth 要素の内部幅. Number
ParentNode.firstElementChild 先頭の直接の子要素.子要素がなければ null Element
Element.id 要素のidを取得し,設定します. String
Element.innerHTML 要素内容のマークアップを取得し,設定します. String
ParentNode.lastElementChild 末尾の直接の子要素.子要素がなければ null Element
ElementTraversal.nextElementSibling ツリー上自身の直後の要素(弟).兄弟ノードが無ければnull Element
Element.outerHTML その要素を内容に含むマークアップを取得し,設定します. 設定に用いる場合,与えられた文字列からパースされたノードでその要素を置換します. String
ElementTraversal.previousElementSibling ツリー上自身の直前の要素(兄).兄弟ノードが無ければnull Element
Element.scrollHeight 要素のスクロールビュー高さ. Number
Element.scrollLeft

要素の左スクロールオフセット値を取得し,設定します.

Number
Element.scrollTop 要素の上スクロールオフセット値を取得し,設定します. Number
Element.scrollWidth 要素のスクロールビュー幅. Number
Element.tagName 要素のタグ名. String
Element.undoManager 要素に関連するUndoManager UndoManager
Element.undoScope 要素がundo scopeを提供しているか否か.

Boolean

 

イベントハンドラ

Element.oncopy 
copyイベントのイベント処理コードを返します.( バグ 280959)
Element.oncut 
cutイベントのイベント処理コードを返します.( バグ 280959)
Element.ongotpointercapture
...
Element.onlostpointercapture
...
Element.onpaste
pasteイベントのイベント処理コードを返します.( バグ 280959)
element.onwheel
wheelイベントのイベント処理コードを返します.

 

メソッド

Node,自身の親,およびEventTargetからメソッドを継承します.そしてElementTraversal, ParentNodeおよびChildNodeのメソッドを実装しています.

メソッド名および説明 戻り値(型)
EventTarget.addEventListener( type, listener, useCapture )
要素に特定のイベント型を扱うイベントハンドラを登録します.
-
EventTarget.dispatchEvent( event )
DOM内のこの(this)ノードにイベントを送ります.
Boolean
Element.find()  
Element.findAll()  
Element.getAttribute( name )
現在ノードから指定された名前の付いた属性値を取得します.
Object
Element.getAttributeNS( namespace, name )
現在ノードから指定された名前と名前空間(namespase)を持つ属性値を取得します.
Object
Element.getAttributeNode( name )
現在ノードから指定された名前の属性のノード表現を取得します.
Attr
Element.getAttributeNodeNS( namespace, name )
現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得します.
Attr
Element.getBoundingClientRect ( )  

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

 
Element.getElementsByClassName( ) HTMLCollection
Element.getElementsByTagName( name )
現在要素から,特定のタグ名を持つすべての子孫要素の集合を取得します.
HTMLCollection
Element.getElementsByTagNameNS( namespace, name )
現在要素から,特定のタグ名と名前空間を持つすべての子孫要素の集合を取得します.
HTMLCollection
Element.hasAttribute( name )
要素が指定された指定された属性を持っているか否かを調べます.
Boolean
Element.hasAttributeNS( namespace, name )
要素が指定された名前空間内に指定された属性を持っているか否かを調べます.
Boolean
Element.requestPointerLock()  
Element.matches( selector )
要素が指定されたセレクタ文字列で選択されているか否かを返します.
Boolean
Element.requestFullscreen( )
要素を非同期的にフルスクリーンにするようブラウザに要求します.
-
Element.querySelector( selectors[, nsresolver] ) Node
Element.querySelectorAll( selectors[, nsresolver] ) NodeList
Element.releasePointerCapture -
Element.remove()
要素を取り除きます. ChildNode.remove()を参照.
-
Element.removeAttribute( name )
現在ノードから,指定された名前を持つ属性を取り除きます.
-
Element.removeAttributeNS( namespace, name )
現在ノードから,指定された名前と名前空間を持つ属性を取り除きます.
-
Element.removeAttributeNode( attrNode )
現在ノードから,指定された名前を持つ属性のノード表現を取り除きます.
-
EventTarget.removeEventListener( type, handler, useCapture )
要素からイベントリスナを取り除きます.
-
Element.scrollIntoView( alignWithTop )
要素がビューの内側に来るまでページをスクロールします.
-
Element.setAttribute( name, value )
現在ノードに,指定された名前を持つ属性値を設定します.
-
Element.setAttributeNS( namespace, name, value )
現在ノードに,指定された名前と名前空間を持つ属性値を設定します.
-
Element.setAttributeNode( name, attrNode )
現在ノードに,指定された名前を持つ属性値のノード表現を設定します.
-

Element.setAttributeNodeNS( namespace, name, attrNode )
現在ノードに,指定された名前と名前空間を持つ属性値のノード表現を設定します.

-
Element.setCapture( retargetToElement )
すべてのマウスイベントを要素にリダイレクトし,マウスイベントキャプチャを開始(set up)します.
-
Element.setPointerCapture -
Element.insertAdjacentHTML ( position, text )
テキストをHTMLまたはXMLとしてパースし,引数で与えられた位置にパース結果のノードを挿入します.
-

仕様

仕様 状態 コメント
UndoManager and DOMTransaction 勧告改訂案 undoScopeundoManager プロパティを追加した.
Pointer Events 勧告候補 Added the following event handlers: ongotpointercapture and onlostpointercapture.
Added the following methods: setPointerCapture() and releasePointerCapture().
Selectors API Level 2 草案 Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
Selectors API Level 1 勧告 Added the following methods: querySelector() and querySelectorAll().
Pointer Lock 草案 Added the requestPointerLock() method.
Fullscreen API Living Standard Added the requestFullscreen() method.
DOM Parsing and Serialization Living Standard Added the following properties: innerHTML, and outerHTML.
Added the following method: insertAdjacentHTML().
CSS Object Model (CSSOM) View Module 草案 Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
Element Traversal Specification 勧告 Added inheritance of the ElementTraversal interface.
DOM Living Standard Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
Removed the schemaTypeInfo property.
Document Object Model (DOM) Level 3 Core Specification 勧告 Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
Document Object Model (DOM) Level 2 Core Specification 勧告 The normalize() method has been moved to Node.
Document Object Model (DOM) Level 1 Specification 勧告 Initial definition.

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) (有) (有) 1.0
children 未サポート 3.0 (1.9) 7.0 with a significant bug [1]
9.0 according to the spec
未サポート 未サポート
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(), and releasePointerCapture() 未サポート 未サポート 10.0 MS 未サポート 未サポート
matches() (有) with the non-standard name webkitMatchesSelector 3.6 (1.9.2) with the non-standard name mozMatchesSelector 9.0 with the non-standard name msMatchesSelector 11.5 with the non-standard name oMatchesSelector
15.0 with the non-standard name webkitMatchesSelector
5.0 with the non-standard name webkitMatchesSelector
find() and findAll() 未サポート 未サポート 未サポート 未サポート 未サポート
requestPointerLock() 16.0  webkit, behind an about:flags
22.0 webkit (with special cases, progressively lifted see [2])
14.0 moz 未サポート 未サポート 未サポート
requestFullscreen() 14.0 webkit 10.0 moz 11.0 ms 12.10
15.0 webkit
5.1 webkit
undoManager and undoScope 未サポート (有) (behind the dom.undo_manager.enabled pref) 未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) (有) (有) 1.0

[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.

[2] Chrome 16 allowed webkitRequestPointerLock() only in fullscreen; Chrome 21 for trusted web site (permission asked);  Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed <iframe> if the non-standard value webkit-allow-pointer-lock is set to the sandbox attribute.

 

Document Tags and Contributors

Contributors to this page: ethertank, kmdsbng, Hfjapancom, Yoshino, Mgjbot, Yama, Potappo, Okome, acid
最終更新者: acid,