In the HTML DOM, all parts can be considered nodes, and element objects represent HTML elements. An element is a child of document that describes the methods and properties that are common to all elements, and all elements in the HTML dom inherit from the element object.
1. Element Object
An element object represents an HTML element in the HTML DOM. A node type that an element object can have has an element type, a text type, a Comment,element object, or a attr type, namely: an attribute type. The HtmlElement interface in the HTML DOM is the underlying interface for all HTML elements.
All types in the HTML Dom continue to be from node types, and properties and methods in the node type exist in their subtypes, but the properties and methods in node do not apply to all of the element objects.
2. Element Object Properties
Some of the properties of the Code>element object are read-only, such as: Element.attributes, Element.classlist, and so on. Some properties are read-write and can be modified by elements such as: Element.innerhtml can modify the content of elements, Element.scrollleft can modify the scroll bar and left position. More element object properties are described later ...
3. Element Object Method
The element object method has inherited from its parent object node and document, but more is the method of extending the element object itself, such as: Element.setattribute () setting attributes, Element.removeattribute () Remove attributes, and so on. More element object methods will be referred to in the following
An element object is one of the node subtypes that inherits all the attributes of its parent class type node, such as ParentNode, Childnode, and so on.
The detailed properties in the element object are as follows:
Property |
Description |
Element.attributes |
Read-only property that returns the NamedNodeMap of the element's properties. |
Parentnode.childelementcount |
Returns the number of child nodes of an element. |
Parentnode.children |
Returns the Htmlcollection collection under the element |
Parentnode.classlist |
A read-only property that returns the Domtokenlist collection of the element's class attribute. |
Parentnode.classname |
Returns the property name of the class attribute for this element. |
Element.clientheight |
A read-only property that returns a number type that represents the height of the inner element relative to the outer element. |
Element.clientleft |
A read-only property that returns a number type that represents the width value of the element relative to the left edge. |
Element.clienttop |
A read-only property that returns a number type that represents the height value of the element relative to the upper boundary. |
Element.clientwidth |
A read-only property that returns a number type that represents the internal width value of the element. |
Parentnode.firstelementchild |
Returns an Element object that represents the first child node of the parent element and returns NULL when it does not exist. |
Element.id |
Returns the property value of the element id attribute. |
Element.innerhtml |
Returns the content text for the element. |
Parentnode.lastelementchild |
Returns an Element object that represents the last child node of the parent element and returns NULL when it does not exist. |
Nondocumenttypechildnode.nextelementsibling |
Returns an Element object that represents the next sibling node of the element object and returns NULL when it does not exist. |
Nondocumenttypechildnode.previouselementsibling |
Returns an Element object that represents the last sibling of the element object and returns NULL when it does not exist. |
Element.outerhtml |
Gets the HTML text of the DOM element and its descendants, which, when set, resolves from the given string and replaces itself. |
Element.scrollheight |
A read-only property that represents the height of the scroll bar that the element is visible in. |
Element.scrollleft |
A read-only property that represents the width of the element's scroll bar from the left edge. |
Element.scrollwidth |
A read-only property that represents the width of the element's scroll bar: The overall width of the element. |
Element.tagname |
Read-only property that returns the label name of the element. |
As with the element object properties, the method in the element object has all the methods that inherit from its parent type node, as well as the method by which the element object extends itself.
Property |
Description |
Eventtarget.addeventlistener () |
Add event listeners to elements, as described in JavaScript DOM document events |
Element.dispatchevent () |
Distributes an event to a specified eventtarget, triggering the affected eventlisteners in the appropriate order. |
Element.getattribute () |
Returns the specified property value for the element node. |
Element.getattributenode () |
Returns the specified property node. |
Element.getelementsbyclassname () |
Returns a Htmlcollection collection with the specified classname. |
Element.getelementsbytagname () |
Returns a collection of Htmlcollection with the specified label name. |
Element.hasattribute () |
Returns a Boolean value that indicates whether there is a specified attribute value. |
Element.hasattribute () |
Returns a Boolean value that indicates whether there is a specified attribute value. |
Element.haschildnodes () |
Returns a Boolean value that indicates whether to have child elements. |
Element.insertbefore () |
Inserts a new node before the element. |
Element.isequalnode () |
Checks whether two elements are equal. |
Element.issamenode () |
Check whether two elements are the same node. |
Element.issupported () |
Returns a Boolean value that indicates whether the element supports the specified attribute. |
Element.queryselector () |