JS中parentElement与offsetParent的区别详解

作者：像素漫游时间：2026-10-24 17:55:00浏览：592

本文详细解析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 对象

parentElement 与 offsetParent 的基本概念

offsetParent 的两种返回情况

相关 DOM 属性对比