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 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.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 |
