Содержание
HTML DOM element object
HTML DOM (Document Object Model) in each node things are:
- The document itself is a document object
- All HTML elements are an element node
- All HTML attributes are attribute nodes
- HTML elements are inserted into the text of the text node
- Comments are comment nodes
Element object
In the HTML DOM, the element object represents an HTML element.
Children of the element objects may be, can be an element node, text nodes, comment nodes.
NodeList object represents a node list, similar to the HTML element child nodes collection.
Elements can have attributes. Property belonging to attribute node (see the next section).
Browser Support
All major browsers support element object and NodeList object. .
Properties and Methods
The above properties and methods that apply to all HTML elements:
| Property / Method | description |
|---|---|
| element .accessKey | Sets or returns an element accesskey |
| element .addEventListener () | Add an event handler to a specified element |
| element .appendChild () | Adding a new element to the child element |
| element .attributes | It returns an array of attributes of an element |
| element .childNodes | Returns an array of elements in a child node |
| element .classlist | Returns the class name of the element, as DOMTokenList object. |
| element .className | Sets or returns the class attribute of the element |
| element .clientHeight | Returns the content on the page visible height (not including borders, margins, or scrollbars) |
| element .clientWidth | Returns the contents of the page visible in width (not including borders, margins, or scrollbars) |
| element .cloneNode () | Cloning an element |
| element .compareDocumentPosition () | Document Location to compare two elements. |
| element .contentEditable | Sets or returns whether the element’s content editable |
| element .dir | Sets or returns an element in the direction of the text |
| element .firstChild | Returns the element’s first child |
| element .focus () | Set document or element gain focus |
| element .getAttribute () | Returns the specified element’s attribute values |
| element .getAttributeNode () | Returns the specified attribute node |
| element .getElementsByTagName () | Returns the tag name of a collection of all child elements. |
| element. getElementsByClassName () | Returns all elements in the document specify the class name of the collection, as NodeList object. |
| element .getFeature () | Returns the specified characteristics of the object to perform APIs. |
| element .getUserData () | Return an object associated with the key element. |
| element .hasAttribute () | If the specified property exists element returns true, otherwise it returns false. |
| element .hasAttributes () | If there is any element property returns true, otherwise it returns false. |
| element .hasChildNodes () | Returns whether an element has any children element |
| element .hasfocus () | Returns a Boolean value, detecting whether the document or element gain focus |
| element .id | Sets or returns id of the element. |
| element .innerHTML | Sets or returns the contents of the element. |
| element .insertBefore () | Insert a new child element before the existing child element |
| element .isContentEditable | If the element content editable returns true, false otherwise |
| element .isDefaultNamespace () | If the namespaceURI returns true, otherwise it returns false. |
| element .isEqualNode () | Check the two elements are equal |
| element .isSameNode () | Check the two elements all have the same node. |
| element .isSupported () | If supported features specified in the element returns true. |
| element .lang | Sets or returns the language of an element. |
| element .lastChild | Last child element returned |
| element .namespaceURI | Returns the URI namespace. |
| element .nextSibling | Followed by a return of that element |
| element .nodeName | Returns the tag name of the element (uppercase) |
| element .nodeType | Returns the node type of element |
| element .nodeValue | Returns the value of the element node |
| element .normalize () | So this has become a «normal» form where only structure (eg, elements, comments, processing instructions, CDATA sections, and entity references) spaced Text nodes, ie, the elements (including property) all text nodes below, are neither adjacent text nodes nor empty text nodes |
| element .offsetHeight | Return an element of any height, including the border and filling, but not the margin |
| element .offsetWidth | Returns the width of the element, including borders and padding, but not margins |
| element .offsetLeft | Returns the current element of a relative horizontal offset position offset container |
| element .offsetParent | Returns the offset container element |
| element .offsetTop | Returns the current element relative vertical offset of offset container |
| element .ownerDocument | Returns the element of the root element (document object) |
| element .parentNode | Returns the parent node of an element |
| element .previousSibling | Returns an element immediately preceding element |
| element .querySelector () | Return match the specified CSS selector element is the first child element |
| document.querySelectorAll () | Returns the specified CSS selector matches the element node list of all the sub-elements |
| element .removeAttribute () | Removes the specified attribute from the element |
| element .removeAttributeNode () | Removes the specified attribute node and returns the node removal after. |
| element .removeChild () | To delete a sub-element |
| element .removeEventListener () | Remove the handle by the addEventListener () method to add an event |
| element .replaceChild () | Replace a child element |
| element .scrollHeight | Returns the height of the entire element (including with hidden place of the scroll bar) |
| element .scrollLeft | Returns from the current view of the actual elements of the left edge and the left edge |
| element .scrollTop | Back from the top edge and a top view of the actual elements of the edge between the current |
| element .scrollWidth | Returns the element’s entire width (including with hidden place of the scroll bar) |
| element .setAttribute () | Set or change the specified properties and the specified value. |
| element .setAttributeNode () | Set or change the specified attribute node. |
| element .setIdAttribute () | |
| element .setIdAttributeNode () | |
| element .setUserData () | In the element associated with the specified key object. |
| element .style | Sets or returns the style attribute of the element |
| element .tabIndex | Sets or returns the tab order of the elements. |
| element .tagName | As a string tag name of an element (uppercase) |
| element .textContent | Sets or returns a node and its text content |
| element .title | Sets or returns the title attribute of the element |
| element .toString () | An element into a string |
| nodelist .item () | Returns the index of an element in the document tree based |
| nodelist .length | Returns the number of nodes in the node list. |
HTML DOM Elements
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
Properties and Methods
The following properties and methods can be used on all HTML elements:
| Property / Method | Description |
|---|---|
| accessKey | Sets or returns the accesskey attribute of an element |
| addEventListener() | Attaches an event handler to an element |
| appendChild() | Adds (appends) a new child node to an element |
| attributes | Returns a NamedNodeMap of an element’s attributes |
| blur() | Removes focus from an element |
| childElementCount | Returns an elements’s number of child elements |
| childNodes | Returns a NodeList of an element’s child nodes |
| children | Returns an HTMLCollection of an element’s child elements |
| classList | Returns the class name(s) of an element |
| className | Sets or returns the value of the class attribute of an element |
| click() | Simulates a mouse-click on an element |
| clientHeight | Returns the height of an element, including padding |
| clientLeft | Returns the width of the left border of an element |
| clientTop | Returns the width of the top border of an element |
| clientWidth | Returns the width of an element, including padding |
| cloneNode() | Clones an element |
| closest() | Searches the DOM tree for the closest element that matches a CSS selector |
| compareDocumentPosition() | Compares the document position of two elements |
| contains() | Returns true if a node is a descendant of a node |
| contentEditable | Sets or returns whether the content of an element is editable or not |
| dir | Sets or returns the value of the dir attribute of an element |
| firstChild | Returns the first child node of an element |
| firstElementChild | Returns the first child element of an element |
| focus() | Gives focus to an element |
| getAttribute() | Returns the value of an element’s attribute |
| getAttributeNode() | Returns an attribute node |
| getBoundingClientRect() | Returns the size of an element and its position relative to the viewport |
| getElementsByClassName() | Returns a collection of child elements with a given class name |
| getElementsByTagName() | Returns a collection of child elements with a given tag name |
| hasAttribute() | Returns true if an element has a given attribute |
| hasAttributes() | Returns true if an element has any attributes |
| hasChildNodes() | Returns true if an element has any child nodes |
| id | Sets or returns the value of the id attribute of an element |
| innerHTML | Sets or returns the content of an element |
| innerText | Sets or returns the text content of a node and its descendants |
| insertAdjacentElement() | Inserts a new HTML element at a position relative to an element |
| insertAdjacentHTML() | Inserts an HTML formatted text at a position relative to an element |
| insertAdjacentText() | Inserts text into a position relative to an element |
| insertBefore() | Inserts a new child node before an existing child node |
| isContentEditable | Returns true if an element’s content is editable |
| isDefaultNamespace() | Returns true if a given namespaceURI is the default |
| isEqualNode() | Checks if two elements are equal |
| isSameNode() | Checks if two elements are the same node |
| isSupported() | Deprecated |
| lang | Sets or returns the value of the lang attribute of an element |
| lastChild | Returns the last child node of an element |
| lastElementChild | Returns the last child element of an element |
| matches() | Returns true if an element is matched by a given CSS selector |
| namespaceURI | Returns the namespace URI of an element |
| nextSibling | Returns the next node at the same node tree level |
| nextElementSibling | Returns the next element at the same node tree level |
| nodeName | Returns the name of a node |
| nodeType | Returns the node type of a node |
| nodeValue | Sets or returns the value of a node |
| normalize() | Joins adjacent text nodes and removes empty text nodes in an element |
| offsetHeight | Returns the height of an element, including padding, border and scrollbar |
| offsetWidth | Returns the width of an element, including padding, border and scrollbar |
| offsetLeft | Returns the horizontal offset position of an element |
| offsetParent | Returns the offset container of an element |
| offsetTop | Returns the vertical offset position of an element |
| outerHTML | Sets or returns the content of an element (including the start tag and the end tag) |
| outerText | Sets or returns the outer text content of a node and its descendants |
| ownerDocument | Returns the root element (document object) for an element |
| parentNode | Returns the parent node of an element |
| parentElement | Returns the parent element node of an element |
| previousSibling | Returns the previous node at the same node tree level |
| previousElementSibling | Returns the previous element at the same node tree level |
| querySelector() | Returns the first child element that matches a CSS selector(s) |
| querySelectorAll() | Returns all child elements that matches a CSS selector(s) |
| remove() | Removes an element from the DOM |
| removeAttribute() | Removes an attribute from an element |
| removeAttributeNode() | Removes an attribute node, and returns the removed node |
| removeChild() | Removes a child node from an element |
| removeEventListener() | Removes an event handler that has been attached with the addEventListener() method |
| replaceChild() | Replaces a child node in an element |
| scrollHeight | Returns the entire height of an element, including padding |
| scrollIntoView() | Scrolls the an element into the visible area of the browser window |
| scrollLeft | Sets or returns the number of pixels an element’s content is scrolled horizontally |
| scrollTop | Sets or returns the number of pixels an element’s content is scrolled vertically |
| scrollWidth | Returns the entire width of an element, including padding |
| setAttribute() | Sets or changes an attribute’s value |
| setAttributeNode() | Sets or changes an attribute node |
| style | Sets or returns the value of the style attribute of an element |
| tabIndex | Sets or returns the value of the tabindex attribute of an element |
| tagName | Returns the tag name of an element |
| textContent | Sets or returns the textual content of a node and its descendants |
| title | Sets or returns the value of the title attribute of an element |
| toString() | Converts an element to a string |