bom初步学习

一、查看滚动条得滚动距离：
1、windows.pageXOffset/pageYOffset（IE8及IE8以下不兼容）
2、document.body/documentElement.scrollLeft/scrollTop(兼容性比较混乱)
IE8和IE8以下的浏览器：
（1）document.body.scrollLeft/Top
（2）document.documentElement.scorllLeft/Top
因为（1）（2）的兼容性是互斥的，所以采用（1）+（2）的方法解决问题。
相对应的解决问题的代码：

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

二、查看可视区窗口的尺寸
1、window.innerWidth/window.innerHeight （IE8及IE8以下不兼容）
2、document.documentElement.clientWidth/clientHeight（标准模式下，任何浏览器都兼容）
3、document.body.clientWidth/clientHeight(适用于怪异模式下的浏览器)
4、封装兼容性方法，返回浏览器尺寸getViewportOffset（）
附：怪异模式/混杂模式 和 标准模式 问题
判断：document.compatMode：（1）CSS1Compat；（2）BackCompat。
查看可视区窗口的尺寸：

	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
						}
					}
				}
			}

三、查看元素的几何尺寸
1、domEle.getBoundingClientRect();
2、兼容性很好
3、该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的x和y坐标，right和bottom代表元素右下角的x和y坐标（即四条边距边的距离）
4、height和width属性老版本IE并未实现
5、返回的结果并不是“实时的”
四、查看元素的（视觉上的）尺寸
1、dom.offsetWidth，dom.offsetHeight
五、查看元素的位置
1、dom.offsetLeft，dom.offsetTop
对于无定位父级的元素，返回相对于文档的坐标。对于有定位父级返回相对于最近的有定位的父级的坐标。
2、dom.offsetParent
返回最近的有定位的父级，如无，返回body，body.offsetParent返回null
六、让滚动条滚动
1、window上有三个方法
（1）scroll（）；
（2）scrollTo（）；
（3） scrollBy（）；
三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动轮滚动到当前位置。
区别：前两者没有任何区别，且都不会累加，而scrollBy（）会在之前的数据基础之上做累加。