• DOM 是一個 API，讓我們可以用程式語言 (e.g. Javascript) 來操作 web documents (e.g. HTML)
• DOM 採用 DOM tree 的形式來表示 HTML 檔案

DOM Tree

有兩個主要的 abstract base class

• EventTarget: 代表這個物件可以接收 event
  • 常用的 addEventListener() 就是在這個 class 做定義
• Node: 繼承自 EventTarget, 作為 tree 內各種節點的 base class

常見的節點 (都是繼承自 Node):

• Document: 每個網頁都會對應到一個，可以看做 tree 的 root
• Element: 代表一般元素的節點，像是各種 HTML element 就是屬於它的 subclass HTMLElement
• Attr: 代表 Element 的屬性
  • 基本上我們比較常使用 Element.getAttribute() 來操作屬性，鮮少直接操作 Attr
• CharacterData: 代表只含有一般文字的節點，會由 Text, Comment 等其他 subclasses 來實作

DOMContentLoaded v.s. load event

• DOMContentLoaded (DCL): 當 DOM 被完整建構，而且所有 Javascript 都被執行完後 (包括 defer) CSSOM 都出現了，觸發該事件
• load: 當整個頁面以及所有需要的資源都載入完成時觸發

---

References

• https://developer.mozilla.org/en-US/notes/Web/API/Document_Object_Model