什么是DOM
文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它給文檔（結(jié)構(gòu)樹(shù)）提供了一個(gè)結(jié)構(gòu)化的表述并且定義了一種方式—程序可以對(duì)結(jié)構(gòu)樹(shù)進(jìn)行訪(fǎng)問(wèn)，以改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。 DOM 提供了一種表述形式— 將文檔作為一個(gè)結(jié)構(gòu)化的節(jié)點(diǎn)組以及包含屬性和方法的對(duì)象。從本質(zhì)上說(shuō)，它將 web 頁(yè)面和腳本或編程語(yǔ)言連接起來(lái)了。
- 理解DOM結(jié)構(gòu)
DOM: Document Object Module, 文檔對(duì)象模型。我們通過(guò)JavaScript操作頁(yè)面的元素，進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性, 都是DOM提供的。DOM把一份文檔表示為一棵樹(shù)，是由節(jié)點(diǎn)（node）構(gòu)成的一棵節(jié)點(diǎn)樹(shù)。
-
DOM節(jié)點(diǎn)
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 元素是元素節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)
-
節(jié)點(diǎn)信息：nodeName(tagName)、nodeValue、nodeType.
- nodeName
- 元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱(chēng)
- 屬性節(jié)點(diǎn)的nodeName是屬性名稱(chēng)
- 文本節(jié)點(diǎn)的nodeName是#text
- 文檔節(jié)點(diǎn)的nodeName是#document
- nodeValue
- 文本節(jié)點(diǎn)的nodeValue包含文本
- 屬性節(jié)點(diǎn)的nodeValue包含屬性值
- 元素節(jié)點(diǎn)和文檔節(jié)點(diǎn)沒(méi)有nodeValue
- nodeType
- nodeName
| 元素類(lèi)型 | 節(jié)點(diǎn)類(lèi)型 |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
- HTML DOM 節(jié)點(diǎn)樹(shù)
HTML文本會(huì)被解析為DOM樹(shù), 樹(shù)中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 進(jìn)行訪(fǎng)問(wèn)。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。
DOM操作
- 增
| 方法 | 功能 |
|---|---|
| .createElement() | 創(chuàng)建元素 |
| .createTextNode() | 創(chuàng)建文本 |
| .createComment() | 創(chuàng)建注釋節(jié)點(diǎn) |
| .createDocumentFragment() | 創(chuàng)建一個(gè)新的空的文檔片段 |
| .insertBefore() | 在當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)之前再插入一個(gè)子節(jié)點(diǎn) |
- 刪
| 方法 | 功能 |
|---|---|
| .removeChild() | 剪切, 返回刪除的節(jié)點(diǎn) |
| .remove() | 刪除的節(jié)點(diǎn) |
- 改
| 方法 | 功能 |
|---|---|
| .innerHTML | 改變 HTML 內(nèi)容 |
| .replaceChild() | 替換子節(jié)點(diǎn)(new//新的, origin//老的) |
| . setAttribute() | 設(shè)置屬性 |
- 查
| 方法 | 功能 |
|---|---|
| .getElementById() | 返回指定 id 屬性值的節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象 |
| .getElementsByTagName() | 返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象對(duì)應(yīng)著這個(gè)標(biāo)簽的一個(gè)元素 |
| .getElementsByClassName() | 返回一個(gè)具有相同類(lèi)名的元素的數(shù)組 |
| .getAttribute() | 查詢(xún)屬性節(jié)點(diǎn) |
| .childNodes | 獲取任何一個(gè)元素的所有子元素 |
