javascrip中parentNode和offsetParent之间的区别

时间:2022-09-05 08:53:42

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

  要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。

  在使用 offsetParent 属性获取父级对象时有以下两种情况:

  1、元素本身已经定位

    如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象,例如:

<body>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</body>

    obj1.offsetParent 返回 BODY 对象
     obj2.offsetParent 返回 pObj1 对象

  2、元素没有定位
    如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象,例如:

<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>

    obj1.offsetParent 返回 td1 对象
    obj2.offsetParent 返回 pObj2 对象

原文参见:js parentElement和offsetParent之间的区别

javascrip中parentNode和offsetParent之间的区别的更多相关文章

  1. JavaScript中this和&dollar;&lpar;this&rpar;之间的区别以及extend的使用

    jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...

  2. &lbrack;转&rsqb; C&num;中out和ref之间的区别

    gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...

  3. iOS 中 &num;import同&commat;class之间的区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...

  4. angularjs 中 Factory&comma;Service&comma;Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  5. android中getWidth&lpar;&rpar;和getMeasuredWidth&lpar;&rpar;之间的区别

    先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...

  6. C&num;中out和ref之间的区别【转】

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  7. C&num;中out和ref之间的区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:rel可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  8. java中String&comma;StringBuffer&comma;StringBuilder之间的区别

    文章转载自:http://www.cnblogs.com/frankliiu-java/archive/2010/07/05/1771537.html String是固定长度的字符串,如果要发生变化必 ...

  9. &lpar;扫盲&rpar;C&num;中out和ref之间的区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

随机推荐

  1. Mybatis总结

    jdbc.properties driver=com.mysql.jdbc.Driver url=jdbc:mysql://127.0.0.1:3306/testdb username=root pa ...

  2. 阿里云服务器Linux CentOS安装配置(三)yum安装mysql

    阿里云服务器Linux CentOS安装配置(三)yum安装mysql 1.执行yum安装mysql命令:yum -y install mysql-server mysql-devel 2.启动mys ...

  3. 用Linux命令wget进行整站下载

    wget加上参数之后,即可成为相当强大的下载工具. wget -r -p -np -k http://xxx.com/abc/-r, --recursive(递归) specify recursive ...

  4. C&plus;&plus; Bitsets

    C++ Bitsets给程序员提供一种位集合的数据结构.Bitsets使用许多二元操作符,比如逻辑和,或等. Constructors 创建新bitsets Operators 比较和赋值bitset ...

  5. Raising Modulo Numbers(POJ 1995 快速幂)

    Raising Modulo Numbers Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5934   Accepted: ...

  6. 2015广东工业大学ACM学校巡回赛 I 游戏高手 (如压力dp)

    Problem I: 游戏王 Description 小学的时候,Stubird很喜欢玩游戏王.有一天,他发现了一个绝佳的连锁组合,这个连锁组合须要6张卡. 但是他一张都没有,但是他的那些朋友们有.只 ...

  7. 利用Grafana展示zabbix数据

    一.系统搭建(以Centos7为例)因为我们的主要目的是展示zabbix的数据,所以建议大家直接在zabbix的服务器上搭建这个系统,亲测两系统无冲突,这样部署的好处是两系统间的数据传输更快,前端展示 ...

  8. sql server中replace&lpar;&rpar;函数用法解析

    知识点一:replace()的语法 REPLACE ( string_replace1 , string_replace2 , string_replace3 ) 参数解析: string_repla ...

  9. Caffe SSD AttributeError&colon; &&num;39&semi;module&&num;39&semi; object has no attribute &&num;39&semi;LabelMap&&num;39&semi;

    caffe ssd 错误描述: AttributeError: 'module' object has no attribute 'LabelMap' SSD from caffe.proto imp ...

  10. UIKeyboardTypeNumberPad 数字键盘添加完成按钮

    一:添加通知 //数字键盘添加完成 [[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(keyboardWi ...