95.深入的DOM操作（接92）
4.查看元素的尺寸
（1）dom.offsetWidth，dom.offsetHeight
5.查看元素的位置
（1）dom.offsetLeft和dom.offsetTop
（2）对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。(无论是 left 还是margin-left等都是距离。 )，总结就是找最近的有定位的父级的左上点，和自己没关系
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div{
position:absolute;
height:100px;
width:100px;
left: 100px;
top:100px;
background-color:red;
padding:100px;
border:20px solid pink;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>
//调用div.offsetWidth和div.offsetHeight结果都为340,是整个的宽高，不只是内容部分，而div.getBoundingClientRect()得到的height和width结果一样，但是后者不是实时的所以前者更常用些
//调用div.offsetLeft和div.offsetTop结果都为100，表示距离左边和上边的距离
例2：（不懂盒模型！！！）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
*{
margin:0px;
}
.wrapper{
width:300px;
height:300px;
background-color:mediumspringgreen;
margin-left:100px;
margin-top:100px;
}
.box{
width:200px;
height:200px;
background-color:pink;
margin-left:100px;
margin-top:100px;
}
.demo{
width:100px;
height:100px;
background-color:red;
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="demo"></div>
</div>
</div>
<script type="text/javascript">
var demo = document.getElementsByClassName('demo')[0];
</script>
</body>
</html>
//body自带margin为8px,所以要是没去掉的话，demo.offsetLeft得到的结果就是308px;
更改1：
.box{
position:relative;
width:200px;
height:200px;
background-color:pink;
margin-left:100px;
margin-top:100px;
}
.demo{
position:absolute;
width:100px;
height:100px;
background-color:red;
left:100px;
top:0px;
}
//demo.offsetLeft得到的结果就是100px，dmo.offsetTop得到的结果就是0
更改2：
.demo{
width:100px;
height:100px;
background-color:red;
margin-left:100px;
}
//demo.offsetLeft得到的结果依旧是100px，dmo.offsetTop得到的结果就是0
（3）dom.offsetParent 返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null
例1：接上题
demo.offsetParent：如果最近的有定位的父级存在，那么返回父级元素即<div class="box"> </div>
要是不存在，返回body，body.offsetParent 返回null
（4）求元素相对于文档的坐标 getElementPosition()
96.深入的DOM操作（接92）
6.让滚动条滚动
（1）windw上有三个方法：scroll(),scrollTo(),scrollBy();
（2）三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
（3） 区别：scrollBy()会在之前的数据基础之上做累加。（下面做具体的解释）
前两个scroll和scrollTo用法是一样的scroll(0,200)滚动条就会就会滚动到0,200的位置，再scroll(0,200)的话位置是不变的，但是另一个就和它俩不一样了
scrollBy()是累加的，scrollBy(0,30)就往下移动30px，
应用：用户把滚动条滚动到下面，滚动完之后，记录以下滚动条滚动的位置 再动的时候就可以利用这个scroll()/scrollTo()这个方法使它滚动回来
（4）利用scrollBy() 快速阅读的功能
例：
setInterval(function (){
scrollBy(0,50);
},1000)
//可以利用clearInterval叫停
