YouTipHTML DOM Elements
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 attributes are attribute nodes
- Text inserted into HTML elements is text nodes
- Comments are comment nodes
Element Object
In HTML DOM, the element object represents an HTML element.
The child nodes of an element object can be element nodes, text nodes, or comment nodes.
The NodeList object represents 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 the next section).
Browser Support
All major browsers support the element object and NodeList object.
Properties and Methods
The following properties and methods can be applied 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 an element |
| element.attributes | Returns an array of attributes of an element |
| element.childNodes | Returns an array of child nodes of an element |
| element.children | Returns a collection of child elements of an element |
| element.classList | Returns the class names of an element 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 (height includes padding but excludes borders, margins, and scrollbars) |
| element.clientWidth | Returns the visible width of content on the page (width includes padding but excludes borders, margins, and scrollbars) |
| element.cloneNode() | Clones a certain element |
| element.compareDocumentPosition() | Compares the document position of two elements |
| element.contentEditable | Sets or returns whether the content of an element is editable |
| element.dir | Sets or returns the text direction in 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 the document or element to receive focus |
| element.getAttribute() | Returns the value of the specified attribute of an 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 APIs object for the specified feature |
| element.getUserData() | Returns the object associated with a key in 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 indicating 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 the specified namespaceURI is returned, otherwise returns false |
| element.isEqualNode() | Checks if two elements are equal |
| element.isSameNode() | Checks if 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() | Returns true if the element matches the specified CSS selector, otherwise returns false |
| element.namespaceURI | Returns the URI of the namespace |
| element.nextSibling | Returns the node immediately following this element |
| element.nextElementSibling | Returns the next sibling element after the specified element (the next element node in the same node tree level) |
| element.nodeName | Returns the tag name of the element (uppercase) |
| element.nodeType | Returns the node type of the element |
| element.nodeValue | Returns the node value of the element |
| element.normalize() |