DOM : Document Object Mode 文件物件模型

你可以將 HTML 想像是一顆樹的結構會有一層一層，我們就會稱為 DOM tree，樹中間可能會有枝葉我們就會稱為 DOM 節點（元素），而我們會透過 JavaScript 語法來操作這些 Dom 元素。

Dom tree

一般 JavaScript 如何操作 Dom 元素 ?

JavaScript 取得 Dom元素方式 :

選取 Dom 元素，會用 JavaScript 一些語法先選擇 document

選取 Dom 元素

• document.getElementById("id名稱") - 選取ID
• document.getElementsByClassName("取得相同class名稱") - 選取 Class
• document.querySelector(".class名稱") - 指定 Class
• document.querySelector("#id名稱") - 指定 ID

修改 Dom 元素

• document.getElementById("id名稱").innerHTML 加入HTML

選取某個 Dom 元素進行事件監聽

先選取元素 > addEventListener 監聽事件 > 寫程式觸發事件

以上圖片、部分資料來自 "提姆寫程式"，上面就是我們一般網頁操作 Dom 元素方式，而 Vue 框架則是運用 虛擬 Virtual Dom 去操作。