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 相关文章推荐
jquery获得当前html页面源码的方法
Jul 14 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Angular简单验证功能示例
2017/12/22 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python SQLite3简介
2018/02/22 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
python使用列表的最佳方案
2020/08/12 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
绩效管理实施方案
2014/03/19 职场文书
大专生求职信
2014/06/29 职场文书
化学教育专业求职信
2014/07/08 职场文书
优秀护士事迹材料
2014/12/25 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL