document.body 與 document.documentElement區別介紹

時間 2019-12-13

標籤 document.body document body document.documentelement documentelement 區別介紹简体版

原文原文鏈接

什麼是document.body？html

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

什麼是 document.documentElement？chrome

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

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

獲取 scrollTop 方面的差別spa

在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

在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)code

頁面存在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

兼容解決方案：htm

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

參考資料：blog

DTDci

document.bodyelement

document.documentElement

相關標籤/搜索

document.body

document.documentelement