offsetParent直接的将是影响元素位置的上级element，而parentElement与位置显示无关时dom中的上级element。

例如：

  <BODY>

  <div style="border:1px solid black;position:absolute;">

  <form>

  <input type="checkbox" id="cc">

  </form>

  </div>

这个例子中，“cc”元素的offsetParent是div，如果去掉div的position属性，那么cc的offsetParent就会变为body。而parentElement一直都为form。

与此相关的还有offsetLeft和offsetTop两种属性，他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。 

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持。

parentNode，parentElement,offsetParent的更多相关文章

  1. parentNode、parentElement，childNodes、children 它们有什么区别呢？

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  2. parentNode，offsetParent

    元素.parentNode : 父节点   只读 属性 当前节点的父级节点 没有兼容性问题 可放心使用 <!DOCTYPE HTML> <html> <head> ...

  3. parentNode和parentElement区别

    parentNode跟parentElement除了前者是w3c标准,后者只ie支持 当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null 一般 ...

  4. js黑科技，使用offsetParent检测元素是否隐藏

    var isHidden = function (element) { return (element.offsetParent === null);}; eg:

  5. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

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

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

  7. DOM之parentNode与offsetParent

    DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...

  8. parentNode parentElement childNodes children

    首先要了解 parentNode childNodes是W3C标准的. 一下所说都是针对在html中外加chrome浏览器(请原谅我的渣...) 对于html文档而言,可以理解为能分Node树,Ele ...

  9. offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像O ...

随机推荐

  1. UVA-11212 Editing a Book （IDA*）

    题目大意:将一个数字序列以最少的剪切次数粘贴成另一个数字序列. 题目分析:很显然,最坏的情况是需要n-1次剪切,搜索层数不多,但每一层的状态数目又非常庞大,适宜使用IDA*.考虑每一个序列后续不正确的 ...

  2. HDU1102 最小生成树prim算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1102 题意:给出任意两个城市之间建一条路的时间,给出哪些城市之间已经建好,问最少还要多少时间使所有的城 ...

  3. iOS笔记之线程

    dispatch_after dispatch_after能让我们添加进队列的任务延时执行,比如想让一个Block在10秒后执行: var time = dispatch_time(DISPATCH_ ...

  4. 知名第三方编译版tete009 Firefox 24.0

    Firefox除了官方版本上还有许多由爱好者自己编译修改的第三方版本. 其中 tete009 是十分流行的一个版本,目前tete009 Firefox 24.0 版本发布. tete009版Firef ...

  5. 201621123010《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口.面向接口编程 interface.implements has-a 关系 Comparable.Comparator 1. ...

  6. eclipse 编码设置【转】

    一般Java文件编码格式是UTF-8的.以下以默认GBK改为UTF-8为例. 1.改变整个工作空间的编码格式,这样以后新建的文件也是新设置的编码格式. eclipse->window->p ...

  7. 对MYSQL慢查询slow query 日志记录内容的疑惑

    初始:由于新装服务器出现CPU占用过高,响应不及时的问题排查,因为环境基于最基础的LAMP构架 想到开启 MYSQL slow_query_log 慢查询日志做原因分析: 但是看到日志内容之后有点茫然 ...

  8. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  9. SD卡驱动学习

    https://blog.csdn.net/zqixiao_09/article/category/6163492 sd 协议解析: https://blog.csdn.net/g_salamande ...

  10. hdu 4336 Card Collector——最值反演

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4336 点集中最早出现的元素的期望是 min ,最晚出现的元素的期望是 max :全部出现的期望就是最晚出现 ...