web前端入門到實戰：html DOM簡介

一　　 DOM是什麼

DOM是HTML和XML文檔的編程接口。它不一樣於把html源碼在瀏覽器窗口當作頁面或使用文本編輯器當作純文本展現，它是對文檔的另外一種結構化的表述。DOM把文檔的全部節點都解析爲一個對象，並提供了一些屬性和方法來描述它們。

DOM是W3C的標準。它被分爲3個部分：

核心DOM：針對任何結構化文檔的標準模型
XML DOM：針對XML文檔的標準模型
HTML DOM：針對HTML文檔的標準模型

DOM不是一種編程語言，它是一種標準，一個模型，它與編程語言相對獨立。編程語言均可以按照這種模型實現對文檔的訪問和處理。

注：由於咱們主要是學習WEB編程，因此接下來文章中即將提到的DOM均指HTML DOM，使用到的DOM API也均是JavaScript腳本語言實現。

二 DOM的訪問

咱們知道，各個瀏覽器對JavaScript都有不一樣的實現，因此它們在實現DOM標準時，也會有一些差別，但它們既然都遵循了該標準，因此又呈現出了不一樣程度一致性。因此咱們在使用DOM時，並不須要作任何特別的操做，若是碰到有差別的地方（主要體如今方法名稱和參數上），只需根據不一樣瀏覽器使用他們各自實現的相關方法便可。實際上他們的實現都遵循了統一標準。

DOM把文檔視作樹結構：

整個文檔是一個文檔節點

每一個 HTML 標籤是一個元素節點

包含在 HTML 元素中的文本是文本節點

每個 HTML 屬性是一個屬性節點

註釋屬於註釋節點

經過這個節點樹，JavaScript能夠輕鬆的訪問並操做這些節點。

三 DOM節點類型

每一個節點對象有都有一個nodeType，nodeName和nodeValue屬性，經過這幾個屬性的值，咱們能夠獲取該節點的相關信息：

| 節點類型 | nodeName 返回 | nodeValue 返回 |
| 1 | Element | 元素名 | null |
| 2 | Attr | 屬性名稱 | 屬性值 |
| 3 | Text | #text | 節點的內容 |
| 4 | CDATASection | #cdata-section | 節點的內容 |
| 5 | EntityReference | 實體引用名稱 | null |
| 6 | Entity | 實體名稱 | null |
| 7 | ProcessingInstruction | target | 節點的內容 |
| 8 | Comment | #comment | 註釋文本 |
| 9 | Document | #document | null |
| 10 | DocumentType | 文檔類型名稱 | null |
| 11 | DocumentFragment | #document 片斷 | null |
| 12 | Notation | 符號名稱 | null |

四 　　DOM分級

一級DOM

1級DOM在1998年10月份成爲W3C的提議，由DOM核心與DOM HTML兩個模塊組成。DOM核心能映射以XML爲基礎的文檔結構，容許獲取和操做文檔的任意部分。DOM HTML經過添加HTML專用的對象與函數對DOM核心進行了擴展。

二級DOM

2級DOM在一級DOM的基礎上進行了擴展，它引進了幾個新DOM模塊來處理新的接口類型：

DOM視圖：描述跟蹤一個文檔的各類視圖（使用CSS樣式設計文檔先後）的接口；

DOM事件：描述事件接口；

DOM樣式：描述處理基於CSS樣式的接口；

DOM遍歷與範圍：描述遍歷和操做文檔樹的接口；

專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

三級DOM

3級DOM經過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名爲「DOM載入與保存」的新模塊，DOM核心擴展後可支持XML1.0的全部內容，包括XML Infoset、 XPath、和XML Base。