HTML DOM Element Object
HTML DOM node
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
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 / Method | Description |
|---|---|
| element.accessKey | Set 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.attributes | Return an array of attributes of an element |
| element.childNodes | Return an array of element's one child node |
| element.children | Return a collection of element's children |
| element.classList | Return the element's class name as a DOMTokenList object. |
| element.className | Set or return the class attribute of an element |
| element.clientTop | Indicate the width of an element's top border, in pixels. |
| element.clientLeft | Indicate the width of an element's left border, in pixels. |
| element.clientHeight | Return the visual height of the content on the page (height includes padding, excluding borders, margins and scrollbars) |
| element.clientWidth | Return 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.contentEditable | Set or return whether the content of the element is editable |
| element.dir | Set or return the text direction in an element |
| element.firstChild | Return 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.id | Set or return the id of the element. |
| element.innerHTML | Set or return the content of the element. |
| element.insertBefore() | Insert a new child element before an existing child element |
| element.isContentEditable | True 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 .long | Set or return the language of an element. |
| element.lastChild | the last child node returned |
| element.namespaceURI | Return the URI of the namespace. |
| element.nextSibling | Return a node immediately following this element |
| element.nextElementSibling | Return the next sibling element after the specified element (the next element node in the same node tree level). |
| element.nodeName | Return the element's tagname (uppercase) |
| element.nodeType | Return the node type of the element |
| element.nodeValue | Return 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.offsetHeight | Return the height of any element including borders and padding, but not margins |
| element.offsetWidth | Return the width of the element, including borders and padding, but not margins |
| element.offsetLeft | An offset container that returns the relative horizontal offset position of the current element |
| element.offsetParent | Return the offset container of the element |
| element.offsetTop | An offset container that returns the relative vertical offset position of the current element |
| element.ownerDocument | Return the root element of the element (the document object) |
| element.parentNode | Return the parent node of the element |
| element.previousSibling | Return an element immediately preceding the element |
| element.previousElementSibling | Return 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.scrollHeight | Return the height of the entire element (including hidden places with scroll bars) |
| element.scrollLeft | Return the distance between the left edge and the left edge of the actual element in the current view |
| element.scrollTop | Return the distance between the top edge and the top edge of the actual element in the current view |
| element.scrollWidth | Return 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.style | Set or return the style attribute of an element |
| element.tabIndex | Set or return the element's label order. |
| element.tagName | Return the tagname (uppercase) of an element as a string |
| element.textContent | Set or return a node and its textual content |
| element.title | Set 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.length | Return the number of nodes in the node list. |