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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
对IPython交互模式下的退出方法详解
2019/02/16 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
领导党性分析材料
2014/02/15 职场文书
企业挂职心得体会
2014/09/10 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2014年预算员工作总结
2014/12/05 职场文书
关于感谢信的范文
2015/01/23 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android