JS获取元素的偏移量offset

var box = document.getElementById("dian");
1.parentNode:父亲节点 HTML结构层级关系中的上一级元素

2.offsetParent：父级参照物 在同一个页面中，最外层的元素里面所有元素的父级参照物都是body（和html结构没有必然联系）
 ->一般来说一个页面中所有的父级参照物都是body
document.body.offsetParent;//null
 想要改变父级参照物需要通过position来进行改变
absolute
relative
fixed
以上都可以进行改变

3.offsetTop/offsetLeft:当前元素距离父级参照物上/左边距偏移量
->offset():等同于jQuery中的offset方法，实现获取页面中任意一个元素距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。
->获取的结果是一个对象{left:距离body的左偏移量，top:距离body上偏移}
->在标准的ie8浏览器中，我们使用offsetLeft/offsetTop其实是把父级参照物的边框也计算在内了

function offset(curEle){
             var totalLeft = null,totalTop = null,par = curEle.offsetParent;
            //首先把自己本身的进行累加
            totalLeft += curEle.offsetLeft;
            totalTop += curEle.offsetTop;

            //只要没有找到body，我们就把父级参照物的边框和偏移量累加
            while(par){
                     if(navigator.userAgent.indexOf("MSIE 8.0") === -1){
                         //不是标准的ie8浏览器，才进行边框累加
                         //累加父级参照物边框
                         totalLeft += par.clientLeft;
                         totalTop += par.clientTop;
                     }
                    //累加父级参照物本身的偏移
                    totalLeft += par.offsetLeft;
                    totalTop += par.offsetTop;
                    par = par.offsetParent;
            }
            return {left:totalLeft,top:totalTop};
}
console.log(offset(box).top);