Element

« DOM Reference

The Element interface represents an object within a DOM document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements.

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement it.

Properties

Inherits properties from its parents Node, and its own parent, EventTarget, and implements those of ParentNode and ChildNode.

Name Description Type
Node.attributes A list of all attributes associated with the element. Note that starting with Firefox 22, this is no longer supported, since it's been removed from the specification. This behavior is only available through Element.attributes. NamedNodeMap
ParentNode.childElementCount The number of child nodes that are elements. Number
ParentNode.children All child elements of an element as a collection. HTMLCollection
Element.classList Token list of class attribute DOMTokenList
Element.className Gets/sets the class of the element.
Though the specification requires className to be defined on the Element interface, Gecko-based browsers implement it on the HTMLElement interface only.
String
Element.clientHeight The inner height of an element. Number
Element.clientLeft The width of the left border of an element. Number
Element.clientTop The width of the top border of an element. Number
Element.clientWidth The inner width of an element. Number
ParentNode.firstElementChild The first direct child element of an element, or null if the element has no child elements. Element
Element.id Gets/sets the id of the element. String
Element.innerHTML Gets/sets the markup of the element's content. String
ParentNode.lastElementChild The last direct child element of an element, or null if the element has no child elements. Element
ElementTraversal.nextElementSibling The element immediately following the given one in the tree, or null if there's no sibling node. Element
Element.outerHTML
 
Gets the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string. String
ElementTraversal.previousElementSibling The element immediately preceding the given one in the tree, or null if there is no sibling element. Element
Element.scrollHeight The scroll view height of an element. Number
Element.scrollLeft Gets/sets the left scroll offset of an element. Number
Element.scrollTop Gets/sets the top scroll offset of an element. Number
Element.scrollWidth The scroll view width of an element. Number
Element.tagName The name of the tag for the given element. String
Element.undoManager The UndoManager associated with the element UndoManager
Element.undoScope The element is an undo scope host, or not Boolean

Event handlers

Element.oncopy 
Returns the event handling code for the copy event. (bug bug 280959)
Element.oncut 
Returns the event handling code for the cut event. (bug bug 280959)
Element.ongotpointercapture
...
Element.onlostpointercapture
...
Element.onpaste
Returns the event handling code for the paste event.(bug bug 280959)
element.onwheel
Returns the event handling code for the wheel event.

Methods

Inherits methods from its parents Node, and its own parent, EventTarget, and implements those of ElementTraversal, ParentNode and ChildNode.

Name & Description Return
EventTarget.addEventListener( type, listener, useCapture )
Register an event handler to a specific event type on the element.
-
EventTarget.dispatchEvent( event )
Dispatch an event to this node in the DOM.
Boolean
Element.find()  
Element.findAll()  
Element.getAttribute( name )
Retrieve the value of the named attribute from the current node.
Object
Element.getAttributeNS( namespace, name )
Retrieve the value of the attribute with the specified name and namespace, from the current node.
Object
Element.getAttributeNode( name )
Retrieve the node representation of the named attribute from the current node.
Attr
Element.getAttributeNodeNS( namespace, name )
Retrieve the node representation of the attribute with the specified name and namespace, from the current node.
Attr
Element.getBoundingClientRect ( )  

Element.getClientRects ( )
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.

 
Element.getElementsByClassName( ) HTMLCollection
Element.getElementsByTagName( name )
Retrieve a set of all descendant elements, of a particular tag name, from the current element.
HTMLCollection
Element.getElementsByTagNameNS( namespace, name )
Retrieve a set of all descendant elements, of a particular tag name and namespace, from the current element.
HTMLCollection
Element.hasAttribute( name )
Check if the element has the specified attribute, or not.
Boolean
Element.hasAttributeNS( namespace, name )
Check if the element has the specified attribute, in the specified namespace, or not.
Boolean
Element.requestPointerLock()  
Element.matches( selector )
Returns whether or not the element would be selected by the specified selector string.
Boolean
Element.requestFullscreen( )
Asynchronously asks the browser to make the element full-screen.
-
Element.querySelector( selectors[, nsresolver] ) Node
Element.querySelectorAll( selectors[, nsresolver] ) NodeList
Element.releasePointerCapture -
ChildNode.remove()
Remove the element.
-
Element.removeAttribute( name )
Remove the named attribute from the current node.
-
Element.removeAttributeNS( namespace, name )
Remove the attribute with the specified name and namespace, from the current node.
-
Element.removeAttributeNode( attrNode )
Remove the node representation of the named attribute from the current node.
-
EventTarget.removeEventListener( type, handler, useCapture )
Removes an event listener from the element.
-
Element.scrollIntoView( alignWithTop )
Scrolls the page until the element gets into the view.
-
Element.setAttribute( name, value )
Set the value of the named attribute from the current node.
-
Element.setAttributeNS( namespace, name, value )
Set the value of the attribute with the specified name and namespace, from the current node.
-
Element.setAttributeNode( name, attrNode )
Set the node representation of the named attribute from the current node.
-
Element.setAttributeNodeNS( namespace, name, attrNode )
Set the node representation of the attribute with the specified name and namespace, from the current node.
-
Element.setCapture( retargetToElement )
Sets up mouse event capture, redirecting all mouse events to this element.
-
Element.setPointerCapture -
Element.insertAdjacentHTML ( position, text )
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
-

Specifications

Specification Status Comment
UndoManager and DOMTransaction Editor's Draft Added the undoScope and undoManager properties.
Pointer Events Candidate Recommendation Added the following event handlers: ongotpointercapture and onlostpointercapture.
Added the following methods: setPointerCapture() and releasePointerCapture().
Selectors API Level 2 Working Draft Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
Selectors API Level 1 Recommendation Added the following methods: querySelector() and querySelectorAll().
Pointer Lock Working Draft 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 Working Draft Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
Element Traversal Specification Recommendation 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 Recommendation 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 Recommendation The normalize() method has been moved to Node.
Document Object Model (DOM) Level 1 Specification Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) 1.0
children (Yes) 3.0 (1.9) 7.0 with a significant bug [1]
9.0 according to the spec
(Yes) Not supported
childElementCount, nextElementSibling, previousElementSibling (Yes) 3.5 (1.9.1) 9.0 (Yes) (Yes)
firstElementChild, lastElementChild (Yes) 3.0 (1.9) 9.0 (Yes) (Yes)
classList (Yes) 3.6 (1.9.2)   (Yes) (Yes)
outerHTML (Yes) 11 (11) (Yes) (Yes) (Yes)
clientLeft, clientTop (Yes) 3.5 (1.9.1) (Yes) (Yes) (Yes)
getBoundingClientRect(), getClientRects() (Yes) 3.0 (1.9) (Yes) (Yes) (Yes)
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() Not supported 4.0 (2) Not supported Not supported Not supported
oncopy, oncut, onpaste Not supported 3.0 (1.9) (Yes)   Not supported
onwheel Not supported 17 (17) Not supported Not supported Not supported
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture() Not supported Not supported 10.0 MS Not supported Not supported
matches() (Yes) 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() Not supported Not supported Not supported Not supported Not supported
requestPointerLock() 16.0  webkit, behind an about:flags
22.0 webkit (with special cases, progressively lifted see [2])
14.0 moz Not supported Not supported Not supported
requestFullscreen() 14.0 webkit 10.0 moz 11.0 ms 12.10
15.0 webkit
5.1 webkit
undoManager and undoScope Not supported (Yes) (behind the dom.undo_manager.enabled pref) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) (Yes) (Yes) 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.