父节点-3

上次通过父节点操作子节点,通过某个节点操作兄弟节点,这次要说的是通过子节点去操作父节点,还是这个DOM结构:

1
2
3
4
5
6
7
8
<body id="body">
<ul id="ul1">
<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>
</body>

咱们要这个DOM结构要干嘛呢?咱们要实现点击 a标签,也就是那个“隐藏”实现,隐藏掉点击所在的li。

1
2
3
4
5
6
7
var oA = document.getElementsByTagName('a');
for(var i=0;i<oA.length;i++){
oA[i].onclick = function (){
// 这个时候就可以用 parentNode: 元素.parentNode只读属性,当前节点的父级节点
this.parentNode.style.display = 'none';
};
}

点这里看demo1
其实父节点还有另外一个,offsetParent,那么offsetParent和parentNode有什么区别呢?
DOM结构如下:

1
2
3
4
5
6
7
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>

咱们给他一些样式,让结构更清晰些

1
2
3
4
div{padding: 40px 30px;}
#div1{background: #ccc;}
#div2{background: #777;}
#div3{background: #f60;}

做一些事情:

1
2
3
4
5
var oDiv3 = document.getElementById('div3');
// 咱们用刚才的parentNode看下div3的父级是哪个(当然很容易看出来了,div3的父级就是div2了)
alert(oDiv3.parentNode.id); // 弹出div2
// 那么offsetParent呢?他也是一个只读属性 元素.offsetParent
alert(oDiv3.offsetParent.id); // 弹出body

duang~duang~duang~ demo2在这里
那么,为什么offsetParent会弹出来body呢?咱们给div2加一个属性,改造下CSS代码

1
2
3
4
div{padding: 40px 30px;}
#div1{background: #ccc;}
#div2{background: #777;position: relative;}
#div3{background: #f60;}

再次弹出来看下div3的父级

1
2
var oDiv3 = document.getElementById('div3');
alert(oDiv3.offsetParent.id); // 弹出 div2

demo3
所以,咱们可以得出一个结论,offsetParent:离当前元素最近有定位属性的父节点,如果没有定位父级的情况下,默认是body
IE7以下,如果当前元素没有定位,默认是body。如果有定位则是HTML;如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上,比如给div2加了 zomm: 1,那么div3的offsetParent就变成了div2

未完待续……