offsetParent和parentNode区别
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区别的更多相关文章
- javascrip中parentNode和offsetParent之间的区别
首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...
- DOM创建节点
1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...
- offsetParent详解
offsetParent与parentNode一样,都是获取父节点,但是offsetParent却有很大的不同之处: offsetParent找有定位的父节点,没有定位默认是body,ie7以下定位在 ...
- 关于offsetParent
不知道有多少人知道JavaScript中有offsetParent这么个属性. 关于offsetParent,我最开始见到他,是在<JavaScript高级程序设计(第3版)>第321页, ...
- DOM
DOM:Document Object Model 文档对象模型文档:html页面文档对象:页面中的元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素DOM会把文档看作是一棵树docume ...
- 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 ...
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
- js ·节点的知识点
1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型 元 ...
- 11-14 dom
1.DOM document object model (1) 节点树状图:Document>documentElement>body>tagname 2.我们常用的节点类型 元素节 ...
随机推荐
- 如何看linux是32位还是64位
查看linux是多少位的几位方法: 查看linux机器是32位还是64位的方法: 方法一: file /sbin/init 或者 file /bin/ls 结果如下:/sbin/init: ELF ...
- C语言--C语言程序
一.代码的编写 1.程序结构 1> C语言程序的结构:由函数构成 *任何一个c语言程序都是由一个或者多个程序段(小程序)构成的,每个程序段都有自己的功能,我们一般称这些程序段为“函数”.所以,我 ...
- TensorFlow深度学习笔记 循环神经网络实践
转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地址 视频/字幕下载 加 ...
- 一道C语言面试题：得到整数的M进制表示字符串
题目:输入整数n和M,输出n在M进制下的表示字符串.如n=3000,M=16,输出16进制下3000的表示字符串,为“BB8” 来源:某500强企业面试题目 思路:对n取模M,将得到的数字压入栈中,再 ...
- 浅谈JNDI的使用
原文:http://www.weicoop.com/web/article/52.html 关于什么是JNDI的概念这里不做解释,本文作为初学者根据所了解到内容做些总结,主要内容如下: 1.JNDI使 ...
- 网易云课堂_C++程序设计入门(上)_第5单元：万类霜天竞自由 – 对象和类的更多内容_第5单元作业【4】 - 在线编程（难度：难）
第5单元作业[4] - 在线编程(难度:难) 查看帮助 返回 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系 ...
- hdu 4521 线段树改点求点的应用
小明系列问题——小明序列 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- 系统分层 manager层意义
manager用于控制事务,通常是这么说的,但是如果把事务空指针service可以的,但是有些时候,service加了Transaction注解之后,在加别的注解,可能导致Transaction失效. ...
- Revisit-after元标签是什么,SEO的作用是什么
很多网站都使用了revisit-after的问题,关于revisit-after这个标签是什么,revisit-after元标签的作用究竟是什么呢,应该如何使用revisit-after元标签呢? 这 ...
- oracle查询表信息
oracle查询表信息(索引,外键,列等) oracle中查询表的信息,包括表名,字段名,字段类型,主键,外键唯一性约束信息,索引信息查询SQL如下: 1.查询出所有的用户表 select * fro ...