鬆軟科技課堂:JS HTML DOM

經過 HTML DOM，JavaScript 可以訪問和改變 HTML 文檔的全部元素。

HTML DOM（文檔對象模型）

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被結構化爲對象樹：

對象的 HTML DOM 樹

經過這個對象模型，JavaScript 得到建立動態 HTML 的全部力量：

• JavaScript 能改變頁面中的全部 HTML 元素
• JavaScript 能改變頁面中的全部 HTML 屬性
• JavaScript 能改變頁面中的全部 CSS 樣式
• JavaScript 能刪除已有的 HTML 元素和屬性
• JavaScript 能添加新的 HTML 元素和屬性
• JavaScript 能對頁面中全部已有的 HTML 事件做出反應
• JavaScript 能在頁面中建立新的 HTML 事件

什麼是 DOM？

DOM 是一項 W3C (World Wide Web Consortium) 標準。

DOM 定義了訪問文檔的標準：

「W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。」

W3C DOM 標準被分爲 3 個不一樣的部分：

• Core DOM - 全部文檔類型的標準模型
• XML DOM - XML 文檔的標準模型
• HTML DOM - HTML 文檔的標準模型

什麼是 HTML DOM？

HTML DOM 是 HTML 的標準對象模型和編程接口。它定義了：

• 做爲對象的 HTML 元素
• 全部 HTML 元素的屬性
• 訪問全部 HTML 元素的方法
• 全部 HTML 元素的事件