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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
js输出列表实现代码
Sep 12 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript实现的简单计时器
Jul 19 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
js实现AI五子棋人机大战
May 28 Javascript
jQuery操作动画完整实例分析
Jan 10 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
关于文本留言本的分页代码
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python得到电脑的开机时间方法
2018/10/15 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
一个SQL面试题
2014/08/21 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
倡议书格式
2014/08/30 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
python实现简单的聊天小程序
2021/07/07 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js