parentNode,offsetParent

元素.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>

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

时间: 2024-11-05 02:21:46

parentNode,offsetParent的相关文章

parentNode和offsetParent的区别,仅仅只是定位相对不一样么

记得第一次遇到offsetParent的时候,是使用offset_left来计算到左边边界的距离,那个时候,两个元素计算到的距离差异太大,于是我就打印他们的offsetParent来测试,到看到他们的offsetParent的时候我是想破乳头也想不出为什么会这样,而网上的帖子也只是说了offsetParent的规律,我看了后也还不知道为什么会这样. 后面我知道定位的元素,会有一个相对偏移的父类,于是我就把元素的父类分成文档父类和相对父类(名称自创)这两种. 后面我再遇到关于z-index的问题,

JS之parentNode与offsetParent

JS中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,element.parentNode,获取某一个元素的父节点,这里的父节点呢,只有一个,就是指的是最临近的直接父节点.比如我们经常会有这样的需求:一个列表,点击删除删除一列,如下: <ul id="list"> <li>我是沐晴<span>删除</spa

javascrip中parentNode和offsetParent之间的区别

首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute.relative.fixed 之一的元素. 在使用 offsetParent 属性获取父级对象时有以下两种情况:

jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(tipContent);把提示控件加到body下 注意tipContent采用absolute定位,并设置top,left的值,当把tipContent加到body的最前面时,由于tipContent前面没有任何东西,因此它就是以body为基准根据top,left的值进行定位 $(this).offs

parentNode,parentElement,offsetParent

offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div style="border:1px solid black;position:absolute;"> <form> <input type="checkbox" id="cc"> </form> </div&

parentNode与offsetParent区别

offsetParent  指与位置有关的上级元素  只读parentNode  指与位置无关的上级元素   只读 function offsetTop(element){ var top=element.offsetTop; var parent=element.offsetParent; while(parent!=null){ top+=parent.offsetTop; parent=parent.offsetParent; } return top; } 这个是获取元素到达顶部位置 其

利用父子级来修改数据:previousSibling,parentNode,nextSibling

function adit(obj) { //var demoA = document.getElementById("operation"); var demoA = obj; var a = demoA.parentNode.previousSibling;//这个parentNode找到的是<td>标签的同一级父级点, //也就是其他两个<td>加空白, //previousSibling(这个是向上找同一父级点的子节点) while(a != null)

DOM BOM

DOM  document 操作页面的能力 获取元素:getElementByID()    getElementsByTagName()    getElementByClassName() 改变页面: innerHTML()  ,oDiv.style.color(), DOM树: 节点:文本节点,元素节点 获取节点 childNodes  ,因为兼容问题,可用NodeType 判断:  children ,则无兼容问题. parentNode,offsetParent(实际位置): firs

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM