什麼是DOM？為什麼網頁設計需要DOM？
為了製作設計良好、引人入勝的網頁，您網站的文件需要相互訪問，而文檔對象模型（或DOM）使這成為可能。
什麼是DOM？
文檔對象模型 (DOM) 是HTML的編程接口。它將HTML文檔的內容轉換為標準化對象，JavaScript等函數式程式語言可以輕鬆訪問和修改該對象。由於大多數網頁事件是由非HTML原始碼驅動的，因此所有動態網頁都依賴DOM來正常顯示和運行。
為了更好地理解為什麼DOM有用，讓我們首先討論「對象」在電腦編程中的含義。
什麼是對象？
歸根結底，電腦軟體的最終任務是對數據執行操作。數據有各種不同的類型：數字、字符等，僅舉幾例。
程式執行的越多，它需要處理和處理的數據就越多。如果沒有一個可擴展的、有組織的系統來執行此操作，日益增加的複雜性將導致錯誤。
因此，為了組織相關的數據片段，程式設計師使用一種稱為對象的數據類型。對象與其他數據類型不同，因為它們的目的是保存其他數據。一個對象在一個共同的概念下包含相關的數據片段，存儲在一個層次結構中。
下面是一個示例：假設您正在構建一個存儲有關房屋訊息的軟體。在現實生活中，房屋包含很多東西——房間、家具、電器和人，更不用說其他相關訊息，如鄰里、地址和樓層數。
如果您想在軟體程式中表示房屋變量，單獨存儲所有這些與房屋相關的數據是沒有意義的。相反，您可以為系統中的每個房屋創建一個「房屋」對象，並將所有房屋物品放入其中。「房子」可以包含我們上面描述的所有訊息的數據，等等。
您甚至可以將對象放入其他對象中。在我們的示例中，房屋對象可能包含「房間」對象。您可以將一個房間對象指定為廚房，它本身可以包含電器、台面材料等的數據。
這裡的主要內容是對象以邏輯的、分層的方式將數據組合在一起。為了更好地理解這一點，想像一個像樹這樣的物體是有幫助的。嗯，更像是一棵倒過來的樹。對象的名稱就像樹的「根」，它的所有分支就像存儲在其中的數據。這是一棵樹來可視化我們的房子對象：
為什麼我們需要DOM
在我開始計劃我的豪宅之前，讓我們將這個對象概念與HTML聯繫起來。看看這個基本的HTML文件：
請注意，它的部分也是按層次結構構建的。<html> 標籤在我們的例子中就像最頂層的「房子」。在我們的HTML「房子」中，我們有<head>和<body>標籤，它們就像我們的房間。最後，有最具體的元素：<title>、<h1>、<h2>、<p>、<img> 和 <button>。把這些想像成房間特定的物品，比如床和燈。
HTML 文檔中的元素以這種方式構建，其原因與對象相同：層次結構有助於電腦程式讀取和處理訊息。在HTML的情況下，您的Web瀏覽器就是程式，而JavaScript等腳本語言則用於更改和修改HTML原始碼。
但是，有一個問題。HTML 文檔本身不是對象。如果沒有某種文件到對象的轉換，它們就不能被JavaScript讀取。這就是DOM的用武之地。
DOM將整個HTML文檔表示為單個對象。為了創建DOM，讀取HTML文件的Web瀏覽器接收其所有部分，從根 <html> 元素到最小的 <span> 標籤，並將它們作為JavaScript理解的對象輸出。
「代表」這個詞在這裡很重要。DOM不是HTML文件的副本——它只是Web瀏覽器組織HTML訊息的一種不同方式。
瀏覽器創建DOM的方式類似於它創建網頁的方式。當您在瀏覽器中打開任何頁面時，您會看到瀏覽器對底層HTML的可視化表示。您正在查看相同的內容，但組織為您的大腦可以輕鬆理解的頁面。DOM是瀏覽器表示HTML的另一種方式。在DOM中，HTML 被組織成一個JavaScript可以輕鬆理解的對象。
還記得我之前的樹示例嗎？以下是DOM將我們的簡單HTML文件表示為JavaScript友好對象的方式：
在我們繼續之前要注意的另一件事是：DOM並非特定於 JavaScript。任何程式語言（例如 Python、C++）都可以使用DOM來修改網頁。但是，JavaScript會影響我們在Web上看到的大多數頁面，因此它是了解DOM所需的唯一程式語言。
我們已經討論過房屋、瀏覽器和倒置的樹……但這與製作網站有何關係？
什麼是網頁設計中的DOM？
在網頁設計中，JavaScript用於控制網頁的行為。DOM將JavaScript連結到源HTML原始碼，這使JavaScript能夠在單個HTML元素上執行其功能。這種 JavaScript-HTML 互動創造了互動式網頁設計的體驗。
對象不僅有利於組織數據——而且它們還允許程式輕鬆訪問其中的特定數據。
回到我們的房子對象，假設您想編輯特定房子的「kitchen_countertop」元素。為此，您的程式只需要找到有問題的房子，沿著對象樹向下遍歷到廚房對象，然後將「kitchen_countertop」元素從「quartz」更改為「marble」。不錯的選擇。
同樣，DOM為JavaScript提供了對HTML文檔中幾乎所有元素的訪問，從整個頁面到一小段文本。
每當頁面加載後網頁上發生某些事情時（例如，單擊按鈕提交表單或元素更改大小/顏色），這是通過DOM定位特定元素並進行更改的JavaScript原始碼。JavaScript原始碼可以位於其自己的 .js 文件中，甚至可以位於HTML文檔本身中。
有關DOM的基本示例，請嘗試來自 W3Schools 的演示。左側面板包含原始碼，右側面板顯示作為網頁顯示的原始碼。按下的那一刻點擊我！，以下JavaScript運行。
document.getElementById('demo').style.display='block』
在上面的原始碼中：
document是JavaScript通過DOM定位HTML文件對象的方式。它告訴瀏覽器，「我想進入HTML文件進行更改。」
.getElementByID('demo')以ID為「demo」的頁面元素為目標。這是JavaScript想要修改的元素。為了到達那裡，JavaScript從最高的 <html> 標籤開始，然後遍歷DOM直到它遇到帶有文本「Hello JavaScript！」的元素。
.style.display='block'是動作。一旦找到目標元素，它就會顯示文本。
當用戶與其互動時，複雜的網頁會執行這些調用數百次。JavaScript每次都使用DOM。
DOM：讓網際網路變得有趣
希望您明白為什麼文檔對象模型對現代網站如此重要。沒有它，JavaScript將無法以很酷的方式改變網頁，我們只有一堆無聊的靜態網頁。
您永遠無需擔心自己編寫DOM，因為Web瀏覽器會為您完成所有工作。儘管如此，無論您是在開始重新設計網站時嘗試新的頁面效果，了解您的線上狀態的內部運作情況都是很有用的。
