js parentElement和offsetParent之间的区别


Posted in Javascript onMarch 23, 2010

首先是 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 被其他浏览支持。
Javascript 相关文章推荐
纯文字版返回顶端的js代码
Aug 01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
js中的数组对象排序分析
Dec 11 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 #Javascript
JavaScript Perfection kill 测试及答案
Mar 23 #Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 #Javascript
jQuery 核心函数以及jQuery对象
Mar 23 #Javascript
jquery easyui的tabs使用时的问题
Mar 23 #Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 #Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解python3实现的web端json通信协议
2016/12/29 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
小学校本培训方案
2014/06/06 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
外出学习心得体会范文
2016/01/18 职场文书
编写python程序的90条建议
2021/04/14 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers