什么是 DOM

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來。(MDN)

DOM (Document Object Model，文檔對象模型) 是 W3C 制定的訪問、操作 HTML 和XML的標準。

1. 理解 DOM

對于前端開發者，主要需要關心操作 HTML 的部分，即 HTML DOM 標準。

DOM 標準定義了如何去增加、刪除、查詢、修改HTML的元素。

實際上 HTML 只是一個帶有格式的文本，經過瀏覽器解析后，會變成一顆樹（因為 HTML 也是樹形的），通常會叫他 DOM樹 ，根節點叫 文檔節點(document) ，樹上的每個節點就叫 DOM節點 。

DOM 標準提供了一系列方法對這些節點進行操作。

DOM 節點是契合HTML標準的，可以對其細分：

• 整個文檔是一個文檔節點
• HTML 元素內的文本是文本節點
• 每個 HTML 元素是元素節點
• 每個 HTML 屬性是屬性節點
• 注釋為注釋節點

如果沒有 DOM ，JavaScript 也就在網頁開發中就失去了活力。

2. 操作 DOM

通常前端開發者指的操作 DOM ，就是操作 DOM 節點。

如有以下結構的 HTML：

<div>
  <p>我是一段文本</p>
  <a id="link" href="//imooc.com">我是一個超鏈接</a>
<div>

經過瀏覽器后，上面三個元素就都是 DOM 節點了。

這時候想修改 a 標簽里的文案，就需要操作 DOM 節點來修改。

通過 getElementById 方法就可以根據 id 獲取到一個 DOM 節點，所有 DOM 節點都具有這個方法。

在不知道某個元素的父級對象的時候，就可以使用 document.getElementById 來獲取，意思是在 document 下根據 id 查找一個 DOM 節點。

通過修改dom節點的innerText屬性就可以改掉文案。

實際上這一段文案，就是一個文本節點。

其實具有id屬性的dom節點不需要獲取，也可以直接通過JavaScript訪問，如id為container的元素，就可以直接在JavaScript中使用container訪問。

因為具有id的節點會以id為屬性名，作為window的屬性存在，值就是這個DOM節點。

但通常不建議這么做，因為他人閱讀代碼的時候可能會找不到聲明的地方，二是名字被固定了。

3. 小結

DOM 是一套標準，其定義了怎么操作 HTML 元素，瀏覽器則根據 DOM 標準實現了一系列的接口提供給前端開發者用 JavaScript 調用。

DOM 提供了前端開發者與頁面元素交互的能力，如果失去了 DOM 接口，JavaScirpt 就無法參與網頁的編寫了。