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.
DOM节点之间的关系
这是标题
这是内容
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
and is the node, and the parent node of the text node "This is content" is the
node.
Most element nodes have child nodes.
For example, the
node has a child node:
node; the <title> node also has a child node: the text node "This is the title".<br></p>
<p><strong>When nodes have a common parent node, they are siblings (sibling nodes).</strong><br>For example, <h1> and <p> are sibling nodes, and their parent nodes are both <body> nodes.<br></p>
<p><strong>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.</strong><br>For example, all text nodes are descendants of the <html> node, and the first text node is a descendant of the <head> node.<br></p>
<p><strong>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.</strong><br>For example, all text nodes can have the <html> node as an ancestor node.</p>
<p><br></p>
</div>
</div>
<a class="course-btn course_code_header_next" href="//m.sbmmt.com">Continuing Learning</a>
</div>
<div class="layui-col-md6 editor-box">
<div id="code_spread_shrink">
<div id="code_spread_shrink_show" unselectable="on">
<span>||</span>
</div>
</div>
<div class="editor-tab js-editor-tab">
<div class="editor-left icon-left editor-op"></div>
<div class="editor-view">
<ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;">
<li class="ui-tabs-active"><a href="javascript:;">new file</a></li>
</ul>
</div>
<div class="editor-right icon-right editor-op"></div>
</div>
<div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px">
<html> <head> <title>DOM节点之间的关系
这是标题
这是内容
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
