document.body 與 document.documentElement區別介紹


什么是document.body?

返回html dom中的body節點 即<body>

 

 

什么是 document.documentElement?

返回html dom中的root 節點 即<html>

 

 

document.documentElement 與 document.body的應用場景

獲取 scrollTop 方面的差異

在chrome(版本 52.0.2743.116 m)下獲取scrollTop只能通過document.body.scrollTop,而且DTD是否存在,不會影響 document.body.scrollTop的獲取。

通過console查看結果:

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

 

 

firefox(47.0)及 IE(11.3)下獲取scrollTop,DTD是否存,會影響document.body.scrollTop 與 document.documentElement.scrollTop的取值

 

在firefox(47.0)

頁面存在DTD,使用document.documentElement.scrollTop獲取滾動條距離;
頁面不存在,使用document.body.scrollTop 獲取滾動條距離 demo
1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16

 

 

 

IE(11.3)

頁面存在DTD,使用document.documentEelement.scrollTop獲取滾動條距離

頁面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以獲取到滾動條距離

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

 

 

兼容解決方案:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

 

 參考資料:

 DTD

document.body

document.documentElement

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM