每個網頁都生長著一種可以七十二變的虛擬樹。

DOM

DOM 是 Document Object Model 的簡稱，中文譯為文件物件模型，是瀏覽器提供的 API，並不是 JavaScript 語言的一部份。至於文件指的就是HTML 文件，等等！那為什麼又跟物件有關係？ HTML 不就是一大堆讓人眼花撩亂的 tag 和文字內容組成的嗎？為什麼是物件？

以下純屬個人想像

如果把 HTML 的結構圖想像成圖畫紙上的蘋果樹，為什麼是蘋果樹？沒有什麼原因，純粹因為我喜歡蘋果。那麼有一天當大家都不喜歡蘋果樹，比較想看櫻桃樹，那我就得用另一張圖畫紙畫上櫻桃樹，每當大家喜新厭舊的同時，就是我埋頭苦畫樹幹的時刻。
這時瀏覽器感人地派出 DOM 來神救援，DOM 的出現讓平面的蘋果樹，變成像是樂高做成的蘋果樹，這麼一來就可以直接把紅蘋果換成青蘋果，或是把蘋果換成柳橙，蓮霧或是芭樂。皆大歡喜～

我們還是認真一點來看看MDN的精準專業描述怎麼說：

The DOM represents the document as nodes and objects; that way, programming languages can interact with the page

那麼HTML又是怎麼從單純的文件搖身一變成了DOM呢？那就得來了解一下瀏覽器是怎麼渲染網頁的。

瀏覽器渲染過程

圖片來源：High Performance Browser Networking - Chapter 10. Primer on Web Performance

長話短說可簡述成下列五步驟：

1. 充滿熱情充滿愛的網頁開發者手刻產生出 HTML 和 CSS
2. 瀏覽器解析了 HTML，將之轉換成 DOM，平行宇宙另一端的 CSS 也會透過解析器轉換成 CSSOM，在DOM的階段可以透過 JavaScript 來動態產生其他元素和效果，這樣一來網頁開發者就可以使用這些物件模型所提供的方法來增加網頁的互動性。
3. 接著，DOM 和 CSSOM 會被整合成 Render Tree，這個階段會排除掉不需要出現在畫面上的節點，例如head節點。
4. 在排版階段則會進行每個節點的運算，決定每個節點應該在畫面的何處出現，主要產生簡單的幾何形狀。
5. 最後階段就會細部繪製各個元件，呈現完整的網頁。

粗略了解了 DOM Tree 和瀏覽器渲染網頁的過程後，接下來幾天就來一步步認識 DOM 的資料類型並探索如何操作 DOM 吧~

參考資料：

• Introduction To the DOM - MDN
• An Introduction to Browser Rendering