關於 DOM 的理解

kari發表於2019-04-10

什麼是 DOM

DOM === 想象的樹型結構模型

DOM 提供的 API 的作用就是修改或者檢視 HTML 程式碼；

DOM 的 D 指的是Document，可以認為是 HTML 文件；

DOM 中的 O 指的是 Object，他是在記憶體中，按照樹型結構，通過建構函式(如 Node, Document, Element, Text, Comment)，構造出物件，將 DOM 展現到記憶體中；

DOM 的 M 指的是 Model，因為在 HTML 結構在記憶體中用一個模型來表示，這個模型就是樹型結構。

使用 DOM

JavaScript 將 HTML 文件渲染成 DOM 的樹型結構。

獲取 DOM 的節點：

  • 直接在 DOM 尋找: document.querySelector(aabb) 和 document.querySelectorAll(aabb)
  • 通過節點關係獲得節點：
    兄弟關係 兒子關係 父關係

瞭解 DOM 的節點:

Node.nodeName  
Node.nodeType  
Node.textContent
複製程式碼

建立 DOM 的節點:

document.createElement("div")
// 生成 Element 節點
複製程式碼
document.createTextNode("你好")
// 生成 Text 節點
複製程式碼

相關文章