document.body 与 document.documentElement区别介绍

Posted 不积跬步无以至千里不积小流无以成江海

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;

以上是关于document.body 与 document.documentElement区别介绍的主要内容,如果未能解决你的问题,请参考以下文章

document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

document.body.scrollTop与document.documentElement.scrollTop兼容

javascript获取浏览器高度与宽度信息

JS基础篇-- body.scrollTop与documentElement.scrollTop

Js中获取显示器浏览器以及窗口等的宽度与高度的方法