parentElement 和 offsetParent 之间的区别

首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。

这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。

 

要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。

 

在使用 offsetParent 属性获取父级对象时有以下两种情况：

1、元素本身已经定位

如果元素本身已经定位，那么 offsetParent 属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象，例如：

 

< body >
< p >
     < div >
         < span  id ="obj1"  style ="position:absolute" ></ span >
     </ div >
     < div  id ="pObj1"  style ="position:absolute" >
         < span  id ="obj2"  style ="position:absolute" ></ span >
     </ div >
</ p >
</ body >

 

 

  obj1.offsetParent 返回 BODY 对象

obj2.offsetParent 返回 pObj1 对象 

 

2、元素没有定位

如果元素没有定位， offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素，只要找到这三种父级元素的其中任何一种元素将返回此元素，否则返回 BODY 对象，例如：

 

< table  width ="500"  border ="0" >
   < tr >
     < td id="td1" >
         < div  id ="pObj1" >
             < span  id ="obj1" ></ span >
         </ div >
     </ td >
   </ tr >
   < tr >
     < td >
         < div  id ="pObj2" style="position:relative" >
             < span  id ="obj2" ></ span >
         </ div >
     </ td >
   </ tr >
</ table >

 

 

obj1.offsetParent 返回 td1 对象

obj2.offsetParent 返回 pObj2 对象

 

 

在 DOM 元素的属性里，还有 parentNode 这个属性，其实这个属性跟 parentElement 属性是一个意思，parentElement 属性是 IE 特有的，W3C 标准是使用 parentNode 属性，还有 children 和 childNodes, children 是 IE 特有的， childNodes 被其他浏览支持。

 

文章出处：我的网站