parentNode,parentElement,offsetParent区别

parentNode与parentElement同义,但是parentElement不是w3c规范的。这里主要讨论parentNode,offsetParent的区别:

引用网上的介绍:

offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element。
例如:
  <BODY>
  <div   style="border:   1px   solid   black;position:absolute;"> 
  <form> 
  <input   type="checkbox"   id="cc"> 
  </form> 
  </div> 
这个例子中,“cc”元素的offsetParent是div,如果去掉div的position属性,那么cc的offsetParent就会变为body。而parentElement一直都为form。
与此相关的还有offsetLeft和offsetTop两种属性,他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。 

另外的例子是table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head></head>
	<script type="text/javascript">
		window.onload = function(){
			var el = document.getElementById('t2');
			alert(el.offsetParent.id);
		};	
	</script>
	<body style="width: 1000px;">
		<table id="tb">
			<tr id="tr1"><td>t1</td></tr>
			<tr id="tr2"><td id="t2">t2</td></tr>
		</table>
	</body>
</html>

可以看到td的offsetParent直接是table。


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1