HTML文件解析和DOM樹的構建

瀏覽器解析html文件生成dom樹的過程

以下是一段html**，以此為例來分析解析html文件的原理

picture: a paragraph of explanatory text...

現在進入正題，講講自己對解析html文件構建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樹的過程：

picture: a paragraph of explanatory text...

首先樹構建器接收到標籤解析器發來的起始標籤名後，會加入到棧中，圖1是解析到結束標籤，此時查詢棧頂元素，如果和傳入的結束標籤屬於同種型別的p標籤（如圖2），則將棧頂元素彈出，向dom樹中加入此節點，然後繼續向下解析（如圖3）。

如果遇到的是沒有封閉標籤的元素如，則直接加入dom樹中即可，無需入棧。

依次向下解析，當棧為空，即根節點也加入到dom樹中，dom樹構建完畢。

這裡需要指出的是，當某個元素缺失結束標籤時，假如上述**中第乙個標籤缺失了

結束標籤，即：

picture: a paragraph of explanatory text...

那麼，此時的棧如圖4所示。即此時傳來的結束標籤是，而棧頂元素是，兩者不是同一種標籤，說明div缺少了結束標籤，這種情況也將棧頂元素彈出，加入到dom樹中。相當於給補了乙個

結束標籤。