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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
判断网页编码的方法python版
2016/08/12 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python程序 创建多线程过程详解
2019/09/23 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python识别验证码的思路及解决方案
2020/09/13 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
优秀党员获奖感言
2014/02/18 职场文书
文秘自荐信
2014/06/28 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2019安全宣传标语大全
2019/08/14 职场文书