parentNode与offsetParent区别

offsetParent  指与位置有关的上级元素  只读
parentNode  指与位置无关的上级元素   只读

function offsetTop(element){
		var top=element.offsetTop;
		var parent=element.offsetParent;
		while(parent!=null){
			top+=parent.offsetTop;
			parent=parent.offsetParent;
		}
		return top;
	}

  这个是获取元素到达顶部位置 其中offsetParent能不能替换为parentNode呢?

我试了一下是不行的,为什么呢?

offsetParent测试了一下最多获取到body元素,在往上获取就是null

console.log(document.getElementById(‘t‘).offsetParent);  /*如果整个页面就一个id=t的div获取到的是body,从body往上就是null*/

parentNode最多能获取到document文档对象

console.log(document.documentElement.parentNode);  //#document  在往上获取也是null

一开始想这不都是null么?怎么不行 但是返回值是NAN

原来

console.log(document.body.offsetTop);  /*输出是0,document.body表示body*/

再看

console.log(document.body.parentNode.offsetTop);/*输出0 ,document.body.parentNode表示html*/

  

console.log(document.body.parentNode.parentNode.offsetTop); /*输出undefined ,document.body.parentNode.parentNode表示document文档对象*/

因为

document.body.parentNode.parentNode不等于NUll

所以还是可以进入这个while循环 undefined+一个数字=NaN;

所以将offsetParent替换成parentNode是不行的,所以说offsetTop参考的元素应该是document文档对象

总结: offsetParent最多能获取到 body,再往上获取就是null

    parentNode最多能获取document文档对象再往上获取就是null

    能使用offsetTop属性的最顶级元素是html,如果用html的上一级document用了offsetTop返回undefined,所以offsetTop获取距离的参考元素应该是document文档对象

写到这回想定义的offsetTop()函数,是要在while中换个判断条件也行的哈,,但是多麻烦

时间: 2024-10-13 16:20:27

parentNode与offsetParent区别的相关文章

JS之parentNode与offsetParent

JS中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,element.parentNode,获取某一个元素的父节点,这里的父节点呢,只有一个,就是指的是最临近的直接父节点.比如我们经常会有这样的需求:一个列表,点击删除删除一列,如下: <ul id="list"> <li>我是沐晴<span>删除</spa

javascrip中parentNode和offsetParent之间的区别

首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute.relative.fixed 之一的元素. 在使用 offsetParent 属性获取父级对象时有以下两种情况:

parentNode和offsetParent的区别,仅仅只是定位相对不一样么

记得第一次遇到offsetParent的时候,是使用offset_left来计算到左边边界的距离,那个时候,两个元素计算到的距离差异太大,于是我就打印他们的offsetParent来测试,到看到他们的offsetParent的时候我是想破乳头也想不出为什么会这样,而网上的帖子也只是说了offsetParent的规律,我看了后也还不知道为什么会这样. 后面我知道定位的元素,会有一个相对偏移的父类,于是我就把元素的父类分成文档父类和相对父类(名称自创)这两种. 后面我再遇到关于z-index的问题,

parentNode,offsetParent

元素.parentNode : 父节点   只读 属性 当前节点的父级节点 没有兼容性问题 可放心使用 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload

parentNode和parentElement区别

parentNode跟parentElement除了前者是w3c标准,后者只ie支持 当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null 一般情况parentNode可以取代parentElement的所有功能 parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况.element是包含在node里的,它的nodeType是1

js里用append()和appendChild有什么区别?

parentNode.append()是还在试用期的方法,有兼容问题.是在parendNode节点中最后一个子节点后插入新Node或者DOMString(字符串,插入后为Text节点). 与parentNode.appendChild()的区别在于:parentNode.append()可以同时传入多个节点或字符串,没有返回值:而parentNode.appendChild()只能传一个节点,且不直接支持传字符串(需要parentNode.appendChild(document.createT

前端知识点总结

1.前端性能优化.前端技术架构.调试.前端安全性问题.前端兼容性问题.nodejs.移动端开发.HTML5/CSS3.正则表达式.web前端的瓶颈(兼容性.组件(框架)不够完善等): 2.getElementByTagName返回一个伪数组:HTML Collection: 3.getElementById只能是document.getElementById, createElement只能是document.createElement; 4.Nodelist也是一个伪数组: 5.getElem

JavaScript中的DOM及相关操作

一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,而树形结构就是我们常说的DOM树. 维基百科中介绍DOM更为准确:DOM是一种跨平台和语言非依赖性的应用程序编程接口,即处理现在的HTML,XHTML或XML文档作为树结构,其中每个节点是一个对象,每个节点表示

Web前端总结(小伙伴的)

以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing:指字母间距 word-spacing:指单词间距 2.列举常见的复合属性(常见的17种,有可能结合js问): Background,Font,Border,Padding,Margin,list-style 3.img标签的属性alt和title的区别 Alt:图片加载不了的时候用以替代图片信息,同