今天研究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=)