HTML DOM element object
HTML DOM node
In HTML DOM (Document Object Model), everything is a node :
- The document itself is a document object
- All HTML elements are element nodes
- All HTML properties are property nodes
- The text inserted into the HTML element is a text node
- A comment is a comment node
The element object
In HTML DOM, the element object represents an HTML element.
The child node of the element object can be, can be, an element node, a text node, an annotation node.
The NodeList object represents a list of nodes, similar to a collection of child nodes of HTML elements.
Elements can have properties. The property belongs to the property node (see next section).
Browser support
All major browsers support element objects and NodeList objects.
Properties and methods
The above properties and methods apply to all HTML elements:
| The property/method | Describe |
|---|---|
| element .accessKey | Set or return an element of accesskey |
| element .addEventListener() | Add an event handle to the specified element |
| element .appendChild() | Add a new child element to the element |
| element .attributes | Returns an array of properties for an element |
| element .childNodes | Returns an array of one child node of the element |
| element .classlist | Returns the class name of the element as the DOMTokenList object. |
| element .className | Set or return the element's class property |
| element .clientHeight | Return the visual height of the content on the page (excluding borders, margins, or scroll bars) |
| element .clientWidth | Return the visual width of the content on the page (excluding borders, margins, or scroll bars) |
| element .cloneNode() | Clone an element |
| element .compareDocumentPosition() | Compare the document locations of the two elements. |
| element .contentEditable | Set or return whether the contents of the element are editable |
| element .dir | Set or return the direction of text in an element |
| element .firstChild | Returns the first child node of the element |
| element .focus() | Set the document or element to get focus |
| element .getAttribute() | Returns the property value of the specified element |
| element .getAttributeNode() | Returns the specified property node |
| element .getElementsByTagName() | Returns a collection of all child elements that specify the label name. |
| element . getElementsByClassName() | Returns a collection of elements in the document that specify the class name as nodeList objects. |
| element .getFeature() | Returns the execution APIs object for the specified feature. |
| element .getUserData() | Returns an object in an element that associates key values. |
| element .hasAttribute() | If the specified property in the element returns true, otherwise it returns false. |
| element .hasAttributes() | If the element has any properties to return true, otherwise it returns false. |
| element .hasChildNodes() | Returns whether an element has any child elements |
| element .hasfocus() | Returns the Boolean value to detect if the document or element gets focus |
| element .id | Set or return the id of the element. |
| element .innerHTML | Set or return the contents of the element. |
| element .insertBefore() | An existing child element is inserted before a new child element is inserted |
| element .isContentEditable | If the element content can be edited to return true, otherwise it returns false |
| element .isDefaultNamespace() | If the namespaceURI is specified to return true, otherwise false is returned. |
| element .isEqualNode() | Check that the two elements are equal |
| element .isSameNode() | Check that both elements have the same node. |
| element .isSupported() | True if the specified feature is supported in the element. |
| element .lang | Set or return the language of an element. |
| element .lastChild | The last child element returned |
| element .namespaceURI | Returns the URI of the namespace. |
| element .nextSibling | Returns an element immediately following the element |
| element .nodeName | Returns the tag name of the element (capital) |
| element .nodeType | Returns the node type of an element |
| element .nodeValue | Returns the type of element |
| element .normalize() | This becomes a "normal" form in which only structures (such as elements, comments, processing instructions, CDATA sections, and entity references) separate the Text node, i.e. all text nodes below the element (including properties), with neither adjacent text nodes nor empty text nodes |
| element .offsetHeight | Return, the height of any element includes borders and fills, but not margins |
| element .offsetWidth | Returns 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 | Returns the offset container for the element |
| element .offsetTop | An offset container that returns the relative vertical offset position of the current element |
| element .ownerDocument | Returns the root element of the element (document object) |
| element .parentNode | Returns the parent node of the element |
| element .previousSibling | Returns an element immediately before the element |
| element .querySelector() | Returns the first child element that matches the specified CSS selector element |
| document.querySelectorAll() | Returns a list of all child element nodes that match the specified CSS selector element |
| element .removeAttribute() | Remove the specified property from the element |
| element .removeAttributeNode() | Delete the specified property node and return the removed node. |
| element .removeChild() | Delete a child element |
| element .removeEventListener() | Remove the event handle added by the addEventListener() method |
| element .replaceChild() | Replace a child element |
| element .scrollHeight | Returns the height of the entire element (including hidden places with scroll bars) |
| element .scrollLeft | Returns the distance between the left edge and the left edge of the actual element in the current view |
| element .scrollTop | Returns the distance between the top edge and the top edge of the actual element in the current view |
| element .scrollWidth | Returns the entire width of the element (including hidden places with scroll bars) |
| element .setAttribute() | Set or change the specified property and specify a value. |
| element .setAttributeNode() | Set or change the specified property node. |
| element .setIdAttribute() | |
| element .setIdAttributeNode() | |
| element .setUserData() | The object is associated with a specified key value in the element. |
| element .style | Set or return the style properties of an element |
| element .tabIndex | Set or return the label order for the element. |
| element .tagName | Returns the tag name of an element as a string (capital) |
| element .textContent | Set or return a node and its text content |
| element .title | Set or return the title properties of the element |
| element .toString() | An element is converted into a string |
| nodelist .item() | Returns an element based on the document tree index |
| nodelist .length | The number of nodes that return the list of nodes. |