代码改变世界

offsetParent和parentNode区别

2013-10-21 20:59  youxin  阅读(993)  评论(0)    收藏  举报

offsetParent用的最普遍的就是来计算元素在页面中的位置，前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置，不过这只支持最新的浏览器，如果要兼容像Opera9.2和Firefox2以及Safair任何版本都只能通过offsetParent该属性来循环获计算获得元素的位置，效率不太好。贴一段缩减了来自YUI里的代码：

function getElementXY(el){ //el 要获取位置的元素对象
    var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置
    var parentNode = el.offsetParent; //获得该元素的第一个非流布局父元素
    if (parentNode != el) { 
        while (parentNode) { 
            pos[0] += parentNode.offsetLeft; 
            pos[1] += parentNode.offsetTop;
            parentNode = parentNode.offsetParent; //循环定义非流布局父元素
        }
    }
}

MSDN解释offsetParent在大多时候返回的是Body，其实是返回第一个非流布局的父级元素，也就是postion的值是 absolute，relative，fixed，（inherit 继承父元素也是前三者）其中之一，当然如果父级元素都是流布局最后返回的肯定是Body，由此可见offsetParent本身在获取的时候要通过页面不断查找父元素，尤其在代码多层嵌套的时候，需要向上查找未知的层次，直到获取到第一个非流布局元素。

offsetLeft和offsetTop分别返回相对offsetParent的位置，也就是返回相对第一个非流布局父级元素的位置。

上面的代码可以看出这个方法是通过不断循环获得相对非流布局父元素的位置相加来最后计算得到要获取的位置。

IE7对offsetParent解释有个BUG，貌似始终返回父元素。

 

parentNode就不用解释了，父节点。 

实验：

<body>
<div id="div1">
    div1    
    <div id="div3">
        <div id="div2">
            div2
         </div>
    </div>
</div>

</body>
#div1{
    position:relative;
    width:300px;
    height:300px;
    border:1px solid red;
}
#div2{
    position:absolute;
    top:20px;
    width:200px;
    height:100px;
    background:#ccc;
}

var obj=document.getElementById("div2");
console.log(obj.parentNode); //输出: div#div3
console.log(obj.offsetParent); //输出:div#div1.

可以看到，parentNode只是返回表面意义上的节点，而offsetParent则返回该节点相对定位的containing block。

body元素

document.body.parentNode 为html。

document.body.offsetParent 为null。

参考了:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304614.html