首先是 parentNode 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。
要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 属性获取父级对象时有以下两种情况：
1、元素本身已经定位
如果元素本身已经定位，那么 offsetParent 属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象，例如：
<body> <div> <span id="obj1" style="position:absolute"></span> </div> <div id="pObj1" style="position:absolute"> <span id="obj2" style="position:absolute"></span> </div> </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 对象
原文参见：js parentElement和offsetParent之间的区别
javascrip中parentNode和offsetParent之间的区别
原文：http://www.cnblogs.com/dige1993/p/4678412.html