元素.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. java大数取模

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1214 用java写大数果然是方便多了! import java.math.BigInt ...

  2. C#写Windows Service(windows服务程序)

    背景:        要学习使用一个新东西,我们必须知道他是个什么东西.对于我们此次研究的windows服务来说,他又是个什么东西,其实也没有什么高深的了. windows service概述: 一个 ...

  3. 偷师--先留着。。ssh，nginx，防火墙相关命令

  4. windows进程中的内存结构[转载]

    在阅读本文之前,如果你连堆栈是什么多不知道的话,请先阅读文章后面的基础知识. 接触过编程的人都知道,高级语言都能通过变量名来访问内存中的数据.那么这些变量在内存中是如何存放的呢?程序又是如何使用这些变 ...

  5. c#基础系列（转）

    转:http://www.cnblogs.com/landeanfen/p/4953025.html C#基础系列——一场风花雪月的邂逅:接口和抽象类 前言:最近一个认识的朋友准备转行做编程,看他自己 ...

  6. jQuery事件和JavaScript事件

    1.JavaScript事件: 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内 ...

  7. hdu4968

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4968 说是考dp,但是我没出来dp在哪,可能贪心思想更多一些吧. AC代码: #inclu ...

  8. eclipse下Android无法自动生成apk文件怎么办?

    eclipse下Android无法自动生成apk文件怎么办? 现象:创建android工程后,通过手动build/clean或自动build均无法在bin文件夹下生成.apk文件 解决方法:进入win ...

  9. C#中js文本提示

    Page.ClientScript 与 ClientScript 的关系 这二者实际上是一个东西,后者只是省略了 Page.都是获取用于管理脚本.注册脚本和向页添加脚本的 ClientScriptMa ...

  10. Optimizing Performance: Data Binding(zz)

    Optimizing Performance: Data Binding .NET Framework 4.5 Other Versions   Windows Presentation Founda ...