元素.parentNode : 父节点   只读 属性 当前节点的父级节点 没有兼容性问题 可放心使用

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload = function() {

    var aA = document.getElementsByTagName('a');

    for (var i=0; i<aA.length; i++) {

        aA[i].onclick = function() {

            this.parentNode.style.display = 'none';

        }

    }

}

</script>

</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>

</html>

元素.offsetParent : 只读 属性

如果没有定位父级，默认是body

<!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( oDiv3.parentNode.id );//弹出div2

    alert( oDiv3.offsetParent.id );//弹出body1

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

如果有定位父级则弹出父级  若定位多个父级   则弹出离当前元素最近的一个有定位属性的父节点

<!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; position: relative}

#div2 {background: green;position: relative}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

    var oDiv3 = document.getElementById('div3');

    alert( oDiv3.offsetParent.id );//弹出div2
 } </script> </head> <body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html> </html>

ie7以下，如果当前元素没有定位默认是body，如果有定位则是html

<!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;position: relative}

</style>

<script>

window.onload = function() {

    var oDiv3 = document.getElementById('div3');

    //alert( oDiv3.parentNode.id );//弹出div2

    alert( oDiv3.offsetParent.tagName );//ie7弹出html IE8以上弹出body

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

</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; zoom: 1;}

#div2 {background: green;}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

    var oDiv3 = document.getElementById('div3');

    alert( oDiv3.offsetParent.id );//ie7以下弹出的是div1,其他的弹出是BODY1

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

parentNode，offsetParent的更多相关文章

  1. javascrip中parentNode和offsetParent之间的区别

    首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...

  2. DOM之parentNode与offsetParent

    DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...

  3. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. parentNode，parentElement,offsetParent

    offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div sty ...

  5. offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像O ...

  6. JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性，这个属性是什么？

    原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...

  7. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  8. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...

  9. 1.offsetParent,offsetLeft,offsetTop

    offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. Codeforces Round #161 (Div. 2) D. Cycle in Graph(无向图中找指定长度的简单环)

    题目链接:http://codeforces.com/problemset/problem/263/D 思路:一遍dfs即可,dp[u]表示当前遍历到节点u的长度,对于节点u的邻接点v,如果v没有被访 ...

  2. javase基础笔记3——this关键字和内存图

    什么是面向对象? 面向过程. 面向过程:解决一个问题的思路和方法以及步骤 面向对象:把一些具有相同特征的问题抽象成一个对象,用""""对象.方法()" ...

  3. 遍历进程活动链表（ActiveProcessLinks）、DKOM隐藏进程

    1.EPROCESS结构体 EPROCESS块来表示.EPROCESS块中不仅包含了进程相关了很多信息,还有很多指向其他相关结构数据结构的指针.例如每一个进程里面都至少有一个ETHREAD块表示的线程 ...

  4. LoadRunner 场景运行error的几种情况

    一. Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set th ...

  5. this对象

    this对象   1.纯粹的函数调用 function test(){ this.x = 1; alert(this.x); } test();//1 2.函数作为某个对象的方法进行调用,这是this ...

  6. BestCoder Round #72 (div.2)

    后面的题目补不懂了 暴力 1001 Clarke and chemistry 这题也把我搞死了..枚举系数判断就行了 #include <cstdio> #include <algo ...

  7. BFS(八数码) POJ 1077 || HDOJ 1043 Eight

    题目传送门1 2 题意:从无序到有序移动的方案,即最后成1 2 3 4 5 6 7 8 0 分析:八数码经典问题.POJ是一次,HDOJ是多次.因为康托展开还不会,也写不了什么,HDOJ需要从最后的状 ...

  8. underscore.js依赖库函数分析二（查找）

    查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素 ...

  9. ssh An internal error occured during "Add Deployment"

    这个问题一般是由于导入别人做的项目,但是项目所用的jdk跟当前所用的jdk不一样. 以前遇到过这个问题没有解决,今天解决了. 右键项目名→Properties→Java Build Path→Libr ...

  10. PE的一些水 3-50

    T3: 分解质因数. lalala T4: 暴模. 然而数学方法怎么搞?---->也就是怎么手算?... 于是看了一下讨论区...发现原来我的数学已经低于小学生水平了... 我们把答案abccb ...