文件物件模型(DOM)，基本上是「網頁如何在幕後工作」的Web 開發術語，是每個Web 開發人員都應該擁有的東西他們的工具包。它就像是推動現代網路開發的秘密武器。

但為什麼是 DOM？我最近偶然發現了一個關於瀏覽器如何工作的視頻，然後深入研究了一些文章，這是我對“為什麼？”

每個瀏覽器都使用**瀏覽器引擎**，它是網頁瀏覽器的核心元件，負責將網頁內容（包括 HTML、CSS 和 JavaScript）渲染為使用者可以互動的視覺表示。

「文件」：此術語指載入至網頁瀏覽器中的網頁。它表示網頁內容的結構化層次結構，包括標題、段落、圖像、連結、表單等元素。 DOM 文件本質上是網頁結構的記憶體表示，由瀏覽器的渲染引擎在頁面載入時創建。

現在有趣的部分是瀏覽器引擎如何將文件轉換為節點樹，我們稱之為用於繪畫的 DOM。

下載完文件後，它被轉換為原始數據，是的，0和1。並且這些原始資料位元組被轉換為字元。這種轉換是根據HTML檔案的字元編碼完成的。

這些字元被進一步解析為稱為標記的東西。與任何其他程式語言一樣，標記可以定義為該程式語言中有意義的最小單一元素。這裡標記指的是 HTML 中的標籤，即 body、h1、h2、 p、跨度等

標記化完成後，下一步就是建立這些標記。 這就是物件發揮作用的地方。一個物件是由這些標記創建的，這些物件包含有關每個實體的大量信息，包括標籤開始、標籤結束、屬性、資料/值等。

現在，我們有一個「文件」和「物件」，但它仍然是非結構化的，因為這些物件之間沒有關係。標記化後，這些標記將轉換為節點。每個節點都與另一個節點有關係，包括父節點、子節點和兄弟節點。這些節點到節點的關係形成了熟悉的樹狀結構。這個過程稱為物件樹建模。現在，HTML 文件中的節點樹模型已準備就緒，可以進行繪製了。

回顧一下，名稱「文件物件模型」反映了其目的和功能。它充當網頁內容的結構化模型，表示為物件的集合。 「DOM」這個名字是由「文件」（網頁）、「物件」（表示元素）和「模型」（結構化表示）融合而來。

我希望這對您有所幫助，如果您有任何具體問題或疑慮，請隨時提供任何反饋或詢問。