DOM Element Object

HTML DOM Nodes

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

• The document itself is a document node
• All HTML elements are element nodes
• All HTML attributes are attribute nodes
• Text inside HTML elements are text nodes
• Comments are comment nodes

---

The Element Object

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

Element objects can have child nodes of type element nodes, text nodes, or comment nodes.

A NodeList object represents a list of nodes, like an HTML element's collection of child nodes.

Elements can also have attributes. Attributes are attribute nodes (See next chapter).

---

Browser Support

Object
Element	Yes	Yes	Yes	Yes	Yes
NodeList	Yes	Yes	Yes	Yes	Yes

The Element Object and the NodeList Object is supported in all major browsers.

---

Properties and Methods

The following properties and methods can be used on all HTML elements:

Property / Method	Description
element.accessKey	Sets or returns the accesskey attribute of an element
element.addEventListener()	Attaches an event handler to the specified element
element.appendChild()	Adds a new child node, to an element, as the last child node
element.attributes	Returns a NamedNodeMap of an element's attributes
element.blur()	Removes focus from an element
element.childElementCount	Returns the number of child elements an element has
element.childNodes	Returns a collection of an element's child nodes (including text and comment nodes)
element.children	Returns a collection of an element's child element (excluding text and comment nodes)
element.className	Sets or returns the value of the class attribute of an element
element.click()	Simulates a mouse-click on an element
element.clientHeight	Returns the height of an element, including padding
element.clientLeft	Returns the width of the left border of an element
element.clientTop	Returns the width of the top border of an element
element.clientWidth	Returns the width of an element, including padding
element.cloneNode()	Clones an element
element.compareDocumentPosition()	Compares the document position of two elements
element.contains()	Returns true if a node is a descendant of a node, othwerwise false
element.contentEditable	Sets or returns whether the content of an element is editable or not
element.dir	Sets or returns the value of the dir attribute of an element
element.firstChild	Returns the first child node of an element
element.firstElementChild	Returns the first child element of an element
element.focus()	Gives focus to an element
element.getAttribute()	Returns the specified attribute value of an element node
element.getAttributeNode()	Returns the specified attribute node
element.getElementsByClassName()	Returns a collection of all child elements with the specified class name
element.getElementsByTagName()	Returns a collection of all child elements with the specified tag name
element.getFeature()	Returns an object which implements the APIs of a specified feature
element.hasAttribute()	Returns true if an element has the specified attribute, otherwise false
element.hasAttributes()	Returns true if an element has any attributes, otherwise false
element.hasChildNodes()	Returns true if an element has any child nodes, otherwise false
element.id	Sets or returns the value of the id attribute of an element
element.innerHTML	Sets or returns the content of an element
element.insertBefore()	Inserts a new child node before a specified, existing, child node
element.isContentEditable	Returns true if the content of an element is editable, otherwise false
element.isDefaultNamespace()	Returns true if a specified namespaceURI is the default, otherwise false
element.isEqualNode()	Checks if two elements are equal
element.isSameNode()	Checks if two elements are the same node
element.isSupported()	Returns true if a specified feature is supported on the element
element.lang	Sets or returns the value of the lang attribute of an element
element.lastChild	Returns the last child node of an element
element.lastElementChild	Returns the last child element of an element
element.namespaceURI	Returns the namespace URI of an element
element.nextSibling	Returns the next node at the same node tree level
element.nextElementSibling	Returns the next element at the same node tree level
element.nodeName	Returns the name of a node
element.nodeType	Returns the node type of a node
element.nodeValue	Sets or returns the value of a node
element.normalize()	Joins adjacent text nodes and removes empty text nodes in an element
element.offsetHeight	Returns the height of an element, including padding, border and scrollbar
element.offsetWidth	Returns the width of an element, including padding, border and scrollbar
element.offsetLeft	Returns the horizontal offset position of an element
element.offsetParent	Returns the offset container of an element
element.offsetTop	Returns the vertical offset position of an element
element.ownerDocument	Returns the root element (document object) for an element
element.parentNode	Returns the parent node of an element
element.parentElement	Returns the parent element node of an element
element.previousSibling	Returns the previous node at the same node tree level
element.previousElementSibling	Returns the previous element at the same node tree level
element.querySelector()	Returns the first child element that matches a specified CSS selector(s) of an element
element.querySelectorAll()	Returns all child elements that matches a specified CSS selector(s) of an element
element.removeAttribute()	Removes a specified attribute from an element
element.removeAttributeNode()	Removes a specified attribute node, and returns the removed node
element.removeChild()	Removes a child node from an element
element.replaceChild()	Replaces a child node in an element
element.removeEventListener()	Removes an event handler that has been attached with the addEventListener() method
element.scrollHeight	Returns the entire height of an element, including padding
element.scrollLeft	Sets or returns the number of pixels an element's content is scrolled horizontally
element.scrollTop	Sets or returns the number of pixels an element's content is scrolled vertically
element.scrollWidth	Returns the entire width of an element, including padding
element.setAttribute()	Sets or changes the specified attribute, to the specified value
element.setAttributeNode()	Sets or changes the specified attribute node
element.style	Sets or returns the value of the style attribute of an element
element.tabIndex	Sets or returns the value of the tabindex attribute of an element
element.tagName	Returns the tag name of an element
element.textContent	Sets or returns the textual content of a node and its descendants
element.title	Sets or returns the value of the title attribute of an element
element.toString()	Converts an element to a string
nodelist.item()	Returns the node at the specified index in a NodeList
nodelist.length	Returns the number of nodes in a NodeList