js 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 被其他浏览支持。

赞 (0)

相关推荐

  • Js中parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • parentElement,srcElement的使用小结

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • js parentElement和offsetParent之间的区别

    首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性. 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下. 要明白 offsetParent 属性,要先明白"已定位元素" 这个名字,所谓&

  • 详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    如下所示: 1.index.html文件入口: 2.src放置组件和入口文件: 3.node_modules为依赖的模块: 4.cofig中配置了路径端口值等: 5.build中配置了webback的基本配置.开发环境配置.生产环境配置等. main.js是我们的入口文件,主要用于初始化vue实例,并使用需要的插件. App.vue是我们的主组件,所有的页面都在App.vue下进行切换.我们可以将router标示为App.vue的子组件. 6.在每个模板中给style设置一个scoped属性,意

  • JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

    本文实例讲述了JS箭头函数和常规函数之间的区别.分享给大家供大家参考,具体如下: 在 JavaScript 中,你可以通过多种方式去定义函数. 第一种常用的方法是使用关键字 function: // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代码中的函数声明和函数表达式被称为"常规函数". 从

  • js中forEach的用法之forEach与for之间的区别

    目录 一.定义和用法 二.运用场景 1.运用的场景(计算数字之和) 2.运用的场景(给原始数组新增key值) 三.forEach 跳出循环 1.forEach 跳出当前的循环 return 2.forEach结合try跳出整个循环 3.forEach 与for循环的区别 [面试题] 一.定义和用法 forEach() 调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. 用法: array.forEach(function(currentVa

  • 深入理解JS中attribute和property的区别

    深入理解JS中attribute和property的区别

    目录 attribute和property介绍 “脚踏两只船” attribute和property的取值和赋值 1.attribute取值 2.attribute赋值 3.property取值 4.Property赋值 更改property和attribute其中一个值,会出现什么结果 property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • Servlet和Filter之间的区别与联系

    filter是一个可以复用的代码片段,可以用来转换HTTP请求.响应和头信息.Filter不像Servlet,它不能产生一个请求或者响应,它只是修改对某一资源的请求,或者修改从某一的响应. 最近使用插装的时候,改用cookie对计算机进行识别,加入了过滤,仔细研究了一下servlet和filter,区别主要是: 过滤器的生命周期一般都要经过下面三个阶段: servlet的特点是: 初始化 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Con

随机推荐