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 笔记二 Array和Date对象方法
May 22 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
JS模拟实现哈希表及应用详解
May 04 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP简单遍历对象示例
2016/09/28 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python输出带颜色的字符串实例
2017/10/10 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python可视化实现KNN算法
2019/10/16 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
软件工程师面试题
2012/06/25 面试题
成品仓管员工作职责
2013/12/29 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
Django中celery的使用项目实例
2022/07/07 Python