什麼是 DOM？

Home >> Blog >> 什麼是 DOM？

什麼是 DOM？

作為一個SEO與 Web 開發人員，您會聽到很多術語，並且您可能不確定哪些術語在您的學習中很重要。您可能聽說過的其中一個術語是 DOM，這是 seo & Web 開發人員需要學習的一個重要概念。事實上，這可能是最重要的。

在本文和下面的短片中(請開中文字幕)，我們將了解 DOM 是什麼、它的外觀、它是如何使用的，以及為什麼你應該關心它。

DOM是什麼？

DOM 是代表文檔對像模型的首字母縮寫詞。這就是網絡瀏覽器在內部表示網頁的方式。

DOM 確定頁面上應該包含哪些內容以及內容的每個元素如何與其他元素相關聯。讓我們看一下首字母縮寫詞的每個單詞。

文檔

我們可以將文檔視為一種結構化資訊的方式，包括文章、書籍和科學論文。對於 Web 開發人員來說，文檔是網頁的名稱，他們將 DOM 視為網頁上所有內容的模型。DOM 將這些東西稱為對象。

目的

網頁上的“東西”是對象，有時稱為元素或節點。以下是您可能在網頁上遇到的一些對象：

• 內容。網頁上最明顯的對像是內容。這些可以包括文字、短片、圖像等。
• 結構元素。其中包括 div、容器和部分。您可能看不到這些元素，但您會看到它們如何影響可見元素，因為它們在網頁上組織了這些元素。
• 屬性。網頁上的每個元素都有屬性。例如，這些包括類、樣式和大小。這些是 DOM 中的對象，但它們不是內容和結構元素等元素。

模型

模型是事物的表示，它幫助我們理解事物是如何組合在一起的。許多事物的模型需要被普遍理解、分析和使用。

正在使用的模型的一個示例是用於指令。藍圖、平面圖和宜家指南都是這種模型的例子。它們以足夠的細節顯示正在建模的對象，可以重新創建它。

模型的另一個示例是描述。這種類型的模型用於簡化大創意或複雜系統，以便更容易理解它們。這些類型的模型幫助我們理解像我們的銀河系這樣的事物。

DOM 是網頁的模型。它充當 Web 瀏覽器的一組指令。

DOM 是什麼樣的？

DOM 表示為一種稱為樹的數據結構。DOM 中的每個對像都分層地位於另一個對象之下，並且任何對像都可以有多個子對象，但只有一個父對象。

每個 DOM 對像都“擁有”它的子對象。如果你從 DOM 中刪除一個對象，它的所有子對像也將隨之刪除。

DOM 本身是數字的，所以它實際上並不“看起來”像任何東西，但它可以用幾種不同的方式表示。這些表示可以幫助我們可視化 DOM 是什麼。

樹形圖

表示 DOM 的一種方法是使用樹形圖。樹形圖顯示父對象和子對象之間的關係，它們之間的線表示它們的關係。

以家譜為例。在頂部，你會有你的祖父母。然後，在下面，您將有您的父母和他們的兄弟姐妹，然後是您、您的兄弟姐妹和您的堂兄弟姐妹。

類似地，網頁的根節點（樹形圖頂部的節點）將是 HTML 元素。在下面，您將擁有頭部和身體元素。在 body 元素下，您可能會找到 header、main 和 footer 元素。在 header 元素下方，您可能會找到 img、nav 和 h1 元素。

HTML

表示 DOM 的最常見方式是使用HTML。您可以通過在瀏覽器中打開開發人員工具或右鍵單擊元素並選擇“檢查元素”來查看網頁的 HTML。這是一個 HTML 示例：

這個元素列表起初可能看起來不像樹結構，但瀏覽器檢查器或上面示例中的每個縮進就像樹圖中的垂直級別。

HTML 元素包裝了作為其子元素的其他元素。img 元素是 header 元素的子元素，header 元素是 body 元素的子元素，body 元素是 HTML 元素的子元素。

儘管這是表示 DOM 的最常用方式，但 HTML 並不是 DOM 本身——它只是表示它。

源程式碼

創建文檔的方法比使用 HTML 更多。您可以使用PHP等後端編程語言在加載網頁時生成 HTML。您可以使用JavaScript動態修改網頁中的元素。或者，您可以使用像React這樣的前端框架來創建完整的網頁，而無需編寫任何 HTML。

呈現的網頁

當瀏覽器將其轉換為我們可以在瀏覽器中看到的東西時，我們還可以查看渲染網頁中的 DOM。

簡而言之，DOM 是一組關於如何構建特定網頁的指令。DOM 告訴瀏覽器如何渲染網頁的內容，我們可以通過源程式碼編輯 DOM。

作為 Web 開發的關鍵組件，如果您想成為一名前端工程師、後端工程師或全棧工程師，則需要了解 DOM 。要了解有關構建網站的更多資訊，請查看我們的 Web 開發文章。