parentNode，parentElement,offsetParent区别

10 Aug 2011 in Web前端 on web html css 前端 - Hits()

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。