前言

此次介紹什麼是 DOM

DOM

• DOM = Document Object Model (文件物件模型)
  • 簡單來說可以利用 JS 來跟 HTML 文件進行互動
  • 因為瀏覽器載入網頁會建立 DOM 樹，會包含各種節點，每個節點都是物件
  • 程式碼會存取和變更這個 DOM 樹，然後改變就會反應在瀏覽器上(互動)
  • 參考WIKI的圖

• DOM 既不屬於 HTML，也非 JS 的一部分，它是額外定義的一系列規則。所有的瀏覽器都會將此模型實作於瀏覽器中，包含兩個領域 (from：碁峯 JavaScript & JQuery 網站互動設計程式進化之道)
  • 建立 HTML 頁面模型：以 DOM 樹的方式建立
  • 存取和變更 HTML 頁面內容：屬於 API(應用程式介面)
• DOM 是用來表示和與任何 HTML 或 XML 文件互動的 API。DOM 是一個載入於 browser 中的文件模組，它的表示方式像樹的節點一樣，每個節點代表著文件的一部分(如：element、文字或留言)。 (from：MDN)
• DOM 樹主要包含4個類型的節點
  • 文件節點：document
  • 標籤元件節點：html、body、div之類
  • 屬性節點：attribute
  • 文字節點：text

如何使用

• 不覺得 Document 似乎有點眼熟？原來之前已經有用過了，在 Day07 - 變數(04) 時有用到第一個就是 document.getElementById( )
• 主要分為2步驟：存取元件後，去操作這些元件
• 存取元件
  • 選取一個：getElementById()、querySelector()
  • 選取多個：getElementsByClassName()(Element 有 s)、querySelectorAll()
  • 節點間的互動：parentNode(目前元件的父節點)
• 操作元件
  • 存取 / 變更文字節點：nodeValue
  • 操作 HTML 內容：innerHTML、textContent
  • 存取 / 變更屬性值：className、id
• 有些根本沒聽過？
  • 放心，我也是第一次遇到，基本上就是遇到需求，再去尋找該使用何種方式去達到目的
  • 例如只想選一個會使用getElementById()，多個會改用getElementsByClassName()，然後想改內容會用innerHTML、textContent

次回

作個 DOM 的練習吧！