初學者指南:JavaScript 中的 DOM 模型與 HTML 的關係

更新日期: 2024 年 10 月 25 日

在學習 JavaScript 和網頁開發時,我們經常會聽到「DOM」這個詞。

DOM 是 JavaScript 操作網頁的基礎,了解 DOM 與 HTML 之間的關係,是理解如何讓網頁動起來的重要一步。

本篇文章將帶你認識什麼是 DOM,以及它與 HTML 之間的關係,並講解瀏覽器是如何處理 HTML 來形成 DOM 模型的。


DOM 是什麼?

DOM(Document Object Model)是網頁的文件物件模型,它是一個介面,讓 JavaScript 可以與 HTML 文件進行互動。

你可以把 DOM 想像成 HTML 文件的樹狀結構表示,通過這個結構,我們可以用程式碼修改、刪除或新增 HTML 的內容。

簡單來說,DOM 是瀏覽器對 HTML 文件的一種內部表示

JavaScript 通過 DOM 來控制 HTML 的各種元素,而這些改變只是瀏覽器中的視覺效果,而不會影響到原始的 HTML 檔案本身。


瀏覽器是如何分解 HTML 的?

瀏覽器在加載網頁時,會依照以下步驟來處理 HTML,最終形成 DOM:

  1. 解析 HTML 文件:瀏覽器首先讀取 HTML 文件,從上到下逐行解析。
  2. 構建 DOM 樹:瀏覽器將 HTML 標籤轉換為節點(Node),並以樹狀結構表示。每個 HTML 標籤對應到 DOM 樹中的一個節點,這些節點組合起來就形成了完整的 DOM 樹。
  3. 生成 CSSOM:瀏覽器同時會解析 CSS,並生成 CSSOM(CSS Object Model)。CSSOM 和 DOM 共同作用,用來確定網頁元素的樣式。
  4. 構建渲染樹:最後,瀏覽器結合 DOM 和 CSSOM,構建出渲染樹,這是瀏覽器呈現網頁所需的結構,並將它顯示在螢幕上。

這個過程中,HTML 的內容被轉換為 DOM 的物件模型,然後 JavaScript 可以通過這個 DOM 來操作網頁內容。

圖式說明

HTML 文件 -> 解析器 -> DOM 樹(Document Object Model)

這個 DOM 樹代表了 HTML 文件在瀏覽器中的結構,而 JavaScript 可以通過 DOM 提供的方法來操作這些節點,例如新增元素、刪除元素、改變元素的內容等等。


DOM 與 HTML 的關係

HTML 是網頁的靜態結構,而 DOM 是 HTML 在瀏覽器中的動態表示。這意味著:

  • HTML 是網頁的基礎結構,它描述了網頁的內容和佈局。
  • DOM 是 HTML 文件的物件化表示,JavaScript 可以使用 DOM 來動態地操縱網頁的內容和結構。

當 JavaScript 操作 DOM 時,實際上是改變了瀏覽器內部對 HTML 文件的表示方式,而不是直接修改原始的 HTML 文件。

例如,如果你用 JavaScript 新增了一個按鈕,這個按鈕只是顯示在瀏覽器中,原始的 HTML 文件並不會因此而改變。

範例

假設你有如下的 HTML:

<div id="content">
  <p>這是一段文字。</p>
</div>

通過 JavaScript,我們可以操作 DOM,對 div 裡面的內容進行改變:

document.getElementById('content').innerHTML = '<p>這是一段新的文字。</p>';

這段 JavaScript 代碼會修改 DOM,讓 div 裡的內容變成「這是一段新的文字」。

但是,這個變化只在瀏覽器中生效,並不會改變原始的 HTML 文件。


使用 DOM 操作 HTML 的好處

使用 DOM 來操作 HTML,有很多好處,包括:

  1. 動態更新網頁內容:通過 JavaScript 操作 DOM,我們可以根據用戶的行為動態地改變網頁的內容,這是現代交互式網站不可或缺的功能。例如,在用戶提交表單後即時顯示確認信息,或根據用戶點擊改變頁面的某些元素。
  2. 提高用戶體驗:動態操作 DOM 可以減少網頁的重新加載,這樣可以讓網站更加流暢,提高用戶體驗。例如,單頁應用程序(SPA)利用 DOM 操作,實現了無需整頁重新加載的順暢瀏覽體驗。
  3. 增強網頁的互動性:例如,你可以通過事件監聽(如點擊、滑鼠移動等)來觸發特定的 JavaScript 代碼,這些代碼會通過 DOM 來更新網頁的顯示,從而讓網頁變得更加互動和有趣。

小結

DOM(Document Object Model)是瀏覽器用來表示和操作 HTML 文件的物件模型,JavaScript 透過 DOM 可以動態地操作網頁中的元素。

而這些改變只在瀏覽器的內部表示中生效,不會改變原始的 HTML 文件。

理解 DOM 與 HTML 的關係,是學習 JavaScript 操作網頁的基礎。

瀏覽器通過解析 HTML 文件,生成 DOM 樹,並通過 JavaScript 對這棵樹進行各種操作,實現了網頁的動態行為。

希望這篇文章能幫助你理解 DOM 模型與 HTML 之間的關係,並為你進一步學習 JavaScript 操作 DOM 奠定基礎。

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *