一、DOM全稱

文檔對(duì)象模型（Document Object Model）

二、DOM是什么

DOM就是一個(gè)編程接口，就是一套API。
DOM是針對(duì)HTML文檔、XML等文檔的一套API。就類似于JDBC是針對(duì)數(shù)據(jù)庫的一套API一樣。

三、DOM的用途

DOM 是用來訪問或操作HTML文檔、XHTML文檔、XML文檔中的節(jié)點(diǎn)元素。

現(xiàn)在基本上所有的瀏覽器都都執(zhí)行了W3C發(fā)布的DOM規(guī)范，所以在瀏覽器上就可以用DOM的這些API。

DOM提供對(duì)腳本友善的網(wǎng)頁結(jié)構(gòu)與內(nèi)容的視圖

DOM把網(wǎng)頁視為節(jié)點(diǎn)構(gòu)成的層次樹

DOM樹

每棵DOM樹的最頂端節(jié)點(diǎn)都是Document，它在HTML節(jié)點(diǎn)的上層

網(wǎng)頁是DOM節(jié)點(diǎn)的集合

見圖1

節(jié)點(diǎn)類型

網(wǎng)頁節(jié)點(diǎn)是按類別分類的，主要有元素節(jié)點(diǎn)與文本節(jié)點(diǎn)構(gòu)成

見圖2

節(jié)點(diǎn)特性

利用節(jié)點(diǎn)特性能用于導(dǎo)覽節(jié)點(diǎn)樹

以下是常用的節(jié)點(diǎn)特性：

nodeValue 存儲(chǔ)于節(jié)點(diǎn)的值，只限于文本與屬性節(jié)點(diǎn)使用（不含元素）

nodeType 節(jié)點(diǎn)類型，例如它是DOCUMENT或TEXT等等，但以代號(hào)表示

childNodes 包含節(jié)點(diǎn)下所有子節(jié)點(diǎn)的數(shù)組，以出現(xiàn)在HTML代碼中的順序而排列

firstChild 節(jié)點(diǎn)下的第一個(gè)子節(jié)點(diǎn)

lastChild 節(jié)點(diǎn)下的最后一個(gè)子節(jié)點(diǎn)

例子

document.getElementById(“id”).nodeValue;//獲取某節(jié)點(diǎn)下的純文本 
document.getElementsByTagName(“body”)[0].childNodes[1].lastChild;//body下的第二個(gè)子節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)

利用DOM改變?cè)氐膬?nèi)容

首先 移除所有子節(jié)點(diǎn)

然后 根據(jù)新內(nèi)容創(chuàng)建新的文本節(jié)點(diǎn)

最后 把新創(chuàng)建的文本子節(jié)點(diǎn)附加到節(jié)點(diǎn)下

這里涉及到三個(gè)方法

removeChidl()移除目標(biāo)節(jié)點(diǎn)下的一個(gè)子節(jié)點(diǎn)，傳入將被移除的子節(jié)點(diǎn)

createTextNode()從文本字符串創(chuàng)建文本節(jié)點(diǎn)

appendChildO()以最后一個(gè)子節(jié)點(diǎn)的開工加入新節(jié)點(diǎn)，傳入將被新增加的子節(jié)點(diǎn)

var node=document.getElementById(“id”);//獲取元素 
while (node.firstChild)//刪除元素下的所有子節(jié)點(diǎn)（這里判斷子節(jié)點(diǎn)是否存在，存在為true） 
node.removeChild(node.firstChild) 
node.appendChild(document.createTextNode(“message”))//為元素添加新內(nèi)容

總結(jié)

innerHTML雖并非萬維網(wǎng)的標(biāo)準(zhǔn)，但這個(gè)特性能訪問元素內(nèi)存儲(chǔ)的所有內(nèi)容

Document Object Model(文檔對(duì)象模型)，簡(jiǎn)稱DOM，提供訪問和修改網(wǎng)頁數(shù)據(jù)的標(biāo)準(zhǔn)化機(jī)制

DOM視圖頁為關(guān)聯(lián)節(jié)點(diǎn)的層次樹

使用DOM(而非innerHTML)改變網(wǎng)頁內(nèi)容的方案，需移除元素下所有的子節(jié)點(diǎn)，然后創(chuàng)建并附加上包含新內(nèi)容的新子節(jié)點(diǎn)。

關(guān)于JavaScript駕馭網(wǎng)頁－DOM就給大家介紹到這里，下篇將給大家介紹JavaScript駕馭網(wǎng)頁-CSS與DOM,感興趣的朋友點(diǎn)擊查看詳情！

最新評(píng)論