JavaScript駕馭網(wǎng)頁-DOM
一、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,感興趣的朋友點擊查看詳情!
- jquery對象和javascript對象即DOM對象相互轉換
- JS、CSS以及img對DOMContentLoaded事件的影響
- javascript獲取dom的下一個節(jié)點方法
- Javascript基礎知識(三)BOM,DOM總結
- javascript學習筆記(三)BOM和DOM詳解
- 使用js Math.random()函數(shù)生成n到m間的隨機數(shù)字
- 通過JS動態(tài)創(chuàng)建一個html DOM元素并顯示
- js設置document.domain實現(xiàn)跨域的注意點分析
- 簡介AngularJS的HTML DOM支持情況
- javascript中html字符串轉化為jquery dom對象的方法
- 在javascript中隨機數(shù) math random如何生成指定范圍數(shù)值的隨機數(shù)
相關文章
javascript 瀏覽器判斷 綁定事件 arguments 轉換數(shù)組 數(shù)組遍歷
javascript 瀏覽器 判斷 綁定事件 arguments 轉換數(shù)組 數(shù)組遍歷等函數(shù)2009-07-07js使用for循環(huán)查詢數(shù)組中是否存在某個值
IE8不支持indexOf,因此寫一個for循環(huán)來判斷是否存在,下面是代碼,經(jīng)測試還不錯2014-08-08微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化
由于微信支持的字體非常有限,不能滿足個性化的需求,因此在開發(fā)的過程中可能會需要使用自定義字體,下面這篇文章主要給大家介紹了關于微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化的相關資料,需要的朋友可以參考下2022-02-02js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法
本篇文章主要介紹了js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法,非常具有實用價值,需要的朋友可以參考下2017-08-08js下利用userData實現(xiàn)客戶端保存表單數(shù)據(jù)
對于多數(shù)網(wǎng)頁制作的朋友,實現(xiàn)在客戶端保存在網(wǎng)頁表單上的信息,比較多的是采用Cookie技術來實現(xiàn),這些功能例如:下拉列表框選擇的選項,文本框輸入的數(shù)據(jù)等。2010-06-06