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 年月日联动实现核心代码
Dec 21 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
js消除图片小游戏代码
Dec 11 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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 可阅读随机字符串代码
2010/05/26 PHP
深入apache host的配置详解
2013/06/09 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php微信开发接入
2016/08/27 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js实现时间轴自动排列效果
2017/03/09 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
js实现简单进度条效果
2020/03/25 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
用Python写冒泡排序代码
2016/04/12 Python
TensorFlow变量管理详解
2018/03/10 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
学习两会精神心得范文
2014/03/17 职场文书
倡议书格式范文
2014/04/14 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
联谊会开场白
2015/06/01 职场文书
礼仪培训心得体会
2016/01/22 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书