# 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.")
- 前言
- 1 Web概述
- 1.1 什么是Web
- 1.2 超文本和超鏈接
- 1.3 URL
- 1.4 DNS
- 1.5 HTTP
- 1.5.1 客戶端請求
- 1.5.2 服務器應答
- 1.5.3 進一步了解HTTP
- 1.6 HTTPS
- 2 Web瀏覽器
- 2.1 HTML
- 2.1.1 文檔類型聲明
- 2.1.2 標簽和屬性
- 2.1.3 文檔結構
- 2.1.4 DOM
- 2.1.5 進一步了解HTML
- 2.2 CSS
- 2.2.1 樣式與樣式表
- 2.2.2 樣式表語法
- 2.2.3 級聯樣式表
- 2.2.4 進一步了解CSS
- 2.3 JavaScript
- 2.3.1 script標簽
- 2.3.2 操縱DOM
- 2.3.3 jQuery
- 2.3.4 進一步了解JavaScript
- 2.4 Ajax
- 2.5 移動設備與響應式Web設計
- 3 Web服務器
- 3.1 方法與資源
- 3.2 狀態代碼
- 3.3 靜態內容與動態內容
- 3.4 編程語言與技術
- 3.4.1 CGI
- 3.4.2 PHP
- 3.4.3 Java
- 3.4.4 Python
- 3.4.5 Ruby
- 3.4.6 Node.js
- 3.5 RESTful Web API
- 3.6 服務器架構
- 3.7 Web緩存
- 3.8 服務器推送
- 4 數據庫
- 4.1 關系型數據庫
- 4.2 NoSQL數據庫
- 5 Web服務器的其他組件
- 5.1 Cron
- 5.2 消息隊列
- 5.3 郵件服務器
- 6 開發工具與技術
- 6.1 Git
- 6.1.1 Git基礎操作
- 6.1.2 Git基本原理
- 6.1.3 進一步了解Git
- 6.2 敏捷開發