DOM 樹（文件物件模型樹）是HTML或XML文件的樹形表示，它以一種層次結構的方式來展現文件的內容和結構。前端開發中，JavaScript 透過 DOM 來操作 HTML 元素。
我的理解可以概括為以下幾點：
- 樹狀結構: DOM 將 HTML 文件解析成一個樹形結構，由各種節點組成。每個節點代表文件中的一個元素、屬性、文字或註釋等。
- 節點型別: DOM 中的節點有多種型別，最常見的是元素節點、文字節點和屬性節點。元素節點代表 HTML 標籤，文字節點代表標籤內的文字內容，屬性節點代表 HTML 標籤的屬性。
- 根節點: 整個文件的根節點是
document物件，它代表整個 HTML 文件。 - 父子關係: 節點之間存在父子關係。例如，
<body>元素是<html>元素的子節點，而<p>元素可以是<body>元素的子節點。兄弟節點是指擁有相同父節點的節點。 - 訪問和操作: JavaScript 提供了豐富的 API 來訪問和操作 DOM 樹中的節點。例如，可以使用
getElementById透過 ID 獲取元素，使用querySelector透過 CSS 選擇器獲取元素，使用createElement建立新元素，使用appendChild新增子節點，使用removeChild刪除子節點等等。 - 動態更新: 透過 JavaScript 可以動態地修改 DOM 樹，從而改變網頁的內容和結構。例如，可以動態地新增、刪除或修改元素，改變元素的屬性，以及修改文字內容等。
- 渲染頁面: 瀏覽器根據 DOM 樹和 CSS 樣式來渲染頁面。當 DOM 樹發生變化時，瀏覽器會重新渲染頁面以反映這些變化。
- 效能最佳化: 頻繁地操作 DOM 會影響網頁的效能。因此，在前端開發中，需要儘量減少 DOM 操作，例如使用文件片段（
DocumentFragment）進行批次操作，或者使用虛擬 DOM 技術來最佳化效能。
總而言之，DOM 樹是前端開發中非常重要的一個概念，理解 DOM 樹的結構和工作原理對於編寫高效的 JavaScript 程式碼至關重要。 透過操作 DOM，開發者可以實現各種動態的網頁效果，並建立豐富的互動體驗。