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 相关文章推荐
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
PHP 超链接 抓取实现代码
2009/06/29 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
合作协议书模板2014
2014/09/26 职场文书
客房部经理岗位职责
2015/02/02 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Nginx反向代理配置的全过程记录
2021/06/22 Servers
DIY胆机必读:各国电子管评价
2022/04/06 无线电