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 相关文章推荐
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 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 代码优化的42条建议 推荐
2009/09/25 PHP
php简单图像创建入门实例
2015/06/10 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python django model联合主键的例子
2019/08/06 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
Java基础知识面试题
2014/03/25 面试题
合作意向书格式及范文
2014/03/31 职场文书
大学生党员承诺书
2014/05/20 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技