javascrip中parentNode和offsetParent之间的区别
首先是 parentNode 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。
要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 属性获取父级对象时有以下两种情况：
1、元素本身已经定位
如果元素本身已经定位，那么 offsetParent 属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象，例如：
<body>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</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 对象
原文参见：js parentElement和offsetParent之间的区别
javascrip中parentNode和offsetParent之间的区别的更多相关文章
- JavaScript中this和$(this)之间的区别以及extend的使用
jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...
- [转] C#中out和ref之间的区别
gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...
- iOS 中 #import同@class之间的区别
很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- android中getWidth()和getMeasuredWidth()之间的区别
先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...
- java中JVM和JMM之间的区别
一 jvm结构 jvm的内部结构如下图所示,这张图很清楚形象的描绘了整个JVM的内部结构,以及各个部分之间的交互和作用. 1 Class Loader(类加载器)就是将Class文件加载到内存,再说的 ...
- C#中out和ref之间的区别【转】
首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...
- C#中out和ref之间的区别
首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:rel可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...
- java中String,StringBuffer,StringBuilder之间的区别
文章转载自:http://www.cnblogs.com/frankliiu-java/archive/2010/07/05/1771537.html String是固定长度的字符串,如果要发生变化必 ...
随机推荐
- CloudNotes：一个云端个人笔记系统
很长时间没有更新博客了,一直在忙着工作和生活琐事,虽然偶尔也有闲暇之时,但短短的几个小时空闲又未必能够静下心来.最近一个多月突发奇想,将自己在近一年前做的一个自己用的云端个人笔记系统重构美化了一下,增 ...
- css3+visbibilty解决淡入淡出问题
.fade{ visibility: hidden; opacity: ; transition: all .5s; } .fade.on { visibility: visible; opacity ...
- 基于Metronic的Bootstrap开发框架经验总结（10）--优化Bootstrap图标管理
在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...
- .Net(c#)加密解密之Aes和Des
.Net(c#)加密解密工具类: /// <summary> /// .Net加密解密帮助类 /// </summary> public class NetCryptoHelp ...
- Differences between INDEX, PRIMARY, UNIQUE, FULLTEXT in MySQL?
487down vote Differences KEY or INDEX refers to a normal non-unique index. Non-distinct values for ...
- php实现设计模式之 职责链模式
<?php /** * 职责链模式 * * 为解除请求的发送者和接收者之间的耦合,而使用多个对象都用机会处理这个请求,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 * 抽象 ...
- Eclipse安装FindBug
insert software: http://findbugs.cs.umd.edu/eclipse
- Ext.NET MVC 配置问题总结
随着VS版本和.NET MVC版本.EF的版本的不断更新,虽然很多功能随着版本的提升而更完善,但对于旧版本开发的软件就有点悲催了,或许很多开发者都遇到类似的问题! 最近有一个项目是用.NET MVC3 ...
- 用childNodes获取子元素 换行会产生一个子元素
<div id='div1'> <div id='div2'> <div id='div3'></div> </div> <div c ...
- 初识JQuery
轻量级的js库 兼容各种浏览器+css3 传统:js+DHTM jq:解放了客户端的编程, 环境搭建 进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需 ...