质量属性效用树例子_DOM 树的构建

DOM 是 HTML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。那么浏览器是如何将 HTML 解析成 DOM 树的呢？我们今天来探索一下。

大体来说，从 HTML 文档到 DOM 树有两大步。第一步：将 HTML 文档解析成一个个 Token。第二步：根据 Token 构建 DOM 树。其具体的流程图如下：

DOM 树构建流程

首先，浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。下一步通过状态机去做分词，将字符串转换成 Token ，每个 Token 都具有特殊含义和一组规则。Token 会被转换成定义了属性等规则的“对象”，同时利用栈构建 DOM 树。下面，我们先来看看 Token 是这么被拆分的。

Token 的拆分

Token 是编译原理里的一个术语，它表示最小的有意义的单元。 我们来看看一个非常标准的标签，会如何被拆分。

<

这里第一个 Token 应该是什么呢？显然，作为一个词（Token），整个 p 标签肯定是过大了，甚至它里面还可以嵌套。那么，只用 p 标签的开头呢？`<p class="a">`也不太合适，因为标签里面可能有属性。这里的第一个 Token 应该是 `<p`，那么我们继续拆分，下一个 Token 就是 `class="a"` 属性，然后是 p 标签的结束 `>`。接着是文本 `text text text`，最后是 p 标签的结束标签 `</p>`。我们把一段标签拆分成了几个 Token 。