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