Latest web development tutorials
 

The HTML 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 are 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.classList Returns the class name(s) of an element
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, otherwise 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