BOM的更多的用于特效方面的展示，接下来的学习就是将许多以前用到的知识与现在的结合后做出各种不同的动态效果来。
所以在这部分学习中涉及到的新知识会比较零散，甚至会将以前的知识部分衔接起来。
1. offsetParent
获取当前元素最近的设置了定位的父元素，如果没有父元素定位则选择的是body元素。
这样就可以容易理解offsetLeft的意义了，它是相对于offsetParent的距离。
2. offsetHeight
获取盒子的大小（border + height + padding）：只获取盒子的大小加盒子边框加盒子内边距，不考虑超出盒子部分的内容大小。
scrollHeight
获取滚动内容的高度，内容的height + padding，获取的是内容的大小加内边距，不考虑盒子大小。
3. scrollTop
获取内容滚动出盒子的距离。
或获取页面滚动出去的距离：
在页面滚动时，页面滚动出去的部分距离可以使用scrollLeft来获取，但是这个属性在不同的浏览器定义的对象不一样，在谷歌和火狐中整个页面为document.body元素，而在ie8以及以前浏览器整个页面为html，我们需要使用document.documentElement来获取。
因此我们可以使用短路判断来方便我们获取不同浏览器中的距离，如：
document.body.scrollLeft || document.documentElement.scrollLeft
document.body.scrollTop || document.documentElement.scrollTop
注意：还有一种方法可以获取距离window.pageYOffset，这是DOM中标准的属性，但是IE8及其老版本不支持，所以我们还是常用上面的短路判断来获取。
4. 小数问题：
在设置或者改变元素大小或位置的属性值时，如果设置或者改变值存在小数时，浏览器无法精确的识别这个值，原因就是浏览器中最小的分辨率为1px，如果你设置的小数部分值太小浏览器就会自动四舍五入来取值，这样就会出现我们设置或者改变元素的大小或位置不准确了。
5. 获取任意需要的元素样式
如果我们想要获得元素的某个属性值时，可以使用offset系列来获取，但是如果我们需要获得多个属性值，且无法确定需要获得的属性是哪些时再用offset的话就会比较麻烦，不能做到随心所欲的获取。我们也不能使用style["属性名"]的方法获取，因为这个方法无法获取除行内式中设置的属性，比较局限。
我们就需要使用别的方式来获取，而谷歌和火狐就有window.getComputedStyle（element，null）方法，可以获得页面中指定元素的所有属性及属性值，这个方法获得的属性值为一个带有单位的字符串，我们可以将获得的属性值通过parseInt（）或者parseFloat（）转换为数字类型的值，方便我们做数学运算来改变指定的属性值。
当然说到谷歌和火狐支持的方法就会想到IE是否也支持，回答一定是“不一定”，因为ie8及以前的老版本浏览器不支持该方式，它支持的是element。currentStyle[“属性名”]这个方法。因此就又要做兼容性的处理，使总能获取不同浏览器中元素的属性及属性值。具体的兼容代码如下：
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}