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添加String.Format方法
Aug 11 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
pyqt5中动画的使用详解
2020/04/01 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
网络安全方面的面试题
2016/01/07 面试题
英语系毕业生自荐信
2013/10/31 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
身份证丢失证明
2015/06/19 职场文书
经营场所证明范本
2015/06/19 职场文书
大学生十八大感想
2015/08/11 职场文书
感谢信
2019/04/11 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers