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

function getElementXY(el){ //el 要获取位置的元素对象

    var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置

    var parentNode = el.offsetParent; //获得该元素的第一个非流布局父元素

    if (parentNode != el) {

        while (parentNode) {

            pos[0] += parentNode.offsetLeft;

            pos[1] += parentNode.offsetTop;

            parentNode = parentNode.offsetParent; //循环定义非流布局父元素

        }

    }

}

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

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

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

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

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

实验：

<body>

<div id="div1">

    div1

    <div id="div3">

        <div id="div2">

            div2

         </div>

    </div>

</div>

</body>
#div1{

    position:relative;

    width:300px;

    height:300px;

    border:1px solid red;

}

#div2{

    position:absolute;

    top:20px;

    width:200px;

    height:100px;

    background:#ccc;

}

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. RemoteViews的内部机制

    1.RemoteViews的构造方法public RemoteViews(String packageName,int layoutId) 第一个表示当前应用的包名(反射机制需要),第二个表示加载的布 ...

  2. Python之路第十天，高级(2)-多线程，多进程，协程

    线程 threading threading模块对象 描述 Thread 表示一个线程的执行对象 Lock 锁原语对象 RLock 可重入锁对象,使单线程可再次获得已经获得了的锁(递归锁定) Cond ...

  3. Goldbach's Conjecture（哥德巴赫猜想）

    Goldbach's Conjecture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  4. nginx相关参考博客

    http://tengine.taobao.org/book/ http://blog.sina.com.cn/s/articlelist_1929617884_0_1.html http://blo ...

  5. Ajax日记

    简要讲Ajax 的内容归纳为博客. AJAX能且仅能从服务器上读取文件,我们使用ajax的时候分为以下几个步骤: 1.  创建ajax对象 2.  链接服务器 3.  发送请求 4.  接收返回值 下 ...

  6. C#正则表达式匹配任意字符

    原文:C#正则表达式匹配任意字符 不得不说正则很强大,尤其在字符串搜索上 匹配任意字符,包括汉字,换行符: [\s\S]*. 版权声明:本文为博主原创文章,未经博主允许不得转载.

  7. 读<<代码整洁之道>>的感想

    花去了近一周的时间浏览一下这本书.总体感觉这本书写得不错. 我发现自己以前写的代码时多么的糟糕.有很多改进之处... 同时我也发现写出优秀的代码不易.优秀的代码不仅仅易读,并且易修改,易维护,程序易维 ...

  8. linux之SQL语句简明教程---CREATE INDEX

    索引 (Index) 可以帮助我们从表格中快速地找到需要的资料.举例来说,假设我们要在一本园艺书中找如何种植青椒的讯息.若这本书没有索引的话,那我们是必须要从头开始读,直到我们找到有关种直青椒的地方为 ...

  9. linux之SQL语句简明教程---外部连接

    之前我们看到的左连接 (left join),又称内部连接 (inner join).在这个情况下,要两个表格内都有同样的值,那一笔资料才会被选出.那如果我们想要列出一个表格中每一笔的资料,无论它的值 ...

  10. 关于k-means聚类算法的matlab实现

    在数据挖掘中聚类和分类的原理被广泛的应用. 聚类即无监督的学习. 分类即有监督的学习. 通俗一点的讲就是:聚类之前是未知样本的分类.而是根据样本本身的相似性进行划分为相似的类簇.而分类 是已知样本分类 ...