先来看html网页的代码和浏览器展现的结果（下图1和图2）：
图1
图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>有相同的父节点，因此它俩就是同胞。
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
