The concept of nodes and node trees
Each item in an HTML document is a node, including HTML tags, tag attributes, text content, comments, spaces or tabs, etc.
All nodes in the HTML document form a node tree (or document tree). Each element, attribute, text, etc. in an HTML document represents a node in the tree. The tree starts at the document node and continues branching out from there to all text nodes at the lowest level of the tree.
Relationship between nodes
There are hierarchical relationships between DOM nodes, including parent nodes, child nodes, sibling nodes (peer nodes), descendants, parents, etc.
<html> <head> <title>DOM节点之间的关系</title> </head> <body> <h1>这是标题</h1> <p>这是内容</p> </body> </html>
As can be seen from the above code:
Every node except the document node (root node) has a parent node.
For example, the parent node of <head> and <body> is the <html> node, and the parent node of the text node "This is content" is the <p> node.
Most element nodes have child nodes.
For example, the <head> node has a child node: <title> node; the <title> node also has a child node: the text node "This is the title".
When nodes have a common parent node, they are siblings (sibling nodes).
For example, <h1> and <p> are sibling nodes, and their parent nodes are both <body> nodes.
Nodes can also have descendants, which refer to all the child nodes of a node, or the child nodes of these child nodes, and so on.
For example, all text nodes are descendants of the <html> node, and the first text node is a descendant of the <head> node.
Nodes can also have ancestors. An ancestor is the parent node of a node, or the parent node of a parent node, and so on.
For example, all text nodes can have the <html> node as an ancestor node.
