parentElement和offsetParent之间的区别

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

这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释 清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己 的一些测试,对此属性有了那么一点的了解,在这里总结一下。

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

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

1、元素本身已经定位

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

<body>
<p>
     <div>
         <span id="obj1" style="position:absolute"></span>
     </div>
     <div id="pObj1" style="position:absolute">
         <span id="obj2" style="position:absolute"></span>
     </div>
</p>
</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 对象

在 DOM 元素的属性里,还有 parentNode 这个属性,其实这个属性跟 parentElement 属性是一个意思,parentElement 属性是 IE 特有的,W3C 标准 是使用 parentNode 属性,还有 children 和 childNodes, children 是 IE 特 有的, childNodes 被其他浏览支持。

时间: 2024-09-20 16:32:49

parentElement和offsetParent之间的区别的相关文章

JS在IE和Firefox之间的区别

JS代码在IE和Firefox之间的区别,16个,非常实用. 1.    HTML 对象的 id 作为对象名的问题 IE:HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用 FF:不支持 解决方法:使用document.getElementById替代document.all 2.       如果控件只有name,没有id, 用getElementById时: IE:可以找到对象 FF:返回NULL 解决方法:所有控件必须设置ID属性 3.       Evel: I

SEO优化人员是否知道标签与栏目、专题、关键词之间的区别

摘要: 相比网站的关键词我们对文章标签的关注实在太少,不知道作为SEO优化人员的你是否知道标签与栏目.专题.关键词之间的区别?也许你会认为这是无关紧要的事情,如果是这样的话只能 相比网站的关键词我们对文章标签的关注实在太少,不知道作为SEO优化人员的你是否知道标签与栏目.专题.关键词之间的区别?也许你会认为这是无关紧要的事情,如果是这样的话只能说你是一个不善于思考问题的人,永远成不一个真正的SEO,因为SEO本身就是一个需要注重细节的职业.笔者发现现在几乎所有的文章都支持添加标签的功能,为什么一

开源领域常用的许可协议和它们之间的区别

越来越多的开发者与设计者希望将自己的产品开源,以便其他人可以在他们的代码基础上做更多事,开源社区也因此充满生机.在我们所能想到的应用领域,都有开源软件存在(象 WordPress,Drupal 这些开源CMS).然而很多人对开源许可并不了解,本文介绍开源领域常用的几种许可协议以及它们之间的区别. 什么是许可协议? 什么是许可,当你为你的产品签发许可,你是在出让自己的权利,不过,你仍然拥有版权和专利(如果申请了的话),许可的目的是,向使用你产品的人提供一定的权限. 不管产品是免费向公众分发,还是出

ashx介绍以及ashx文件与aspx文件之间的区别

 这篇文章主要介绍了ashx以及ashx文件与aspx文件之间的区别.需要的朋友可以过来参考下,希望对大家有所帮助 ashx是什么文件?   .ashx 文件用于写web handler的..ashx文件与.aspx文件类似,可以通过它来调用HttpHandler类,它免去了普通.aspx页面的控件解析以及页面处理的过程.其实就是带HTML和C#的混合文件.    .ashx文件适合产生供浏览器处理的.不需要回发处理的数据格式,例如用于生成动态图片.动态文本等内容.    ashx文件是.net

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

        这篇文章主要是对jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.    1.parents

AP、路由、中继、桥接、客户端模式之间的区别

  AP.路由.中继.桥接.客户端模式之间的区别 在TP-Link迷你无线路由器上一般有AP(接入点)模式.Router(无线路由)模式.Repeater(中继)模式.Bridge(桥接)模式.Client(客户端)模式;但很多用户都不清楚这几种模式的之间的区别,下面将对这几种模式进行详细的介绍. 注意:有的型号的TP-Link 迷你无线路由器上只有AP(接入点)模式.Router(无线路由)模式.Repeater(中继)模式这3种模式. AP(接入点)模式 AP(接入点)模式下,只需要把一根可

浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

 本篇文章主要是对jQuery(function(){})与(function(){})(jQuery)之间的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数.   $(document).ready(function(){   // 在这里写你的代码... });在DOM加载完成时运行的代码   可以简写成   jQuery(function(){  });    (func

深入理解 sudo 与 su 之间的区别

Linux su 命令 su 命令的主要作用是让你可以在已登录的会话中切换到另外一个用户.换句话说,这个工具可以让你在不登出当前用户的情况下登录为另外一个用户. su 命令经常被用于切换到超级用户或 root 用户(因为在命令行下工作,经常需要 root 权限),但是 - 正如前面所提到的 - su 命令也可以用于切换到任意非 root 用户. 如何使用 su 命令切换到 root 用户,如下: 不带命令行参数的 su 命令 如上,su 命令要求输入的密码是 root 用户的密码.所以,一般 s

Python中的module,library,package之间的区别

背景 Python中有一些基本的名词,很多人,尤其是一些初学者,可能听着就很晕. 此处,简单总结一下,module,library,package之间的大概区别. Python中的module的简介 module,中文翻译为:模块 Python中的module,说白了,就是Python文件,而python文件一般后缀为py,所以就是你的xxx.py而已. library简介 library,中文翻译为:库,也常称为:库文件 之所以此处不说是Python中的library,那是因为,本身libra