HTML DOM Element Object

Element Object

In the HTML DOM, the Element object represents an HTML element, such as P, DIV, A, TABLE, or any other HTML element.

Properties and Methods

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

Property / Method Description
accessKey Set or return the accesskey attribute of the element.
addEventListener() Attach an event handler to the element.
appendChild() Add (append) a new child node to the element.
attributes Return the NamedNodeMap of element attributes.
blur() Remove focus from the element.
childElementCount Return the number of child elements of the element.
childNodes Return the NodeList of child nodes of the element.
children Return the HTMLCollection of child elements of the element.
classList Return the class name of the element.
className Set or return the class attribute value of the element.
click() Simulate a mouse click on the element.
clientHeight Return the height of the element, including padding.
clientLeft Return the width of the left border of the element.
clientTop Return the width of the top border of the element.
clientWidth Return the width of the element, including padding.
cloneNode() Clone the element.
closest() Search for the closest element in the DOM tree that matches the CSS selector.
compareDocumentPosition() Compares the document positions of two elements.
contains() Returns true if the node is a descendant of the node.
contentEditable Sets or returns whether the content of the element is editable.
dir Sets or returns the value of the element's dir attribute.
firstChild Returns the first child node of an element.
firstElementChild Returns the first child element of an element.
focus() Focuses the element.
getAttribute() Returns the value of the element's attribute.
getAttributeNode() Returns the attribute node.
getBoundingClientRect() Returns the size of the element and its position relative to the viewport.
getElementsByClassName() Returns a collection of child elements with the given class name.
getElementsByTagName() Returns a collection of child elements with the given tag name.
hasAttribute() Returns true if the element has the given attribute.
hasAttributes() Returns true if the element has any attributes.
hasChildNodes() Returns true if the element has any child nodes.
element.id Sets or returns the value of the element's id attribute.
innerHTML Sets or returns the content of an element.
innerText Set or return the text content of the node and its descendants.
insertAdjacentElement() Inserts a new HTML element at a position relative to the element.
insertAdjacentHTML() Inserts HTML formatted text at a position relative to the element.
insertAdjacentText() Inserts text at a position relative to the element.
insertBefore() Inserts a new child node before an existing child node.
isContentEditable Returns true if the content of the element is editable.
isDefaultNamespace() Returns true if the given namespaceURI is the default value.
isEqualNode() Checks if two elements are equal.
isSameNode() Checks if two elements are the same node.
isSupported() Deprecated.
lang Sets or returns the lang attribute value of an element.
lastChild Returns the last child element of an element.
lastElementChild Return the last child element of the element.
matches() Return true if the element matches the given CSS selector.
namespaceURI Return the namespace URI of the element.
nextSibling Return the next node at the same node tree level.
nextElementSibling Return the next element at the same node tree level.
nodeName Return the name of the node.
nodeType Return the node type of the node.
nodeValue Set or return the value of the node.
normalize() Merge adjacent text nodes within the element and remove empty text nodes.
offsetHeight Return the height of the element, including padding, border, and scrollbar.
offsetWidth Return the width of the element, including padding, border, and scrollbar.
offsetLeft Return the horizontal offset position of the element.
offsetParent Return the offset container of the element.
offsetTop Return the vertical offset position of the element.
outerHTML Set or return the content of the element (including start and end tags).
outerText Set or return the external text content of the node and its descendants.
ownerDocument Return the root element (document object) of the element.
parentNode Return the parent node of the element.
parentElement Return the parent element node of the element.
previousSibling Return the previous node at the same node tree level.
previousElementSibling Return the previous element at the same node tree level.
querySelector() Return the first child element that matches the CSS selector.
querySelectorAll() Return all child elements that match the CSS selector.
remove() Remove the element from the DOM.
removeAttribute() Remove the attribute from the element.
removeAttributeNode() Remove the attribute node and return the removed node.
removeChild() Remove the child node from the element.
removeEventListener() Remove the event handler attached using the addEventListener() method.
replaceChild() Replace the child nodes of the element.
scrollHeight Return the total height of the element, including padding.
scrollIntoView() Scroll the element into the visible area of the browser window.
scrollLeft Set or return the number of pixels the content of the element is scrolled horizontally.
scrollTop Set or return the number of pixels the content of the element is scrolled vertically.
scrollWidth Return the overall width of the element, including padding.
setAttribute() Set or change the value of the attribute.
setAttributeNode() Set or change the attribute node.
style Set or return the value of the element's style attribute.
tabIndex Set or return the value of the element's tabindex attribute.
tagName Return the tag name of the element.
textContent Set or return the text content of the node and its descendants.
title Set or return the value of the element's title attribute.
toString() Convert an element to a string.

Detailed Explanation of the Element Interface

The Element interface represents an HTML element, an XML element, or a tag. The tagName property specifies the name of the element. The Document's documentElement property refers to the root Element object of this document. The HTMLDocument object's body property is similar, as it refers to the document's <body> element. To find an element with a specified name in an HTML document, use Document.getElementById() (and give the element a unique name through the id attribute). To locate elements by tag name, use getElementsByTagName(), which is both a method of Element and Document. In an HTML document, you can also use a similar HTMLDocument.getElementsByName() method to find elements based on the element's name attribute. Finally, you can use the Document.createElement() method to create a new Element element to be inserted into the document.

The addEventListener() method (and its IE-specific alternative attachEvent()) provides a way to register an event handler function for a specific type of event on the element. Technically, addEventListener(), removeEventListener(), and dispatchEvent() are all defined by the 2nd level DOM Events specification's EventTarget interface. All Element objects implement the EventTarget.

The various other methods of this interface provide access to the element's attributes. In HTML documents (and many XML documents), all attributes have simple string values, and you can use simple methods getAttribute() and setAttribute() for any attribute operations you need.

If you are using an XML document, it may include Entity reference pages as part of the attribute value. You will have to use the Attr object and its node subtree. You can use getAttributeNode() and setAttributeNode() to get and set the Attr object for a property, or you can traverse the Attr nodes in the attributes[] array of the Node interface. If you use an XML document with a namespace, you need to use various methods with names prefixed with "NS".

In the 1st level DOM specification, the normalize() method is part of the Element interface. In the 2nd level specification, normalize() is part of the Node interface. All Element nodes inherit this method and can still use it.

Knowledge Point: HTML DOM Nodes

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

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

Element Object

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

The Element object can have child nodes of types element node, text node, and comment node.

The NodeList object represents a list of nodes, such as the collection of child nodes of HTML elements.

Elements can also have attributes. Attributes are attribute nodes (see the next section).