一、DOM全稱

文檔對象模型（Document Object Model）

二、DOM是什么

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

三、DOM的用途

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

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

DOM提供對腳本友善的網(wǎng)頁結構與內(nèi)容的視圖

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

DOM樹

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

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

見圖1

節(jié)點類型

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

見圖2

節(jié)點特性

利用節(jié)點特性能用于導覽節(jié)點樹

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

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

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

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

firstChild 節(jié)點下的第一個子節(jié)點

lastChild 節(jié)點下的最后一個子節(jié)點

例子

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

利用DOM改變元素的內(nèi)容

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

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

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

這里涉及到三個方法

removeChidl()移除目標節(jié)點下的一個子節(jié)點，傳入將被移除的子節(jié)點

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

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

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

總結

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

Document Object Model(文檔對象模型)，簡稱DOM，提供訪問和修改網(wǎng)頁數(shù)據(jù)的標準化機制

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

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

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

最新評論