前言

DOM (Document Object Model) 是一個面向?qū)ο蟮谋硎荆糜?HTML 和 XML 文檔。它允許您通過 JavaScript 腳本訪問和操作文檔的內(nèi)容和結(jié)構(gòu)。通過使用 DOM，您可以動態(tài)地修改網(wǎng)頁上的 HTML 和 CSS，從而創(chuàng)建交互式和動態(tài)的 Web 應(yīng)用。

DOM 簡介

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

與 HTML 交互

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

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

與 CSS 交互

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

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

案例：銀行系統(tǒng)

讓我們創(chuàng)建一個簡單的銀行系統(tǒng)，使用 DOM 操作來實現(xiàn)交互性。

賬戶號碼

密碼

結(jié)論

通過使用 JavaScript的 DOM 操作，我們可以實現(xiàn)與網(wǎng)頁的 HTML 和 CSS 無縫交互。這使我們能夠創(chuàng)建交互式和動態(tài)的 web 應(yīng)用，從而提升用戶體驗和應(yīng)用程序的靈活性。