元素.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. VPS -Digital Ocean -初试以及VPN的搭建

    首先恭喜你找到这篇博客,它会带你走出困境. 题外话(请忽略):一直以来想搞一个VPS,终于在自己的刺激下试了一下Digital Ocean,还没有使用很长时间不做太多评论,唯一给我的感觉是各种操作还算 ...

  2. 什么时候使用CountDownLatch

    正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...

  3. Linux查看可执行程序所在路径

    首先通过命令获得进程PID:如4285,然后执行下述命令 cd /proc/4285 ls -l 或直接ls -l /proc/4285 其中exe所在行即为可执行文件的全路经.如下图所示:

  4. DNS常用命令

    ipconfig/ifconfig    显示网络信息 nslookup host    查询域名对应的ip同时也显示了网关地址 cat /etc/resolv.conf    查看本地dns服务器地 ...

  5. coffeeScript学习02

    闭包 closure = do -> _private = "foo" -> _private console.log(closure()) #=> " ...

  6. 单机c1000k连接

    单机c1000k连接即单机实现百万连接,首先要注意的是连接是虚拟的逻辑的,连接最终落于 网卡,清晰概念才能更深入更清晰的想出问题的解决办法. 参考 http://www.ideawu.net/blog ...

  7. PHP 传值和传引用、传地址的区别

    传值,   是把实参的值赋值给行参   那么对行参的修改,不会影响实参的值   传地址   是传值的一种特殊方式,只是他传递的是地址,不是普通的如int   那么传地址以后,实参和行参都指向同一个对象 ...

  8. 【分块】【树上莫队】bzoj1086 bzoj3052

    1086 http://vfleaking.blog.163.com/blog/static/174807634201231684436977/ 3052 http://vfleaking.blog. ...

  9. BestCoder Round #72 (div.2)

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

  10. #ASP.NET Core 1.0 Key Features

    Cross platform support and flexible runtime engine(跨平台支持和灵活的运行时引擎) ASP.NET Core 1.0 offers support f ...