DOM把文档视为一棵树形结构,也称为节点树。节点之间的关系包括:上下父子关系,相邻兄弟关系。简单描述如下:
- 在节点树中,最顶端节点为根节点。
- 除了根节点之外,每个节点都有一个父节点。
- 节点可以包含任何数量的子节点。
- 叶子是没有子节点的节点。
- 同级节点是拥有相同父节点的节点。
【示例】针对下面这个HTML文档结构。
<!doctype html> <html> <head> <title>标准DOM示例</title> <meta charset="utf-8"> </head> <body> <h1>标准DOM</h1> <p>这是一份简单的<strong>文档对象模型</strong></p> <ul> <li>D表示文档,DOM的结构基础</li> <li>O表示对象,DOM的对象基础</li> <li>M表示模型,DOM的方法基础</li> </ul> </body> </html>
在上面HTML结构中,首先是DOCTYPE文档类型声明,然后是html元素,网页里所有元素都包含在这个元素里。从文档结构看,html元素既没有父辈,也没有兄弟。如果用树来表示的话,这个html元素就是树根,代表整个文档。由html元素派生出head和body两个子元素,它们属于同一级别,且互不包含,可以称之为兄弟关系。head和body元素拥有共同的父元素html,同时它们又是其他元素的父元素,但包含的子元素不同。head元素包含title元素,title元素又包含文本节点“标准DOM示例”。body元素包含3个子元素:h1、p和ul,它们是兄弟关系。如果继续访问,ul元素也是一个父元素,它包含3个li子元素。整个文档如果使用树形结构表示,示意如图25.2所示。使用树形结构可以很直观地把文档结构中各个元素之间的关系表现出来。