首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。 要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 abs
在JavaScript中，`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性，但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。
`parentElement`属性是DOM层次结构的一部分，它代表了元素的直接父元素。如果元素A包含元素B，元素B的`parentElement`就是元素A。这是一个直观且直接的关系，遵循HTML结构。在非IE浏览器中，通常使用`parentNode`属性来代替`parentElement`，因为`parentNode`是W3C标准推荐的属性。
然后，我们转向`offsetParent`属性，这是一个相对复杂的概念。`offsetParent`并不总是返回元素的直接父元素，而是返回一个可以作为元素位置计算参考的最近的已定位父元素。这里的"已定位元素"指的是设置了`position`属性，并且值为`absolute`、`relative`或`fixed`的元素。如果找不到这样的父元素，`offsetParent`则会返回`BODY`对象。
当元素自身已经定位（即设置了`position`属性）时，`offsetParent`将返回最近的已定位父级元素，如果没有已定位的父级元素，它会返回`BODY`。例如：
```html
<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`对象。
如果元素未定位，`offsetParent`会寻找定位的父元素，TD和TABLE类型的父元素。一旦找到这些类型中的任何一个，它就会返回该元素，否则返回`BODY`。例如：
```html
<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`对象。
另外，`parentNode`属性与`parentElement`作用相同，只是`parentElement`是IE浏览器特有，而`parentNode`被其他主流浏览器支持。类似地，`children`属性返回元素的子元素列表，是IE特有；`childNodes`返回元素的所有子节点，包括文本节点和其他非元素节点，是W3C标准支持的属性。
`parentElement`和`offsetParent`在处理元素关系时有着不同的用途。`parentElement`主要用于获取元素的直接父元素，而`offsetParent`则更关注元素相对于其定位父元素的位置。在实际的JavaScript编程中，理解并正确使用这两个属性可以帮助我们更精确地操作页面上的元素。
