※ 認識DOM(二)

閱讀時間約 1 分鐘

※ 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的關係

raw-image

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

重點整理:

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

※ 順序很重要:先載入 HTML,再載入 JavaScript

raw-image

說明:

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



    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 認識非同步概念(一)
    閱讀時間約 3 分鐘
    ※ 認識非同步概念(二)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(三)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(四)
    閱讀時間約 6 分鐘
    ※ 認識非同步概念(五)
    閱讀時間約 1 分鐘
    ※ 認識DOM(一)
    閱讀時間約 2 分鐘