HTML DOM Element Object


In the HTML DOM (Document Object Model), everything is a node :

  • The document itself is a document object

  • All HTML elements are element nodes

  • All HTML attributes are attribute nodes

  • Text inserted into an HTML element is a text node

  • Comments are comment nodes

Element object

In the HTML DOM, an element object represents an HTML element.

The child can be, can be an element node, a text node, a comment node.

A NodeList object represents a list of nodes, similar to a collection of child nodes of an HTML element.

Elements can have attributes. Properties belong to property nodes (see next section).

Browser support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Element objects and NodeList objects are supported by all major browsers. .

Properties and methods

The above properties and methods apply to all HTML elements:

Property / MethodDescription
element.accessKeySet or return the accesskey of an element
element.addEventListener()Add an event handler to the specified element
element.appendChild()Add a new child element to the element
element.attributesReturn an array of attributes of an element
element.childNodesReturn an array of element's one child node
element.childrenReturn a collection of element's children
element.classListReturn the element's class name as a DOMTokenList object.
element.classNameSet or return the class attribute of an element
element.clientTopIndicate the width of an element's top border, in pixels.
element.clientLeftIndicate the width of an element's left border, in pixels.
element.clientHeightReturn the visual height of the content on the page (height includes padding, excluding borders, margins and scrollbars)
element.clientWidthReturn the visible width of the content on the page (width includes padding, excluding borders, margins and scrollbars)
element.cloneNode()clone an element
element.compareDocumentPosition()Compare the document positions of two elements.
element.contentEditableSet or return whether the content of the element is editable
element.dirSet or return the text direction in an element
element.firstChildReturn the first child of an element
element.focus()Set the document or element to get focus
element.getAttribute()Return the attribute value of the specified element
element.getAttributeNode()Return the specified attribute node
element.getElementsByTagName()Return a collection of all child elements of the specified tag name.
element.getElementsByClassName()Return a collection of all elements of the specified class name in the document, as a NodeList object.
element.getFeature()Return the execution APIs object for the specified feature.
element.getUserData()Return an object with the associated keys in an element.
element.hasAttribute()Return true if the specified attribute exists on the element, false otherwise.
element.hasAttributes()Return true if the element has any attributes, false otherwise.
element.hasChildNodes()Return whether an element has any child elements
element.hasFocus()Return a boolean value that detects whether the document or element has the focus
element.idSet or return the id of the element.
element.innerHTMLSet or return the content of the element.
element.insertBefore()Insert a new child element before an existing child element
element.isContentEditableTrue if the element content is editable, false otherwise
element.isDefaultNamespace()Return true if namespaceURI is specified, false otherwise.
element.isEqualNode()Check if two elements are equal
element.isSameNode()Check that both elements have the same node.
element.isSupported()Return true if the specified feature is supported in the element.
element .longSet or return the language of an element.
element.lastChildthe last child node returned
element.namespaceURIReturn the URI of the namespace.
element.nextSiblingReturn a node immediately following this element
element.nextElementSiblingReturn the next sibling element after the specified element (the next element node in the same node tree level).
element.nodeNameReturn the element's tagname (uppercase)
element.nodeTypeReturn the node type of the element
element.nodeValueReturn the node value of an element
element.normalize()Make this a "normal" form, where only structure (such as elements, comments, processing instructions, CDATA sections and entity references) separates Text nodes, i.e. all text nodes below elements (including attributes), neither adjacent Text nodes also don't have empty text nodes
element.offsetHeightReturn the height of any element including borders and padding, but not margins
element.offsetWidthReturn the width of the element, including borders and padding, but not margins
element.offsetLeftAn offset container that returns the relative horizontal offset position of the current element
element.offsetParentReturn the offset container of the element
element.offsetTopAn offset container that returns the relative vertical offset position of the current element
element.ownerDocumentReturn the root element of the element (the document object)
element.parentNodeReturn the parent node of the element
element.previousSiblingReturn an element immediately preceding the element
element.previousElementSiblingReturn the previous sibling of the specified element (the previous element node in the same node tree level).
element.querySelector()Return the first child element that matches the specified CSS selector element
document.querySelectorAll()Return a list of all child element nodes matching the specified CSS selector element
element.removeAttribute()Remove the specified attribute from the element
element.removeAttributeNode()Delete the specified attribute node and returns the removed node.
element.removeChild()Delete a child element
element.removeEventListener()Remove the event handler added by the addEventListener() method
element.replaceChild()Replace a child element
element.scrollHeightReturn the height of the entire element (including hidden places with scroll bars)
element.scrollLeftReturn the distance between the left edge and the left edge of the actual element in the current view
element.scrollTopReturn the distance between the top edge and the top edge of the actual element in the current view
element.scrollWidthReturn the entire width of the element (including hidden places with scroll bars)
element.setAttribute()Set or change the specified property and specify the value.
element.setAttributeNode()Set or change the specified property node.
element .setIdAttribute()
element .setIdAttributeNode()
element.setUserData()Associate an object within the element for the specified key value.
element.styleSet or return the style attribute of an element
element.tabIndexSet or return the element's label order.
element.tagNameReturn the tagname (uppercase) of an element as a string
element.textContentSet or return a node and its textual content
element.titleSet or return the title attribute of an element
element.toString()Convert an element to a string
nodelist.item()Return the index of an element based on the document tree
nodelist.lengthReturn the number of nodes in the node list.