※ 認識DOM(二)

※ Javascript和HTML的關係

當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：

• 解析 HTML / CSS 檔案，建立物件模型：

1. HTML → DOM (Document Object Model)。
2. CSS → CSSOM (CSS Object Model)。

• 將 DOM 和 CSSOM 合併為 Render Tree，準備開始運算。
• 計算每個元素的畫面位置，產生 Layout。
• 繪製畫面細節 (Paint)。

結論：JavaScript 為 HTML 提供動態功能和互動效果。透過操作 DOM，JavaScript 可以來讀取、添加、修改或刪除 HTML 元素和屬性。JavaScript 使得 HTML 頁面不僅僅是靜態的訊息展示，而是變成了一個動態、可回應用戶操作的動態頁面。

※ Javascript和DOM API的關係

DOM 和 CSSOM 就是瀏覽器開放給 JavaScript 的 API，目的是為了要讓 JavaScript 去操作網頁元素。

重點整理：

• HTML 被瀏覽器解析之後，變成一叫做 DOM 的結構。
• JavaScript 可以修改 DOM 結構中任意節點。
• 我們實際在視窗裡看到的結果，是 JavaScript 操作以後的結果。

※ 順序很重要：先載入 HTML，再載入 JavaScript

說明：

• JavaScript 檔案執行中可能會阻塞網頁的渲染。將 <script> 放在底部，可以讓網頁的主要內容先渲染出來，加快渲染速度。
• 為了避免操作未就緒的 DOM 元素造成錯誤，因此放在底部可以保證腳本運行時 DOM 已完全建立。
• 最後再去讀取 JavaScript 來修改 DOM。