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中换个判断条件也行的哈，，但是多麻烦