前言

DOM (Document Object Model) 是一個面向對象的表示，用于 HTML 和 XML 文檔。它允許您通過 JavaScript 腳本訪問和操作文檔的內容和結構。通過使用 DOM，您可以動態地修改網頁上的 HTML 和 CSS，從而創建交互式和動態的 Web 應用。

DOM 簡介

• 節點： 文檔中的每個元素都是一個節點。有不同類型的節點，例如元素節點、文本節點和注釋節點。
• 屬性： 節點可以具有屬性，例如 id、class、name 等。
• 方法： 節點具有可以調用的方法，例如 getElementById()、createElement()、appendChild() 等。

與 HTML 交互

您可以使用 DOM 操作 HTML 元素。您可以：

• 獲取元素：使用 document.getElementById() 或 document.querySelector()
• 創建元素：使用 document.createElement()
• 修改元素：使用 innerHTML、innerText 等屬性
• 添加/刪除元素：使用 appendChild()、removeChild() 方法

與 CSS 交互

您還可以使用 DOM 操作 CSS 樣式。您可以：

• 獲取樣式：使用 getComputedStyle() 方法
• 修改樣式：使用 style 屬性
• 添加/刪除類：使用 classList 屬性

案例：銀行系統

讓我們創建一個簡單的銀行系統，使用 DOM 操作來實現交互性。

賬戶號碼

密碼

結論

通過使用 JavaScript的 DOM 操作，我們可以實現與網頁的 HTML 和 CSS 無縫交互。這使我們能夠創建交互式和動態的 web 應用，從而提升用戶體驗和應用程序的靈活性。