HTML文档解析和DOM树的构建
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML⽂档解析和DOM树的构建
浏览器解析HTML⽂档⽣成DOM树的过程,以下是⼀段HTML代码，以此为例来分析解析HTML⽂档的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div>
</div>
</body>
</html>
浏览器解析HTML⽂档，在<head>中发现了<script>和<link>引⼊⽂件，于是向服务器请求⽂件，在请求和下载⽂件过程中将继续向下解析HTML，当引⼊⽂件下载完成后会通知浏览器回头来解析css和script⽂件。
如果浏览器在代码中发现⼀个<img>标签引⽤了⼀张图⽚，向服务器发出请求。
此时浏览器同样不会等到图⽚下载完，⽽是继续渲染后⾯的代码；
现在进⼊正题，讲讲⾃⼰对解析HTML⽂档构建DOM树的理解：
此过程可分为两个主要模块构成，即
标签解析
DOM树构建
1. 标签解析
这部分完成从HTML字符串中解析出标签的功能。
主要使⽤标记化算法。
标记化算法的输⼊结果是HTML标记，使⽤状态机表⽰。
状态机⼀共有4个状态：数据状态(Data)、标记打开状态(Tag open)、标记名称状态(Tag name)、关闭标记打开状态(Close tag open state)。
初始状态是数据状态。
当标记是处于数据状态时，
1）遇到字符<时，状态更改为“标记打开状态”：
a. 接收⼀个a-z字符会创建“起始标记”，状态更改为“标记名称状态”，并保持到接收>字符。
此期间的字符串会形成⼀个新的标记名称。
接收到>标记后，将当前的新标记发送给树构造器，状态改回“数据状态”
b. 接收下⼀个输⼊字符/时，会创建关闭标记打开状态，并更改为“标记名称状态”。
直到接收>字符，将当前的新标记发送给树构造器，并改回“数据状态”。
2）遇到a-z字符时，会将每个字符创建成字符标记，并发送给树构造器。
2. DOM树构建
当标签解析器解析出标签后会发送到DOM树构建器，我们可以认为DOM树构建器主要有以下两部分组成：
DOM树
⼀个存放标签名的栈
⽤如下代码演⽰⽣成DOM树的过程：
<html>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div>
</div>
</body>
</html>
<span><span class="tag"></span></span>
⾸先树构建器接收到标签解析器发来的起始标签名后，会加⼊到栈中，图1是解析到<h1>标签的栈中压⼊的内容，共有<html><body><h1>三个标签，此时还未向DOM树中添加任何结点（图中⿊⾊实线框代表开始标签，红⾊虚线框代表结束标签，结束标签不会⼊栈）。
继续向下解析，接收到⼀个</h1>结束标签，此时查询栈顶元素，如果和传⼊的结束标签属于同种类型的p标签（如图2），则将栈顶元素弹出，向DOM树中加⼊此节点，然后继续向下解析（如图3）。
如果遇到的是没有封闭标签的元素如<img/>，则直接加⼊DOM树中即可，⽆需⼊栈。
依次向下解析，当栈为空，即<html>根节点也加⼊到DOM树中，DOM树构建完毕。
这⾥需要指出的是，当某个元素缺失结束标签时，假如上述代码中第⼀个<div>标签缺失了</div>结束标签，即：
<html>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div>
</body>
</html>
那么，此时的栈如图4所⽰。
即此时传来的结束标签是</body>，⽽栈顶元素是<div>，两者不是同⼀种标签，说明div缺少了结束标签，这种情况也将栈顶<div>元素弹出，加⼊到DOM树中。
相当于给<div>补了⼀个</div>结束标签。