浏览器如何解析HTML文档

浏览器在解析HTML文档时，会把HTML解析为一种称为文档对象模型（Document Object Model）的对象集合，简称DOM。DOM的结构是树状的。

如果学过编程的话，对于“对象”和“树”的概念一定不陌生，不过如果没学过的话，那我还是要好好说说。

对象是一个编程的概念，可以说是把一堆有关联的函数和变量封装起来，称为“类”，变量称为“属性”，函数称为“方法”。属于这个“类”的称为“实例”。

比如我们把“人”这个概念封装为对象，身高、体重这些是属性，走、跳等是方法。老夏是“人”这个类的一个实例，我也是“人”这个类的一个实例。

尽管我和老夏是不同的“人”的实例，各项属性也不一定相同，但是我们都可以实现相同的方法，而不用管这个方法实现上的差异（比如老夏走起来可能一步1米，而我只有0.5米，“步距”也是我们的之间不同的属性，但是走的方法是一样的）。

当然，在HTML中，每个元素都是一个对象实例，这些元素都有不同的属性，有的属性是我们在HTML中可以设定的，有的属性是浏览器解析HTML文档是生成的。属性也可以是另一个对象。

每个元素也都有自己的方法，虽然我们这里不讲，但是学习JavaScript的话就会接触到了。

此外还有一种特殊的称为“事件”的属性，是根据一些状态的改变来触发一些动作的。事件属性在HTML中我们也稍有介绍。

树是一种数据结构，也就是组织数据之间的关系的。树是由一个一个的节点和他们之间有层次的关系组成的。

和现实中的树类似，树都有一个根节点，但是计算机中的树一般是倒着画的，也就是说根是在最上面的。

根节点下面可以有多个子节点，子节点下面也可以有更多的子节点。

没有子节点的节点称为“叶节点”。

上一级的节点称为父节点，一个节点只能有一个父节点。

所有上级的节点（父节点，父节点的父节点，父节点的父节点的父节点……）称为“祖先节点”，所有下级节点（子节点，子节点的子节点，子节点的子节点的子节点……）称为“后代节点”（或“子孙”）。

有同一个父节点的节点称为兄弟节点，父节点是兄弟节点的两个节点称为堂兄弟节点。

每一个节点和他的所有后代节点都是一棵“子树”，同样这个节点就是这棵“子树”的“根”。



想到了什么了？没错，我们的家谱（只考虑父方）就是一棵“树”。

我们的磁盘目录结构也是一棵“树”，所以我们有“磁盘根目录”的说法。每个目录都是一个有子节点的节点，而文件就是叶节点。

那么我们的HTML文档树是怎么样的呢？

html元素就是这个文档的根节点。

html元素的子节点有且只有两个：head元素和body元素。

HTML的元素的父子关系是根据嵌套来区分的。

比如：

复制代码 <div><p><a><b></b></a></p></div>

这是一个四级的嵌套，div的子元素是p，p的子元素是a，a的子元素是b。

当然，同一级的元素就不用多说了吧

复制代码 <div><p><a><b></b></a></p><p><a></a></p><a></a></div>

两个p都是div的子元素，但是第一个a是第一个p的子元素，并且有一个子元素b，第二个a是第二个p的子元素，第三个a是div的子元素，和两个p是兄弟元素。

所以XHTML要求严格的嵌套，因为这是解析文档树的依据。

虽然没有良好的嵌套浏览器也不会报错，但是得到的结果可能并不是我们期望的，所以按照XHTML的格式来书写源代码是一个很好的习惯。

文档树解析出来之后，每个节点都是一个元素对象（比如a元素是Anchor对象，form是一个Form对象），对象又都有各自的属性和方法（我没说过吗？样式也是元素的属性），然后浏览器就把这些节点根据属性的取值显示出来，最后呈现在我们面前的就是一个网页了。

JavaScript操作的对象不是别的，正是DOM，所以我们可以用JS修改各个节点的属性，甚至添加、删除节点，从而表现出丰富多彩的效果。

如果你能理解这篇文章中所讲的内容，那么前面讲到的“后代选择器、直接子代选择器”这些应该是能很好地了解了。