DOM基本操作

查看滚动条的滚动距离

window.pageXOffset/pageYOffset

IE9以下：

document.body.scrollLeft/scrollTop
document.documentElement.scorllLeft/TOP
在低版本浏览器使用的时候可以把啷个加起来使用。、

封装一个可以查看滚动距离的方法：

function getScrollOffset() {
            if(window.pageXOffset){
                return {
                    x : window.pageXOffset,
                    y : window.pageYOffset
                }
            }else {
                return {
                    x : document.body.scrollLeft + document.documentElement.scrollLeft,
                    y : document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }

查看可视窗口的大小

window.innerHeight
window.innerWidth

IE9以下：

document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容

怪异模式下，任意浏览器都兼容

document.body.clientWidth/clientHeight

document.compatMode 判断是否为标准模式

封装一个获得可是窗口距离的方法：

function getViewportOffset() {
        if(window.innerWidth) {
            return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{
            if(document.compatMode == 'BackCompat'){
                return {
                    w : document.body.clientWidth,
                    h : document.body.clientHeight
                }
            }else{
                return {
                    w : document.documentElement.clientWidth,
                    h : document.documentElement.clientHeight
                }
            }
        }
    }

查看元素的几何尺寸

domEle.getBoundingClientRect();

该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标

返回的结果并不是 ‘实时的’

查看元素尺寸

dom.offsetWidth
dom.offsetHeight

查看元素的位置

 dom.offsetLeft
 dom.offsetTop
 //和有定位的父级的距离
 //对于无定位的父级，返回相对文档的坐标。对于有定位的元素返回相对于最近的有定位的父级的坐标。（横向的margin是可以相加的纵向的会出问题）

让滚动条滚动

	scroll(),scrollTo() 
	scroolBy() 累加式的滚动。
	三个方法功能类似，用法都是将x，y坐标转入.即实现让滚轮滚动奥当前位置

写一个自动翻滚阅读方法

<script>
			var oDiv1 = document.getElementsByTagName('div')[0];
			var oDiv2 = document.getElementsByTagName('div')[1];
			var timer = null;
			var key = true; // 加锁式编程思维
				oDiv1.onclick = function() {
					if(key){
						timer = setInterval(function() {
							window.scrollBy(0,10);
						},100);
						key = false;
					}
				}
			oDiv2.onclick = function() {
				clearInterval(timer);
				key = true;
			}
</script>