HTML DOM ElementObject
HTML DOM Nodes
In HTML DOM (Document Object Model), everything isa node:
- The document itself is a document object
- All HTML elements are element nodes
- All HTML attributes are attribute nodes
- Text inserted into HTML elements is text nodes
- Comments are comment nodes
Element Object
In HTML DOM,the element objectrepresents an HTML element.
An element object'schild nodescan be element nodes, text nodes, or comment nodes.
NodeList ObjectRepresents a list of nodes, similar to a collection of child nodes of an HTML element.
Elements can have attributes. Attributes belong to attribute nodes (see next chapter).
Browser Support
All major browsers support the Element object and the NodeList object.
Properties and Methods
The above properties and methods apply to all HTML elements:
| Property / Method | Description |
|---|---|
| element.accessKey | Sets or returns the accesskey of an element |
| element.addEventListener() | Adds an event handler to the specified element |
| element.appendChild() | Adds a new child element to the element |
| element.attributes | Returns an array of an element's attributes |
| element.childNodes | Returns an array of an element's child nodes |
| element.children | Returns a collection of an element's child elements |
| element.classList | Returns the element's class name as a DOMTokenList object |
| element.className | Sets or returns the class attribute of an element |
| element.clientTop | Represents the width of the top border of an element, in pixels |
| element.clientLeft | Represents the width of the left border of an element, in pixels |
| element.clientHeight | Returns the visible height of content on the page (the height includes padding, but not border, margin, or scrollbar) |
| element.clientWidth | Returns the visible width of content on the page (the width includes padding, but not border, margin, or scrollbar) |
| element.cloneNode() | Clones an element |
| element.compareDocumentPosition() | Compares the document position of two elements |
| element.contentEditable | Sets or returns whether the element's content is editable |
| element.dir | Sets or returns the text direction of an element |
| element.firstElementChild | Returns the first child element of an element |
| element.firstChild | Returns the first child node of an element |
| element.focus() | Sets a document or element to get focus |
| element.getAttribute() | Returns the attribute value of the specified element |
| element.getAttributeNode() | Returns the specified attribute node |
| element.getElementsByTagName() | Returns a collection of all child elements with the specified tag name |
| element. getElementsByClassName() | Returns a collection of all elements with the specified class name in the document, as a NodeList object |
| element.getFeature() | Returns the object that implements the APIs for the specified feature |
| element.getUserData() | Returns an object of key-value pairs associated with an element |
| element.hasAttribute() | Returns true if the specified attribute exists in the element, otherwise returns false |
| element.hasAttributes() | Returns true if the element has any attributes, otherwise returns false |
| element.hasChildNodes() | Returns whether an element has any child elements |
| element.hasFocus() | Returns a Boolean value, detecting whether the document or element has focus |
| element.id | Sets or returns the id of an element |
| element.innerHTML | Sets or returns the content of an element |
| element.insertBefore() | Inserts a new child element before an existing child element |
| element.isContentEditable | Returns true if the element content is editable, otherwise returns false |
| element.isDefaultNamespace() | Returns true if namespaceURI is specified, otherwise returns false |
| element.isEqualNode() | Checks whether two elements are equal |
| element.isSameNode() | Checks whether two elements have the same node |
| element.isSupported() | Returns true if the specified feature is supported in the element |
| element.lang | Sets or returns the language of an element |
| element.lastChild | Returns the last child node |
| element.lastElementChild | Returns the last child element of the specified element |
| element.matches() | If the element matches the specified CSS selector, the matches() method returns true, otherwise false |
| element.namespaceURI | Returns the namespace URI |
| element.nextSibling | Returns the node immediately following the element |
| element.nextElementSibling | Returns the next sibling element of the specified element (the next element node at the same level of the node tree) |
| element.nodeName | Returns the tag name of the element (in uppercase) |
| element.nodeType | Returns the node type of the element |
| element.nodeValue | Returns the node value of the element |
| element.normalize() | Puts the element into 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 under the element (including attributes) have neither adjacent text nodes nor empty text nodes |
| element.offsetHeight | Returns the height of any element, including border and padding, but not margin |
| element.offsetWidth | Returns the width of the element, including border and padding, but not margin |
| element.offsetLeft | Returns the offset container of the current element's relative horizontal offset position |
| element.offsetParent | Returns the element's offset container |
| element.offsetTop | Returns the offset container of the current element's relative vertical offset position |
| element.ownerDocument | Returns the root element (document object) of the element |
| element.parentNode | Returns the parent node of the element |
| element.previousSibling | Returns the element immediately before the element |
| element.previousElementSibling | Returns the previous sibling element of the specified element (the previous element node at the same level of the node tree) |
| element.querySelector() | Returns the first child element matching the specified CSS selector |
| document.querySelectorAll() | Returns a node list of all child elements matching the specified CSS selector |
| element.removeAttribute() | Removes the specified attribute from the element |
| element.removeAttributeNode() | Removes the specified attribute node and returns the removed node |
| element.removeChild() | Removes a child element |
| element.removeEventListener() | Removes an event handler added by the addEventListener() method |
| element.replaceChild() | Replaces a child element |
| element.scrollHeight | Returns the height of the entire element (including the parts hidden by scrollbars) |
| element.scrollLeft | Returns the distance between the left edge of the actual element and the left edge of the current view |
| element.scrollTop | Returns the distance between the top edge of the actual element and the top edge of the current view |
| element.scrollWidth | Returns the width of the entire element (including the parts hidden by scrollbars) |
| element.setAttribute() | Sets or changes the specified attribute and specifies its value |
| element.setAttributeNode() | Sets or changes the specified attribute node |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | Associates an object with the specified key-value in the element |
| element.style | Sets or returns the style attribute of an element |
| element.tabIndex | Sets or returns the tab order of an element |
| element.tagName | Returns the tag name of an element as a string (in uppercase) |
| element.textContent | Sets or returns a node and its text content |
| element.title | Sets or returns the title attribute of an element |
| element.toString() | Converts an element to a string |
| nodelist.item() | Returns the index of an element based on the document tree |
| nodelist.length | Returns the number of nodes in the node list |