今天研究document的一些属性和方法的使用，结合其他前人的文章，来了解document对象。
得到各个属性如下：
网页可见区域宽： document .body.clientWidth;
网页可见区域高： document .body.clientHeight;
网页可见区域宽： document .body.offsetWidth (包括边线的宽);
网页可见区域高： document .body.offsetHeight (包括边线的宽);
网页正文全文宽： document .body.scrollWidth;
网页正文全文高： document .body.scrollHeight;
网页被卷去的高： document .body.scrollTop;
网页被卷去的左： document .body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
scrollHeight：获取对象的滚动高度。
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth：获取对象的滚动宽度
offsetHeight：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop：获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX：相对文档的水平座标
event.clientY：相对文档的垂直座标
event.offsetX：相对容器的水平坐标
event.offsetY：相对容器的垂直坐标
document .documentElement.scrollTop：垂直方向滚动的值
event.clientX+document .documentElement.scrollTop：相对文档的水平座标+垂直方向滚动的量
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别，在IE8\9\10\11、chrome、FF测试了下：
当没有<!DOCTYPE html>标签时，
- 在IE10以下的版本，document.body.clientHeight < document.documentElement.clientHeight，在IE10以上包括IE10的版本，document.body.clientHeight = document.documentElement.clientHeight，但都没有出现document.body.clientHeight = 0的情况；
- 在FF下，document.body.clientHeight > document.documentElement.clientHeight，但也没有出现document.body.clientHeight = 0的情况；
- 在chrome下，document.body.clientHeight = document.documentElement.clientHeight，但也没有出现document.body.clientHeight = 0的情况；
- 三种浏览器document.body.clientHeight和document.documentElement.clientHeight高度值不一样的；
- 三种浏览器下document.body.scrollTop和document.documentElement.scrollTop的值为0（未测有滚动条的情况）。
在有<!DOCTYPE html>标签时，
- 在IE所有的的版本，document.body.clientHeight < document.documentElement.clientHeight，但都没有出现document.body.clientHeight = 0的情况；
- 在FF下，document.body.clientHeight < document.documentElement.clientHeight，但也没有出现document.body.clientHeight = 0的情况；
- 在chrome下，document.body.clientHeight < document.documentElement.clientHeight，但也没有出现document.body.clientHeight = 0的情况；
- chrome下，document.body.clientHeight = document.documentElement.clientHeight，但也没有出现document.body.clientHeight = 0的情况；
- 三种浏览器下document.body.scrollTop和document.documentElement.scrollTop的值为0（未测有滚动条的情况）。
测试html：需要说明的是FF下span标签的innerText不会在页面显示，但开发者工具调试发现，其实是有值的。
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><title> New Document </title>
<span style="white-space:pre"> </span><script type="text/javascript">
<span style="white-space:pre"> </span>function a() {
<span style="white-space:pre"> </span>document.getElementById("bodyHeight").innerHTML = document.body.clientHeight;
<span style="white-space:pre"> </span>document.getElementById("documentHeight").innerHTML = document.documentElement.clientHeight;
<span style="white-space:pre"> </span>document.getElementById("bodyTop").innerHTML = document.body.scrollTop;
<span style="white-space:pre"> </span>document.getElementById("documentTop").innerHTML = document.documentElement.scrollTop;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span></script>
<span style="white-space:pre"> </span></head>
<span style="white-space:pre"> </span><body>
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><a href="javascript:a()" target="_blank" rel="external nofollow" >click here</a>
<span style="white-space:pre"> </span><br/>
<span style="white-space:pre"> </span>document.body.clientHeight = <span id="bodyHeight"></span> px
<span style="white-space:pre"> </span><br/>
<span style="white-space:pre"> </span>document.documentElement.clientHeight = <span id="documentHeight"></span> px
<span style="white-space:pre"> </span><br/>
<span style="white-space:pre"> </span>document.body.scrollTop = <span id="bodyTop"></span> px
<span style="white-space:pre"> </span><br/>
<span style="white-space:pre"> </span>document.documentElement.scrollTop = <span id="documentTop"></span> px
<span style="white-space:pre"> </span></p>
<span style="white-space:pre"> </span></body>
</html></span>
总结：页面记得加上<!DOCTYPE html>标签。以免出现很难发现的bug。
上传一张其他网站上的一张标记图片：
![Spring MVC 自学杂记（五） -- SpringMVC与前台的json数据交互[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)