Nodes and node trees

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.

Continuing Learning

new file

<html> <head> <title>DOM节点之间的关系</title> </head> <body> <h1>这是标题</h1> <p>这是内容</p> </body> </html>

submit Reset Code

Automatic operation

Nodes and node trees

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]