2、top ：一个页面可能会有很多层，top是指最顶层的框架
3、self ：是指当前窗口
首先是 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 被其他浏览支持。
<script type="text/javascript">$(document).ready(function() {
$("span").toggle(function() {
$(this).parent().parent().parent().parent().parent().next().hide('slow')
}, function() {
$(this).parent().parent().parent().parent().parent().next().show('slow')
})
})
//jQuery为了兼容浏览器，自动会在table标签里加入<tbody>标签，因为FF相对于IE对table标签解析要麻烦些的，所有js代码里要多加一层.parent()
//所有你以后写HTML代码时，要注意兼容各个浏览器，比如写table时记得加上thead，tbody标签，这样更能遵循W3C标准
