js parentElement和offsetParent之间的区别
js parentElement和offsetParent之间的区别
发布时间:2016-12-30 来源:查字典编辑
摘要:首先是parentElement属性,这个属性好理解,就是在DOM层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过par...

首先是 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"></span>

</div>

<div id="pObj1">

<span id="obj2"></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">

<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 被其他浏览支持。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类