# 2.1.4 DOM ### 2.1.4 DOM DOM即**文檔對象模型（Document Object Model）**。它是瀏覽器對HTML文本進行解析后得到的一個抽象數據結構。以上面的HTML文檔為例，它對應的DOM樹是：  其中： - 根節點document代表整個HTML文檔。 - 文檔類型聲明對應著一個節點（類型為DocumentType）。 - 每個HTML標簽，如html、head、meta等，都對應著一個節點——這類節點稱為**元素（Element）**[1](#fn_1)。 - 標簽的每個屬性都對應著它的一個子節點。例如，meta標簽的charset屬性對應著meta元素的一個子節點。這類節點稱為屬性（Attribute）節點。 - 標簽包含的文字對應著它的一個子節點。例如，p標簽包含的文字“你好，HTML！”對應著p元素的一個子節點。這類節點稱為文字（Text）節點。 - 標簽直接包含的每個標簽都對應著它的一個子節點。例如，html標簽包含的head標簽和body標簽，分別對應著html元素的兩個子節點head和body。 DOM很重要。我們將會在后面的[JavaScript](dom1.html)一節中看到，通過JavaScript這樣的瀏覽器腳本可以訪問并修改HTML文檔對應的DOM樹[2](#fn_2)——向其中動態地添加、刪除節點，或者修改節點的屬性——瀏覽器所呈現的網頁就會隨之變化。這就是瀏覽器動態UI編程的基本原理。 > 1. HTML元素與其對應的標簽既有聯系又有區別：[https://en.wikipedia.org/wiki/HTML\_element#Elements\_vs.\_tags](https://en.wikipedia.org/wiki/HTML_element#Elements_vs._tags)[?](#reffn_1 "Jump back to footnote [1] in the text.") > 2. 參考這里了解相關的JavaScript API：[http://www.w3schools.com/js/js\_htmldom\_navigation.asp](http://www.w3schools.com/js/js_htmldom_navigation.asp)[?](#reffn_2 "Jump back to footnote [2] in the text.")