前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
getBoundingClientRect()
判断一个元素的尺寸和位置是简单的方法就是使用 obj.getBoundingClientRect()；
obj.getBoundingClientRect() 方法返回一个对象，该对象提供当前元素节点的大小、它相对于视口(viewport)的位置等信息；
但是，各个浏览器返回的对象包含的属性不相同：
- firefox ： top left right bottom width height x y(其中，x=left，y=top)
- chrome/safari/IE9及以上 ： top left right bottom width height
- IE8及以下 ： top left right bottom
该方法返回的宽高是偏移宽高 offsetWidth、offsetHeight ；
Element.getBoundingClientRect().height = border + padding + height ;
Element.getBoundingClientRect().width = border + padding + width ;
top: 元素顶部相对于视口的纵坐标；
left: 元素左边界相对于视口的横坐标；
right: 元素右边界相对于视口的横坐标； right = left + width ；
bottom: 元素底部相对于视口的纵坐标； bottom = top + height ；
<style type="text/css">
*{padding: 0;margin: 0;}
#test{
width: 100px;
height: 100px;
padding: 10px;
line-height: 200px;
border:1px solid black;
overflow:scroll;
}
</style> <div id="test">内容</div> <script>
var oTest = document.getElementById('test');
//chrome/safari: 220(10+200+10)
//firefox/IE: 210(10+200)
console.log(oTest.scrollHeight);//220
//103(100+10+10-17)
console.log(oTest.clientHeight);//103
//122(100+10+10+1+1) //该方法返回的宽高是偏移宽高 offsetWidth、offsetHeight ；
console.log(oTest.offsetHeight);//122
//122(100+10+10+1+1)
console.log(oTest.getBoundingClientRect().height);//122
</script>
getClientRects()
getClientRects() 方法与 getBoundingClientRect() 不同，该方法是一个返回元素的数个矩形区域的类数组对象。每个类数组对象的参数与 getBoundingClientRect() 方法相同，每个类数组对象都有bottom、height、left、right、top和width六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度；
如果应用于块级元素，则 getClientRects()[0].attr 和 getBoundingClientRect().attr 的属性返回相同的值；
<style type="text/css">
*{padding: 0;margin: 0;}
#test{
width: 100px;
height: 100px;
padding: 10px;
line-height: 200px;
border:1px solid black;
overflow:scroll;
}
</style> <div id="test">内容</div> <script type="text/javascript">
var oTest = document.getElementById('test');
console.log(oTest.getClientRects()[0].height);//122
console.log(oTest.getBoundingClientRect().height);//122
</script>
实际上，该方法主要用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员。这个方法主要用于判断行内元素是否换行；
<div class="wrapper">
<span id="test" style="margin: 0;padding: 0;">
hello world
hello world
hello world
</span>
</div>
<script type="text/javascript">
var oTest = document.getElementById('test');
console.log(oTest.getClientRects().length);//3
</script>
getBoundingClientRect(x,y)
有时我们想判定在视口中的指定位置上有什么元素。这可以用 document.elementFromPoint(x,y) 方法来判定。传递 X 和 Y 坐标(相对于视口)，该方法选择在指定坐标的最上层和最里层的 Element 对象。如果指定的点在视口以外，elementFromPoint() 返回 null；
最上层是指 z-index 最大的元素；最里层是指最里层的子元素；
这个方法可以用来检测元素是否发生重叠或是碰撞；
<style type="text/css">
*{padding: 0;margin: 0;}
</style> <div class="test" style="width: 100px;height: 100px;">
<span id="span">hello world</span>
</div> <script type="text/javascript">
var oTest = document.getElementById('test');
console.log(document.elementFromPoint(10,10).id);//3
</script>