先来看html网页的代码和浏览器展现的结果(下图1和图2):

html常用元素和属性(html网页基本组成结构)(1)

图1

html常用元素和属性(html网页基本组成结构)(2)

图2

然后对照着下图的DOM树,分析DOM的节点层次和定义:

除了html中的<!DOCTYPE>和<meta>声明外,

1.第一级是html文件中的根元素:<html></html>标签

2.第二级是根元素html下面的子元素:<head></head>和<body></body>标签

3.第三级是<head>元素的子元素:<title></title>标签以及

<body>元素的子元素:<a></a>和<h1></h1>标签

4.title元素中有一个文本“这是网页标题”;

a元素中有一个href属性和一个文本“这是链接”;

h1元素中有一个文本“这是网页内容中的标题”。


综上:

1.html文档是一个文档节点,

2.每个html元素是元素节点,

3.html元素内的文本是文本节点,

4.每个html属性是属性节点。


节点的层级关系用术语来描述:

父(parent)、子(child)和同胞(sibling)等。

在节点树中,顶端节点被称为根(root),在页面中对应的是<html></html>标签,

每个节点都有父节点、除了根(它没有父节点),<head></head>和<body></body>的父节点就是<html></html>,

一个节点可拥有任意数量的子节点,<body></body>的子节点有<a></a>和<h1></h1>,

同胞是拥有相同父节点的节点,<a></a>和<h1></h1>有相同的父节点,因此它俩就是同胞。

,