一、树状结构
1.结构概述
节点之间的关系
以家谱为例,家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点,司马炎同样也是一个节点,这些节点是有关系的,具体关系如下:
- 根节点:每一个树状结构都有一个没有父级的节点,他被称作根节点。
- 父级节点:司马防是司马懿的父级,司马懿是司马师的父级。
- 子级节点:司马师是司马懿的子级,司马懿是司马防的子级。
- 同级关系:有相同父级的节点就是同级关系,司马懿和司马朗是同级,司马昭和司马亮是同级。(这里需要注意的是,司马炎和司马熙不是同级,因为他们没有相同的父级。
二、html文件的树状结构
html文件的结构和上面的家谱一样,也是树状结构,例如下面的html代码。
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>水果列表</h1>
<ul>
<li id="banana">香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
</ul>
</body>
</html>
转换成树状结构如下所示,这里不考虑文档声明标签:
代码如下(示例):
├─html
│ ├─lang="en"
│ ├─head
│ │ ├─meta
│ │ │ └─charset="UTF-8"
│ │ ├─title
│ │ │ └─Document
│ ├─body
│ │ └─h1
│ │ │ └─水果列表
│ │ └─ul
│ │ │ └─li
│ │ | │ └─id="banana"
│ │ | │ └─香蕉
│ │ │ └─li
│ │ | │ └─苹果
│ │ │ └─li
│ │ | │ └─鸭梨
html标签是最外层的标签,没有父级,所以他是整个树状结构的根节点,body标签中有h1标签和ul标签,所以body是h1的父节点,h1是body的子节点,h1与ul是兄弟节点,又叫同级节点。
抛开节点之间的关系,我们再给html节点分类,可以分成下面三类:
- 元素节点
- 文本节点
- 属性节点
dy的子节点,h1与ul是兄弟节点,又叫同级节点。
抛开节点之间的关系,我们再给html节点分类,可以分成下面三类:
- 元素节点
- 文本节点
- 属性节点