文件物件模型 (DOM)

文件物件模型(DOM)是HTML、XML 和 SVG 文件的程式介面。它提供了一個文件的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。本質上，它將網頁與腳本或程式語言連結在一起。

DOM的組成

DOM是由節點組成的。
1.html載入完畢後，瀏覽器會把html文件結構化生成一個DOM樹
2.獲取DOM的元素節點
3.操作該元素（改變該元素的屬性或給該元素新增事件）

在HTML中，一切都是節點

• 元素節點：HTML標籤
• 文字節點：標籤中的文字
• 屬性節點：標籤的屬性，
  文字節點是元素節點的子節點，屬性節點既不是元素節點的子節點也不是元素節點的父節點，整個html文件是一個文件節點，而所有的節點都是Object型別。

DOM的用處

• 獲取元素節點
• 設定元素的屬性值
• 設定元素的樣式
• 動態建立和刪除元素
• 給元素繫結事件

DOM API

DOM: JavaScript 用來控制網頁的節點與內容的標準，DOM有著W3C所制定的標準來規範。API:應用程式介面，英文全名是：Application Programming Interface。可以透過 DOM API 取得節點，JavaScript如下方程式碼：

根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。

document.getElementById("xxx");

針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件 [註1]

document.getElementsByTagName("xxx");

針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。

document.getElementsByClassName("xxx");

針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。

document.querySelector("xxx");
document.querySelectorAll("xxx");

而透過 DOM API 選取出來的節點，我們可以透過操作 textContent 屬性來變更它的文字。設定一個 HTML 屬性節點為 id，名稱為 greet：

<h1 id="greet"></h1>

也可以先透過 document.querySelector() 選取方法來取得節點，然後修改 textContent 屬性：

<script>document.querySelector('#greet').textContent = 'Hello World!'</script>