parentNode和offsetParent的使用

元素.parentNode：只读属性，指当前元素的父级节点
offsetParent：只读属性离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body，有兼容性问题。

先上parentNode:
例一：点击隐藏

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<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>
<script>var oUl=document.getElementById("ul1");var aA=oUl.getElementsByTagName("a");for(var i=0;i<aA.length;i++){aA[i].onclick=function(){this.parentNode.style.display="none";}}
</script>
</html>

效果如下：经过测试parentNode没有什么兼容性问题，可以大胆使用。

offsetParent：只读属性离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
Ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
Ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

例二：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green; }
#div3 {background: orange;}
</style>
<script>
window.onload = function() {var oDiv3 = document.getElementById('div3');        alert("定位父级的id是："+ oDiv3.offsetParent.id +" "+"定位父级的节点是："+oDiv3.offsetParent.tagName);}
</script>
</head>
<body id="body1"><div id="div1"><div id="div2"><div id="div3"></div></div></div>
</body>
</html>

没有加定位父级的时候，在各下是这样的：定位父级默认是body。IE也一样。

下面我们给div3加上相对定位：

#div3{background: green; position：relative;}

在chrome，safari，firefox和标准的ＩＥ下是这样滴：

在我们的老祖宗IE6下……呵呵呵呵。

再来，给div2加上zoom（触发haslayout），把div3的相对定位去掉：

 #div2 {background: green;zoom:1; }

在IE6下又是这样的（在标准浏览器下是正常的，指向body）：

原因，在IE6下有一套叫做haslayout的东西（其实好多CSS的兼容性问题都是这个东东引起的）。

综上，parentNote和offsetParent的区别是：parentNote指当前元素的父级，offsetParent则是指当前元素最近的定位父级，存在很多兼容性问题，且用且谨慎。

parentNode和offsetParent的使用相关推荐

DOM之parentNode与offsetParent
DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...
parentNode和offsetParent的区别
parentNode:直接父级 offsetParent:类似于css的包含块(根据本身定位及父级定位来确认offsetParent的目标元素) offsetParent的作用: offset ...
parentNode与offsetParent区别
offsetParent 指与位置有关的上级元素只读 parentNode 指与位置无关的上级元素只读 offsetParent直接的将是影响元素位置的上级element,而parent ...
offsetParent
网上对offsetParent和parentNode差异的解释都是同一篇文章千篇一律,讲的不是很清楚. offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了通过getB ...
offsetParent 详解
网上对offsetParent和parentNode差异的解释都是同一篇文章千篇一律,讲的不是很清楚. offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了通过getB ...
offsetParent、getBoundingClientRect与其他位置相关属性
offsetParent.getBoundingClientRect与其他位置相关属性写在前面:本文章中的代码演示,默认清除的了 body 和 html 的 margin.padding. 定位父级 ...
前端招聘与前端卖身的困境
最近开始物色新公司,群里来了个招人的,说2.5万招高手.在众人的怂恿下,发了简历. 但结果是不如意的,经过他们一小时的评测,他们认为我的水平不过8k-10k,税前.我吐血了,还远低于我原来的呢,更何况 ...
js 在html中新建个节点,javascript节点是什么？
JavaScript中的节点是页面中所有的内容(标签.属性.文本(文字.换行.空格.回车)),Node. 我们常用的节点标签:元素节点(标签) 文本节点属性节点(标签里的属性) 节点的获取元素节点 ...
零散的JavaScript公用方法
function stopBubble(e) { if (e && e.stopPropagation) {//如果传入了事件对象,那么就是非IE浏览器 e.stopPropagati ...

parentNode和offsetParent的使用

parentNode和offsetParent的使用相关推荐

最新文章

热门文章