父节点
parentNode
parentNode属性返回当前节点的父节点
它的父节点只可能是三种类型:
- element节点
- document节点
- documentfragment节点
对于document节点和documentfragment节点,它们的父节点都是null。
另外,对于那些生成后还没插入DOM树的节点,父节点也是null。
<ul id="list">
<li>11111 <a href="javascript:;">隐藏</a></li>
<li>22222 <a href="javascript:;">隐藏</a></li>
<li>33333 <a href="javascript:;">隐藏</a></li>
<li>44444 <a href="javascript:;">隐藏</a></li>
</ul>
<script>
var aArr = document.getElementsByTagName('a');
for(var i=0; i<aArr.length; i++){
aArr[i].onclick = function(){
this.parentNode.style.display = 'node';
}
}
</script>
offsetParent
离当前元素最近的一个有定位属性(position: relative| absolute | fixed)的父节点,
如果没有定位父级,默认是body
ie7以下,如果当前元素没有定位默认是body,如果有定位则是html
ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上
layout:
一种触发方式:
div{
zoom: 1;
}
再ie下判断一个元素是否触发了layout
alert( document.getElementById('div2').currentStyle.hasLayout );
<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green; zoom: 1;}
#div3 {background: orange;}
</style>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
<script>
alert( oDiv3.offsetParent.id );
</script>