JavaScript HTML DOM

通過 HTML DOM,JavaScript 能夠訪問和改變 HTML 文檔的所有元素。

HTML DOM(文檔對象模型)

當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。

HTML DOM 模型被結構化為對象樹

對象的 HTML DOM 樹

DOM HTML 樹

通過這個對象模型,JavaScript 獲得創建動態 HTML 的所有力量:

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

您將學到什么

在本教程下面的章節中,您將學到:

  • 如何改變 HTML 元素的內容
  • 如何改變 HTML 元素的樣式(CSS)
  • 如何對 HTML DOM 事件作出反應
  • 如何添加和刪除 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 元素的事件

換言之:HTML DOM 是關于如何獲取、更改、添加或刪除 HTML 元素的標準