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. 51nod1347思维

    1347 旋转字符串 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 S[0...n-1]是一个长度为n的字符串,定义旋转函数Left(S)=S[1… ...

  2. HDU 5816 状压DP&排列组合

    ---恢复内容开始--- Hearthstone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java ...

  3. 平衡二叉树,AVL树之代码篇

    看完了第一篇博客,相信大家对于平衡二叉树的插入调整以及删除调整已经有了一定的了解,下面,我们开始介绍代码部分. 首先,再次提一下使用的结构定义 typedef char KeyType; //关键字 ...

  4. Window 7 平台的IE11浏览器预览版发布

    继之前Windows 8.1 带来了IE11浏览器之后,今天Window 7 以及Windows Server 2008 R2平台的IE11浏览器预览版也已经发布. 当然这还只是一个开发者预览版,可能 ...

  5. linux centos 虚拟机新安装后没有网络

    ping的时候出现 name or service not known的时候 可以 修改/etc/sysconfig/network-scripts/ifcfg-ens33 文件 vi ifcfg-e ...

  6. ubuntu16 install nginx

    1,更新系统 sudo apt-get update 2,安装nginx sudo apt-get install nginx 3,验证是否安装成功 curl 127.0.0.1 常用配置文件和命令 ...

  7. 二叉树题目集合 python

    二叉树是被考察频率非常高的数据结构.二叉树是按照“父节点-左子树&右子树”这样的方式,由根节点不断向下扩展,形成一棵树的结构.二叉树经常被提到的三种遍历方式:前序遍历.中序遍历和后序遍历,既是 ...

  8. selenium-java，暂停功能

    暂停/开始应用程序 public class Common_method { public void kill_chromedriver(){ Runtime runtime=Runtime.getR ...

  9. 前端安全系列：如何防止CSRF攻击？

    背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...

  10. python 用 __all__ 暴露接口

    非常典型的python的用法 refer to : http://python-china.org/t/725