DOM

DOM 全名 Document Object Model（文件物件模型）。

它是一種「把 HTML 文件轉換成可以用程式操控的物件結構(樹狀的資料結構)」的方式。

什麼是DOM?

DOM（Document Object Model）在前端開發中是指「文件物件模型」。簡單來說，DOM 是一種讓瀏覽器能夠理解並操作 HTML 文件結構的方式。DOM是一個樹狀結構，代表著網頁中的各個部分（標籤、屬性、文字等），而 JavaScript 可以用這個結構來改變網頁內容和樣式。

想像 DOM 就像一顆樹，每個元素都是這棵樹的節點。網頁的每個部分（例如 <div>, <p>, <h1>, <button> 等等）都是這棵樹上的一個「節點」或「葉子」，而這些節點都可以被 JavaScript 讀取、修改或刪除。

這樣的操作不會刷新頁面，使用者會感覺到網頁在「動態」變化。DOM 就是網頁的「內部結構」，JavaScript 是改變這個結構的「工具」。

• 把 HTML 想像成「蓋房子的設計圖」（寫死的文字）。
• DOM 就是「蓋好後的房子裡的東西」，每個房間、家具都可以被搬動、換顏色。
• JavaScript 就像「房子的主人」，可以改變牆壁顏色（CSS）、新增家具（元素）、刪掉東西。

早期的前端工程，都是html寫好之後dom要重新渲染一次，但隨著網路越來越發達，互動越來越多的網站，要整個重新渲染一次DOM太浪費成本，所以開始採用Virtual DOM (虛擬DOM)

React: Virtual DOM

React的背後核心運作 → Virtual Dom，會根據畫面需求建立草稿，再由react(前端框架)轉換成瀏覽器看得懂的DOM。

而Virtual DOM 的運作原理就是透過 新舊Virtual Dom比較，找出差異，讓瀏覽只需要渲染差異的**節點(element)**就好。

範例:

當你透過 React.creatElement() 建立物件時，react會自動轉譯成HTML5

• 範例

  早期的react是這樣寫的。

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  
  // 用 React.createElement 建立虛擬 DOM 物件
  const reactElement = React.createElement(
    'div',
    { className: 'wrapper' },
    React.createElement('h1', null, 'Hello React.createElement!'),
    React.createElement('p', null, '這是不用 JSX，而是直接用函式建立的元素。')
  );
  
  const root = ReactDOM.createRoot(
    document.getElementById('root-container')
  );
  
  root.render(reactElement);
  

React: 語法糖

React的底層語言就是JS，透過在JS中 import React.creatElement() from react寫一個物件之後再透過VD的方式渲染成html，但這樣既不直覺又很複雜易出錯，所以出現了 語法糖 - JSX 。

onClick()就是一個範例。

整個前端工程運作原理

1. 你用html寫在index.jsx
2. jsx幫你把index轉換成React.creatElement() (這個過程稱作render )
3. react再轉換成DOM

所以JSX就是react的transformer

build time → JSX

run time → Virtual DOM執行、DOM element 渲染

• 先用 新的 Virtual DOM 跟 舊的 Virtual DOM 做比較。
• 找出 差異 (diff)。
• 只更新需要改變的部分到真實 DOM。