本文详细解析JavaScript中parentElement与offsetParent属性的区别。parentElement仅反映DOM树中的直接父节点关系；而offsetParent用于获取“已定位”元素的参考框架，涉及position为absolute、relative或fixed的情况。文章通过代码示例说明了元素自身是否定位时，offsetParent返回逻辑的不同，包括对TD、TABLE元素的特殊处理及默认返回BODY的情况。
parentElement 与 offsetParent 的基本概念
首先是 parentElement 属性，该属性概念直观，它依据 DOM 树中的层级结构来定义父子关系。若元素 A 包含元素 B，则元素 B 可通过 parentElement 属性直接获取其父级元素 A。
本文重点讨论 offsetParent 属性。该属性在 MSDN 官方文档中并未给出清晰解释，导致其机制较为晦涩。经过查阅相关资料并结合实际测试，对该属性有了更深入的认知，现将总结整理如下。
理解 offsetParent 的关键在于掌握“已定位元素”这一概念。所谓“已定位元素”，是指元素设置了 position 样式属性，且该属性的值为 absolute、relative 或 fixed 之一的元素。
offsetParent 的两种返回情况
在使用 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 的父级元素。只要找到这三种父级元素（已定位元素、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 属性对比
在 DOM 元素属性中，还有一个 parentNode 属性。实际上，parentNode 与 parentElement 的含义相同。parentElement 是 IE 浏览器特有的属性，而 W3C 标准推荐使用 parentNode 属性。此外，children 是 IE 特有的属性，而 childNodes 则被其他主流浏览器所支持。