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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
List the Codec Files on a Computer
Jun 11 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
动态加载jquery库的方法
Feb 12 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
大专生自荐信
2013/10/04 职场文书
党支部承诺书范文
2014/03/28 职场文书
职业生涯规划书前言
2014/04/15 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
个人委托书范本汇总
2014/10/01 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
开业庆典致辞
2015/08/01 职场文书