什么是DOM究抓？
需要我們要站在瀏覽器的角度來思考。??
DOM (Document Object Model) 文檔對象模型袭灯，是 HTML 和 XML 文檔的編程接口刺下。HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法。DOM是接口稽荧，HTML是標(biāo)記語言橘茉。
節(jié)點(diǎn)
在HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
- 整個文檔是一個文檔節(jié)點(diǎn)
- 每個 HTML 元素是元素節(jié)點(diǎn)
- HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
- 每個 HTML 屬性是屬性節(jié)點(diǎn)
- 注釋是注釋節(jié)點(diǎn)
而HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：
節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級關(guān)系姨丈。常用父（parent）畅卓、子（child）和同胞（sibling）等術(shù)語來描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)蟋恬。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）翁潘。
在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）歼争。
每個節(jié)點(diǎn)都有父節(jié)點(diǎn)拜马、除了根（它沒有父節(jié)點(diǎn)）。
一個節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)沐绒。
同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)俩莽。
HTML片段
<html> 節(jié)點(diǎn)是根節(jié)點(diǎn)
<head> 和 <body> 的父節(jié)點(diǎn)是 <html> 節(jié)點(diǎn)
文本節(jié)點(diǎn) "Hello world!" 的父節(jié)點(diǎn)是 <p> 節(jié)點(diǎn)
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>Hello world!</p>
</body>
</html>
瀏覽器渲染頁面的過程
用戶輸入網(wǎng)址通過DNS（Domain Name System）解析后得到服務(wù)器地址，瀏覽器向服務(wù)器發(fā)起http請求乔遮，經(jīng)過TCP/IP三次握手確認(rèn)鏈接后扮超，服務(wù)器將需要的代碼發(fā)回給瀏覽器。
瀏覽器接收到代碼后進(jìn)行解析，經(jīng)過DOM構(gòu)造瞒津、布局以及繪制頁面蝉衣，最終展現(xiàn)為網(wǎng)頁。
第一步巷蚪，DOM構(gòu)造
瀏覽器首先將收到的html代碼病毡，通過html解析器解析構(gòu)建為一顆DOM樹。DOM樹就像是一顆倒長著的大樹屁柏，可以順著這顆樹做出許多操作啦膜。然后將接收到的css代碼，通過css解析器構(gòu)建出樣式表規(guī)則將這些規(guī)則分別放到對應(yīng)的DOM樹節(jié)點(diǎn)上淌喻，得到一顆帶有樣式屬性的DOM樹僧家。
第二步，布局
瀏覽器按從上到下裸删，從左到右的順序八拱，讀取DOM樹的文檔節(jié)點(diǎn)，順序存放到一條虛擬的傳送帶上涯塔。傳送帶上的盒子就是節(jié)點(diǎn)肌稻，而這條流動的傳送帶就是文檔流。文檔流排完之后匕荸，開始獲取計算節(jié)點(diǎn)的坐標(biāo)和大小等CSS屬性爹谭，作為盒子的包裝說明。然后把盒子在倉庫里一一擺放榛搔，這就將節(jié)點(diǎn)布局到了頁面诺凡。
第三步，繪制頁面
布局完成之后践惑，在頁面上其實(shí)是看不到任何內(nèi)容的腹泌，瀏覽器只是計算出了每一個節(jié)點(diǎn)對象應(yīng)該被放到頁面的哪個位置上，但并沒有可視化尔觉。
最后一步就是將所有內(nèi)容繪制出來凉袱，完成整個頁面的渲染。
參考文章：
果凍公開課
HTML DOM 教程
