慕課網(wǎng)dom深入淺出
- Dom的前提要求是文檔全部加載進(jìn)來(lái)后,所有節(jié)點(diǎn)對(duì)象產(chǎn)生完畢,才操作,這才是正確的dom運(yùn)行模式
//所以有的時(shí)候?yàn)榱吮ｋU(xiǎn)起見(jiàn),會(huì)使用下面代碼
window.onload = function (){}
//這就是要等所有東西加載完畢在運(yùn)行代碼的意思
但是onload是有缺陷,比如說(shuō)一個(gè)網(wǎng)站的請(qǐng)求是很多圖片造成長(zhǎng)時(shí)間的卡頓不就完了?解決辦法是什么?
認(rèn)識(shí)dom
- dom把整個(gè)頁(yè)面模擬成節(jié)點(diǎn),除此之外還提供接口函數(shù)讓JavaScript來(lái)對(duì)html頁(yè)面進(jìn)行操作
//有了dom這個(gè)API,JavaScript就可以對(duì)html頁(yè)面做增刪改查了 - dom產(chǎn)生的原因:
在dom之前有DHTML來(lái)做這樣的工作,因?yàn)闉g覽器廠商之間的競(jìng)爭(zhēng),導(dǎo)致兩種DHTML標(biāo)準(zhǔn)出現(xiàn),因此W3c推出DOM - dom幾個(gè)版本
//DOM1/2/3
DOM探索基礎(chǔ)
//文檔類(lèi)型與節(jié)點(diǎn)類(lèi)型
文檔類(lèi)型發(fā)展歷史
GML SGML HTML XMl
//前兩個(gè)是標(biāo)準(zhǔn)通用語(yǔ)言,W3c在此基礎(chǔ)上發(fā)明了HTML,隨著發(fā)展又衍生出了xml
//html側(cè)重于顯示數(shù)據(jù),以及如何更好低顯示數(shù)據(jù)
//XML側(cè)重于描述數(shù)據(jù),什么是數(shù)據(jù)?如何存儲(chǔ)數(shù)據(jù)(存放格式化數(shù)據(jù))
節(jié)點(diǎn)的類(lèi)型
DOMready
html頁(yè)面元素成為節(jié)點(diǎn)是有一個(gè)過(guò)程的,這個(gè)過(guò)程就是要瀏覽器來(lái)轉(zhuǎn)化
//標(biāo)簽和節(jié)點(diǎn)是兩回事,你要通過(guò)操作DOM來(lái)讓瀏覽器把相應(yīng)的元素包裝成節(jié)點(diǎn)
//瀏覽器中進(jìn)行這樣的工作的就是瀏覽器的渲染引擎
瀏覽器的渲染引擎是如何工作的呢?
1.通過(guò)瀏覽器發(fā)送請(qǐng)求獲取內(nèi)容
2.解析html以構(gòu)建DOM樹(shù)(構(gòu)建DOM節(jié)點(diǎn))
3.構(gòu)建渲染樹(shù)(解釋樣式信息)
4.布局渲染樹(shù)(布局DOM節(jié)點(diǎn))
//就是確定每個(gè)節(jié)點(diǎn)在瀏覽器窗口上的每個(gè)坐標(biāo)
5.繪制渲染樹(shù)(繪制DOm節(jié)點(diǎn))
//就是給每個(gè)節(jié)點(diǎn)具體上色
webkit引擎如何渲染的?
意外收獲
!!el&&el.NodeType ===1
//為什么要這樣寫(xiě)代碼來(lái)判斷是否是元素節(jié)點(diǎn)呢?
//因?yàn)镴avaScript是動(dòng)態(tài)語(yǔ)言,類(lèi)型可以轉(zhuǎn)換,再加上,使用xxx.NodeType這些掛載在對(duì)象屬性上的方法,是可以偽造的
var a = {
NodeType:1
}
//如上所示,這樣是不是把a(bǔ)也當(dāng)做一個(gè)元素啦?
所以基于這些原因,當(dāng)JavaScript 代碼要做判斷的時(shí)候往往要用上&&來(lái)進(jìn)行多層篩選,這樣才能確保達(dá)到我們的目的
