老生常谈~ documentElement && body の 凄美故事

Posted 2021-01-16 cheesecatmiao

document代表的是整个文档(对于一个网页来说包括整个网页结构)；

document.documentElement是整个文档节点树的根节点，在网页中即html标签；

document.body是整个文档DOM节点树里的body节点，网页中即为body标签元素。

 

scrollTop：

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

var scroll = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

在文档使用了DTD时，document.body.scrollTop的值为0。

此时需要使用document.documentElement.scrollTop来获取滚动条滚过的长度；

在未使用DTD定义文档时，使用document.body.scrollTop获取值。

 

clientHeight：

ie、chrome、firefox

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

opera

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）