节点与节点树

节点与节点树的概念

HTML 文档中的每项内容都是一个节点,包括 HTML标签、标签属性、文本内容、注释、空格或tab 等。

HTML 文档中的所有节点组成了一个节点树(或文档树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

节点与节点的关系

DOM节点之间都有等级关系,包括父节点、子节点、兄弟节点(同辈节点)、后代、父辈 等。

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

从上面的代码可以看出:

除文档节点(根节点)之外的每个节点都有父节点。
例如,<head> 和 <body> 的父节点是 <html> 节点,文本节点“ 这是内容 ”的父节点是 <p> 节点。

大部分元素节点都有子节点。
例如,<head> 节点有一个子节点:<title> 节点;<title> 节点也有一个子节点:文本节点“ 这是标题 ”。

当节点拥有共同的父节点时,它们就是兄弟节点(同辈节点)。
例如,<h1> 和 <p>是兄弟节点,它们的父节点均是 <body> 节点。

节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。
例如,所有的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。

节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。
例如,所有的文本节点都可把 <html> 节点作为先辈节点。


继续学习
||
<html> <head> <title>DOM节点之间的关系</title> </head> <body> <h1>这是标题</h1> <p>这是内容</p> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

弹指间学会JavaScript 教程