JavaScript駕馭網頁－DOM，javascript駕馭-dom

JavaScript駕馭網頁－DOM，javascript駕馭-dom

一、DOM全稱

文件物件模型（Document Object Model）

二、DOM是什麼

DOM就是一個編程介面，就是一套API。
DOM是針對HTML文檔、XML等文檔的一套API。就類似於JDBC是針對資料庫的一套API一樣。

三、DOM的用途

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

現在基本上所有的瀏覽器都都執行了W3C發布的DOM規範，所以在瀏覽器上就可以用DOM的這些API。

DOM提供對指令碼友善的網頁結構與內容的視圖

DOM把網頁視為節點構成的層次樹

DOM樹

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

網頁是DOM節點的集合

見圖1

節點類型

網頁節點是按類別分類的，主要有元素節點與文本節點構成

見圖2

節點特性

利用節點特效能用於導覽節點樹

以下是常用的節點特性：

nodeValue 儲存於節點的值，只限於文本與屬性節點使用（不含元素）

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

childNodes 包含節點下所有子節點的數組，以出現在HTML代碼中的順序而排列

firstChild 節點下的第一個子節點

lastChild 節點下的最後一個子節點

例子

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

利用DOM改變元素的內容

首先 移除所有子節點

然後 根據新內容建立新的文本節點

最後 把新建立的文本子節點附加到節點下

這裡涉及到三個方法

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

createTextNode()從文本字串建立文本節點

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

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

總結

innerHTML雖並非全球資訊網的標準，但這個特效能訪問元素記憶體儲的所有內容

Document Object Model(文件物件模型)，簡稱DOM，提供訪問和修改網頁資料的標準化機制

DOM視圖頁為關聯節點的層次樹

使用DOM(而非innerHTML)改變網頁內容的方案，需移除元素下所有的子節點，然後建立並附加上包含新內容的新子節點。

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

您可能感興趣的文章:

• jquery對象和javascript對象即DOM對象相互轉換
• JS、CSS以及img對DOMContentLoaded事件的影響
• javascript擷取dom的下一個節點方法
• Javascript基礎知識（三）BOM，DOM總結
• javascript學習筆記（三）BOM和DOM詳解
• 使用js Math.random()函數產生n到m間的隨機數字
• 通過JS動態建立一個html DOM元素並顯示
• js設定document.domain實現跨域的注意點分析
• 簡介AngularJS的HTML DOM支援情況
• javascript中html字串轉化為jquery dom對象的方法
• 在javascript中隨機數 math random如何產生指定範圍數值的隨機數