offsetParent用的最普遍的就是来计算元素在页面中的位置，前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置，不过这只支持最新的浏览器，如果要兼容像Opera9.2和Firefox2以及Safair任何版本都只能通过offsetParent该属性来循环获计算获得元素的位置，效率不太好。贴一段缩减了来自YUI里的代码：

  1. function getElementXY(el){ //el 要获取位置的元素对象
  2.     var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置
  3.     var parentNode = el.offsetParent; //获得该元素的第一个非流布局父元素
  4.     if (parentNode != el) {
  5.         while (parentNode) {
  6.             pos[0] += parentNode.offsetLeft;
  7.             pos[1] += parentNode.offsetTop;
  8.             parentNode = parentNode.offsetParent; //循环定义非流布局父元素
  9.         }
  10.     }
  11. }

MSDN解释offsetParent在大多时候返回的是Body，其实是返回第一个非流布局的父级元素，也就是postion的值是 absolute，relative，fixed，（inherit 继承父元素也是前三者）其中之一，当然如果父级元素都是流布局最后返回的肯定是Body，由此可见offsetParent本身在获取的时候要通过页面不断查找父元素，尤其在代码多层嵌套的时候，需要向上查找未知的层次，直到获取到第一个非流布局元素。

offsetLeft和offsetTop分别返回相对offsetParent的位置，也就是返回相对第一个非流布局父级元素的位置。

上面的代码可以看出这个方法是通过不断循环获得相对非流布局父元素的位置相加来最后计算得到要获取的位置。

IE7对offsetParent解释有个BUG，貌似始终返回父元素。

parentNode就不用解释了，父节点。

实验：

  1. <body>
  2. <div id="div1">
  3.     div1
  4.     <div id="div3">
  5.         <div id="div2">
  6.             div2
  7.          </div>
  8.     </div>
  9. </div>
  10.  
  11. </body>
  1. #div1{
  2.     position:relative;
  3.     width:300px;
  4.     height:300px;
  5.     border:1px solid red;
  6. }
  7. #div2{
  8.     position:absolute;
  9.     top:20px;
  10.     width:200px;
  11.     height:100px;
  12.     background:#ccc;
  13. }

var obj=document.getElementById("div2");
console.log(obj.parentNode); //输出: div#div3
console.log(obj.offsetParent); //输出:div#div1.

可以看到，parentNode只是返回表面意义上的节点，而offsetParent则返回该节点相对定位的containing block。

body元素

document.body.parentNode 为html。

document.body.offsetParent 为null。

参考了:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304614.html

offsetParent和parentNode区别的更多相关文章

  1. javascrip中parentNode和offsetParent之间的区别

    首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...

  2. DOM创建节点

    1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...

  3. offsetParent详解

    offsetParent与parentNode一样,都是获取父节点,但是offsetParent却有很大的不同之处: offsetParent找有定位的父节点,没有定位默认是body,ie7以下定位在 ...

  4. 关于offsetParent

    不知道有多少人知道JavaScript中有offsetParent这么个属性. 关于offsetParent,我最开始见到他,是在<JavaScript高级程序设计(第3版)>第321页, ...

  5. DOM

    DOM:Document Object Model 文档对象模型文档:html页面文档对象:页面中的元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素DOM会把文档看作是一棵树docume ...

  6. scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

    题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ub ...

  7. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  8. js ·节点的知识点

    1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型 元 ...

  9. 11-14 dom

    1.DOM document object model (1) 节点树状图:Document>documentElement>body>tagname 2.我们常用的节点类型 元素节 ...

随机推荐

  1. [Non-original]OS X How do I unset an IP address set with ifconfig?

    I recently used ifconfig en1 1.2.3.4 to set the IP address of a network interface (specifically, the ...

  2. Python成长之路第二篇（1）_数据类型内置函数用法

    数据类型内置函数用法int 关于内置方法是非常的多这里呢做了一下总结 (1)__abs__(...)返回x的绝对值 #返回x的绝对值!!!都是双下划线 x.__abs__() <==> a ...

  3. Digital Roots（hdoj1013）

    Problem Description The digital root of a positive integer is found by summing the digits of the int ...

  4. Google机器学习笔记 4-5-6 分类器

    转载请注明作者:梦里风林 Google Machine Learning Recipes 4 官方中文博客 - 视频地址 Github工程地址 https://github.com/ahangchen ...

  5. SQL Server sp_configure 控制内存使用

    背景知识: sp_configure   显示或更改当前服务器的全局配置设置(使用 sp_configure 可以显示或更改服务器级别的设置.) 查看 全局配置值 方法 1.execute sp_co ...

  6. 正式学习React (六) 项目篇

    https://github.com/huenchao/yingshili 或者点这里 注意事项看ReadME.md 会持续更新,反正就是把之前分析的redux react-redux都用一下,然后会 ...

  7. HeadFirst设计模式读书笔记(5)-单例模式

    单例模式:确保一个类只有一个实例,并提供一个全局访问点. 应用场景:数据库连接.线程池.缓存.对话框.处理偏好设置.注册表的对象.日志对象.充当打印机.显卡等设备的驱动程序对象.任务管理器.网站的计数 ...

  8. SQL Server 2008数据库的一些基本概念 区、页、行

    原文地址:http://www.cnblogs.com/liuzhendong/archive/2011/10/11/2207361.html 以前总是没弄明白这些基本概念,现在整理如下: 1.区: ...

  9. nyoj 927 The partial sum problem（dfs）

    描述 One day,Tom’s girlfriend give him an array A which contains N integers and asked him:Can you choo ...

  10. VMware虚拟机与主机联通及配置上网

    vmware版本:10.0.0 build-1295980,安装redhat enterprise linux 5.8 一.物理机与虚拟机联通,但不联网 1.虚拟网络VMnet1设置: 此时,物理主机 ...