JS DOM Object

First, the definition

• HTML Document Object Model
• HTML DOM defines a standard way to access and manipulate HTML documents
• HTML DOM renders an HTML document as a tree structure with elements, attributes, and Text (node tree)

Second, Dom tree

The DOM tree is drawn to show the relationships between the objects in the document and to navigate the objects.

Third, DOM node

Each component in an HTML document is a node.

This is what the DOM provides:
The entire document is a document node
Each HTML tag is an element node
Text that is contained in an HTML element is a text node
Each HTML attribute is an attribute node

Among them, document and element node is the focus.

Iv. Relationship of nodes

Nodes in the node tree have hierarchical relationships with each other.
Terms such as the parent, Son (Child), and fellow (sibling) are used to describe these relationships. The parent node has child nodes. Child nodes of a sibling are called siblings (brothers or sisters).

• In the node tree, the top node is called root (root)
• Each node has a parent node, except for the root (it has no parent node)
• A node can have any number of sub-
• A sibling is a node that has the same parent node

The following image shows part of the node tree and the relationship between nodes:



accessing HTML elements (nodes), accessing HTML elements is equivalent to accessing nodes, and we are able to access HTML elements in different ways.

V. Node Lookup

To find a node directly:

document.getElementById ("Idname") document.getelementsbytagname ("TagName") document.getelementsbyname ("name") Document.getelementsbyclassname ("name")

Navigate to find:

'parentelement           //parent node tag element children//                All child tags firstelementchild       //First child tag element lastelementchild        // Last child tag element nextelementtsibling     //Next sibling tag element previouselementsibling  //previous sibling tag element '

JS DOM Object