DOM-元素节点几何量和滚动几何量

一、元素节点几何量和滚动几何量
1、offsetParent
2、offsetLeft 元素到父级（或者整个页面）左边的距离，不包括自己和父级的border值，offsetTop类似
3、offsetTop

//元素到整个页面顶部的距离
function posTop(obj) {
    var result = 0;
    while(obj){
        result += obj.offsetTop;
        obj = obj.offsetParent
    }
    return result;
}

4、getBoundingClientRect()获取元素相对于视区的Top、Right、Bottom、Left
左、右边都是从元素的外边沿开始量到视区的左边沿，而上、下边沿都是从元素的外边沿开始量到视区的上边沿。（其实也就是，不包括自己top、left的border，但包括bottom、right的border）

//兼容处理
function GetRect(obj){
    var rect = obj.getBoundingClientRect();
    var top = document.documentElement.clientTop;  //非ie为0；ie为2
    var left = document.documentElement.clientLeft;  //非ie为0；ie为2
    return {
        top : rect.top - top,
        bottom : rect.bottom - top,
        left : rect.left - left,
        right : rect.right - left
    }
}

5、获取元素在视区中的尺寸。（border + padding + width）
    getBoundingClientRect()也提供了height，和width 。（忽略掉吧，直接用下面的）
    offfsetWidth ：border + padding + width
    offsetHeight ：border + padding + height

6、获取元素在视区中的尺寸。（border + padding）
   clientWidth ： padding + width
   clientHeight ： padding + height

7、scrollHeight和scrollWidth;获取滚动元素的尺寸。
如果一个div是100*100，它里面的p是1000*1000；那么div的scrollHeiht、scrollWidth是1000。
tips ：如果需要知道滚动区域内部某个节点的高度与宽度，而该节点比滚动区域的视区要小，那就不要用scrollHeight和scrollWidth，因为他们将返回视区的尺寸。
如果被滚动节点（父）比滚动区域（子）要小，使用clientHeight和clientWidth来判断包含在滚动区域内的节点（子）尺寸

8、scrollTop和scrollLeft获取并设置从上，左边滚动的距离。
//读
function getScrollY(){ //google支持的是前面的，其他浏览器走后面的
    return document.body.scrollTop || document.documentElement.scrollTop;
}

//写
function setScrollY(num) {
    document.documentElement.scrollTop = document.body.scrollTop = num;
}

9、scrollIntoView()滚动元素到视区
scrollIntoView()方法告诉选取的节点滚到到可视区，默认参数是true，表示滚动到滚动元素的顶部，false，表示到该元素的底部。

10、页面可视区的宽高
//所有浏览器都支持，但是不包含浏览器滚动条的宽，高；ie的低版本左右有2px的border
document.documentElement.clientWidth
document.documentElement.clientHeight

//BOM下的属性（ie6-8不支持），包含浏览器滚动条的宽，高
window.innerWidth
window.innerHeight