一、parentNode
元素.parentNode ：父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取父元素</title>
<script>
window.onload = function () {
//1、第一种方法：不获取父元素
/*
var aHide = document.getElementsByTagName('a');
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aHide.length;i++){
aHide[i].index = i;
aHide[i].onclick = function () {
aLi[this.index].childNodes[0].nodeValue = '';
}
}
*/
//2、第二种方法：元素.parentNode ：父节点
var aHide = document.getElementsByTagName('a');
for(var i=0;i<aHide.length;i++){
aHide[i].onclick = function () {
/* body... */
this.parentNode.childNodes[0].nodeValue = '';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>111 <a href="javascript:;">hide</a></li>
<li>222 <a href="javascript:;">hide</a></li>
<li>333 <a href="javascript:;">hide</a></li>
<li>444 <a href="javascript:;">hide</a></li>
</ul>
</body>
</html>
二、offsetParent
元素.offsetParent ：只读属性 离当前元素最近的一个有定位属性的父节点，如果没有定位父级，默认是body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取父元素2（offsetParent）</title>
<style>
div{
padding: 30px 30px;
}
#div1{
background-color: red;
}
#div2{
background-color: blue;
/* position: relative; */
/* zoom: 1; */
}
#div3{
background-color: yellow;
/* position: relative; */
}
</style>
<script>
window.onload = function () {
var oDiv3 = document.getElementById('div3');
//两种父元素
//alert(oDiv3.parentNode.id);//div2
//alert(oDiv3.offsetParent.tagName);//BODY ? HTML(ie7及以下)
//alert(oDiv3.offsetParent.id);
/*
元素.offsetParent ：只读属性 离当前元素最近的一个有定位属性
的父节点，如果没有定位父级，默认是body
ie7及以下，如果当前元素有定位，则默认父级是HTML
ie7及以下，如果当前元素的某个父级触发了hasLayout，那么offsetParent就会指向
这个触发了hasLayout的父级元素。
*/
//alert(document.getElementById('div2').currentStyle.hasLayout);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>
</html>
网友评论