DAY 7 - 深入了解 Dom 元素，了解 Virtual DOM 原理

Dom 元素是什麼 ?

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 去操作。

Virtual Dom 虛擬 Dom 元素

JavaScript 每操作一次 Dom 元素會使 Dom 重整/重排，當使用過多會消耗很多資源造成效能問題，而像是 Recat 及 Vue 在操作 Dom 元素則是採用 Virtual Dom 方式去操作，透過 JavaScript``模擬一個 Dom 節點 -vNode，比較兩者差異，然後再一次變更Dom，渲染至畫面。

虛擬 Dom 渲染方式
template -> render数 -> 虛擬 Dom VNode-> Dom -> View

Vue 在編譯上會有三個過程:

• 編譯：Vue 模板被編譯，用来返回虛擬 DOM Tree
• 掛載：運行時渲染，創建真實的 DOM 節點
• 更新：創建一個更新后的虛擬 DOM Tree，運行後將他與真實的DOM Tree 對比，將必要的更新一次性更新到真實的 DOM 上去

是不是對 Vue 及一般操作 Dom 元素更了解，也會對掛載元件及生命週期有更深入一層了解，Virtual Dom 最初是由 Recat 開拓，到後來 Vue團隊也使用了這個技術，來達成效能優化及優異的渲染。