DOM 是什麼？文件物件模型與節點種類完整介紹
DOM 全名為 Document Object Model，中文為 文件物件模型，它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。
換個說法：您寫的 HTML 是一份文字檔，瀏覽器讀完之後會在記憶體中蓋出一棵由物件組成的樹，這棵樹就是 DOM。JavaScript 能改的是這棵樹，而不是原始的 .html 檔案，所以重新整理頁面後，改動就會消失。
節點（Node）
前面有提到 DOM 的樹狀結構，而且結構中最重要的就是每個節點。任何東西在 HTML 文件中都是一種 DOM 節點，例如：文件、元素、屬性、文字、註解皆是節點。
文件（Document）
Document 就是指這份文件，也就是這份 HTML 檔的開端，所有的一切都會從 Document 開始往下進行。
元素（Element）
Element 就是指文件內的各個標籤，因此像是 <h1>、<p> 等等各種 HTML 標籤都是被歸類在 Element 裡面。
屬性（Attribute）
Attribute 就是指各個標籤內的相關屬性，例如：href、src、class、id。
文字（Text）
Text 就是指被各個標籤包起來的文字，舉例來說在 <p> Hello World </p> 中，Hello World 被 <p> 這個 Element 包起來，因此 Hello World 就是此 Element 的 Text。
註解（Comments）
Comment 就是註解 <!--、-->，任何被註解的程式碼是不會執行。
由 Birger Eriksson - 自己的作品, CC BY-SA 3.0, 連結
節點之間的關係
樹狀結構的重點在於 關係。以下面這段結構為例，以 <ul> 的視角來看，<h2> 是兄弟、<section> 是父層、<li> 是子層：
<section>
<h2>Hello JavaScript!</h2>
<ul>
<li>直譯式語言。</li>
</ul>
</section>搞懂關係之後，才能決定要用哪一種方式 選取 DOM，也才有辦法理解 事件傳播 為什麼會由內往外或由外往內跑。
DOM 方法
此外，DOM 也提供了 API 讓我們來使用，Away 喜歡稱 DOM 的原生方法。其方法內容包含了 DOM 的選取、編輯、監聽。我們將會在後續的內容一一介紹給各位。
| 分類 | 代表方法 | 對應文章 |
|---|---|---|
| 選取 | querySelector()、getElementById() | DOM 的選取 |
| 編輯 | textContent、innerHTML、setAttribute() | 節點的屬性 |
| 監聽 | addEventListener() | 什麼是事件 |
小提醒
Application Programming Interface 縮寫為 API，一般稱為 應用程式介面，API 就像一個介面，可以幫助開發者節省精力，扮演應用程式和應用程式之間的橋樑。DOM API 也是 Web API 的一員。
要留意的是，完全靠 JavaScript 操作 DOM 才產生的內容，搜尋引擎要排隊等第二階段渲染才讀得到，社群平台的爬蟲更是完全不執行 JavaScript。這個落差與驗證方式見 純 CSR 的 SEO 問題。
常見問題
DOM 和 HTML 是同一件事嗎？
不是。HTML 是寫在檔案裡的原始碼文字，DOM 是瀏覽器解析那份原始碼後，在記憶體中建立的物件樹。JavaScript 改的是 DOM，不是原始檔案。
節點（Node）與元素（Element）有什麼差別？
節點是所有成員的統稱，包含文件、元素、屬性、文字與註解；元素只是節點的其中一種，也就是各個 HTML 標籤。所以元素一定是節點，節點不一定是元素。這個差別在 事件物件 比較 tagName 與 nodeName 時會再遇到。
為什麼 DOM 是樹狀結構？
因為 HTML 標籤可以層層包覆，形成父子關係的階層。瀏覽器就依這個階層建立 DOM 樹，程式也才能沿著父層、子層、兄弟層的關係找到目標節點。
什麼是 DOM API？
DOM API 是瀏覽器提供給程式操作 DOM 的方法集合，內容包含節點的選取、內容與屬性的編輯，以及事件的監聽。它屬於 Web API 的一部分。
為什麼程式抓不到 DOM 元素？
多半是程式比元素早執行。<script> 寫在元素之前又沒有加 defer 時，DOM 還沒建立，選取自然回傳 null。加上 defer，或把程式移到元素後面即可，詳見 JavaScript 寫在哪裡。
