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. facebook开源的prophet时间序列预测工具---识别多种周期性、趋势性（线性，logistic）、节假日效应，以及部分异常值

    简单使用 代码如下 这是官网的quickstart的内容,csv文件也可以下到,这个入门以后后面调试加入其它参数就很简单了. import pandas as pd import numpy as n ...

  2. 在Firefox中发现一个在Linux下查看chm文档的插件

    在Firefox浏览器插件中搜索插件chmfox插件,安装后就可以在linux下通过Firefox浏览器阅读chm文档了.

  3. Android Studio 1.5 注解配置

    Project的build.gradle文件配置如下: // Top-level build file where you can add configuration options common t ...

  4. Hadoop本地安装

    安装JDK卸载已经安装的JDK安装sun公司的JDK安装Hadoop(本地方式)解压并安装启动测试程序 安装JDK 卸载已经安装的JDK rpm -qa|grep jdk rpm -qa|grep g ...

  5. Nginx安装配置详解

    http://nginx.org/download/ 下载对应的Nginx 安装nginx之前需要安装依赖包 yum install gcc gcc-c++ zlib-devel pcre-devel ...

  6. Linux:提示符PS1个性设置

    提示符PS1个性设置 1)默认PS1 echo $PS1 2)个性PS1 #去掉了默认显示的[]号#\e[1;34m\]\u:user名高亮显示并显示颜色#\e[5;33m\]\h:hostname主 ...

  7. contentType 'text/xml; charset=UTF-8' conflicts问题

    Resin升级到3.1.3后,有同事发现原来在Resin 3.0.xx下成功运行的部分jsp文件(输出xml格式文件)编译出错: 1234567 500 Servlet Exception XXXXX ...

  8. UVA11732 "strcmp()" Anyone?【左儿子右兄弟Trie】

    LINK1 LINK2 题目大意 给你一些字符串,并定义了一个函数(具体见题面) 问你把任意两个字符串放到函数里面得到的值的和是多少 思路 该怎么统计答案呢? 每次考虑当前插入的串和所有已经插入过的串 ...

  9. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. test20181015 B 君的第三题

    题意 B 君的第三题(zhengzhou) 题目描述 让你在战争和耻辱中做一块选择,你选择耻辱,可你将来还得进行战争. 在平面上有n 个整点(横纵坐标都是整数) B 君想找到一个整点,使得这个点,到所 ...