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. 手把手教你如何加入到github的开源世界

    我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...

  2. 配置Spring Boot通过@ConditionalOnProperty来控制Configuration是否生效

    Spring boot中有个注解@ConditionalOnProperty,这个注解能够控制某个configuration是否生效. 具体操作是通过其两个属性name以及havingValue来实现 ...

  3. C#金额千分位分隔

    "234234".ToString("C") 显示:￥234,234

  4. 源码编译运行android emulator

    source buile/envsetup.sh lunch sdk-eng make sdk -j2 编译完之后,sdk安装在了下面的目录里 ANDROIID_DIR/out/host/linux- ...

  5. Unit Test Generator 简介

    从Visual Studio 2012开始,创建单元测试从右键菜单中消失了,这让开发者感觉很不习惯.其实创建单元测试并不是消失了,只是独立成一个扩展Unit Test Generator,单独安装这个 ...

  6. Java 复制一个文件到另外一个目录下

    因为项目部署在jboss上面,在上传一些图片的时候,把他上传到当前项目的下,比如:(这里是以Windows服务器为例的,当然linux也是一样的) D:\jboss-eap-6.4\domain\se ...

  7. Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 04

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2287] 版本控制:https://git.coding.net/liuyy08 ...

  8. Django 之 用redis存储session

    方案I: 1. 安装 django-redis liuqian@ubuntu:~$ pip install django-redis dango-redis 官方文档:http://niwinz.gi ...

  9. Jenkins使用Git Parameter插件打包

    一. 下载Git Parameter插件: 二. 项目配置: Shell脚本: #!/bin/bash -l echo $deploy_envcase $deploy_env in deploy) e ...

  10. CF1082G:G. Petya and Graph(裸的最大闭合权图)

    Petya has a simple graph (that is, a graph without loops or multiple edges) consisting of n n vertic ...