首先是 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之间的区别的更多相关文章

  1. JavaScript中this和$(this)之间的区别以及extend的使用

    jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...

  2. [转] C#中out和ref之间的区别

    gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...

  3. iOS 中 #import同@class之间的区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...

  4. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  5. android中getWidth()和getMeasuredWidth()之间的区别

    先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...

  6. java中JVM和JMM之间的区别

    一 jvm结构 jvm的内部结构如下图所示,这张图很清楚形象的描绘了整个JVM的内部结构,以及各个部分之间的交互和作用. 1 Class Loader(类加载器)就是将Class文件加载到内存,再说的 ...

  7. C#中out和ref之间的区别【转】

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  8. C#中out和ref之间的区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:rel可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  9. java中String,StringBuffer,StringBuilder之间的区别

    文章转载自:http://www.cnblogs.com/frankliiu-java/archive/2010/07/05/1771537.html String是固定长度的字符串,如果要发生变化必 ...

随机推荐

  1. 我理解的this

    this指的就是当前上下文环境对象,主要分两种情况. 1.函数中的this指的是调用该函数的那个上下文环境对象 这个的理解还是非常重要的. 看一个全局函数的例子 var b = 1; function ...

  2. [Web API] Web API 2 深入系列(1) 路由

    目录 ASP.NET 路由 注册路由 动态映射HttpHandler WebAPI 路由 注册路由 调用GetRouteData 2个路由系统衔接 GlobalConfiguration Hosted ...

  3. Windows 10 内置管理员无法打开Metro应用方法

    前言 在windows 10中,由于权限原因,使用了内置管理员账户.虽然这样权限获取了,但是不能打开Metro应用,Microsoft Edge浏览器等,有点不太好.那有没有方法可以修改呢?这是本文要 ...

  4. ASP.NET MVC Notes - 01

    inetmgr 进入IIS ViewBag和ViewData在run-time的时候检查错误,View中的用法如下: @*ViewBag传递的是动态对象*@ @foreach (string item ...

  5. 解决BUG:CS1617: 选项“6”对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default

    vs 2015的项目用vs2013,更改.net版本之后,打开会报以下错误,原因是配置文件修改出了问题.已经验证是BUG 你只需要把Web.config换成以前的就好了.   https://conn ...

  6. Home / Python MySQL Tutorial / Calling MySQL Stored Procedures in Python Calling MySQL Stored Procedures in Python

    f you are not familiar with MySQL stored procedures or want to review it as a refresher, you can fol ...

  7. 第 31 章 项目实战-PC端固定布局[1]

    学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...

  8. Java开发web的几种开发模式

    Java Web开发方案有多种可供选择,这里列举一些经典的开发模式进行横向比较,为Java Web的开发模式选择提供参考.除此之外还有好多方案(如Tapestry和Wicket等等)并不了解,这里就不 ...

  9. WAMPServer安装和配置

    1. 下载地址:  www.wampserver.com    www.php100.com 本机下载在 安装在 2. 自定义网站根目录 设置到这里 访问localhost就会访问到自定义的目录了假设 ...

  10. js圣诞节倒计时网页

    在线预览:http://keleyi.com/keleyi/phtml/jstexiao/17.htm 以下是代码: <!DOCTYPE html> <html xmlns=&quo ...