DOM-->父节点

父节点

parentNode

parentNode属性返回当前节点的父节点

它的父节点只可能是三种类型:

  • element节点
  • document节点
  • documentfragment节点

对于document节点和documentfragment节点,它们的父节点都是null。

另外,对于那些生成后还没插入DOM树的节点,父节点也是null。

<ul id="list">
    <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>
<script>
var aArr = document.getElementsByTagName('a');
for(var i=0; i<aArr.length; i++){
    aArr[i].onclick = function(){
        this.parentNode.style.display = 'node';
    }
}

</script>

offsetParent

离当前元素最近的一个有定位属性(position: relative| absolute | fixed)的父节点,

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

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

ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上

layout:

一种触发方式:

div{
    zoom: 1;
}

再ie下判断一个元素是否触发了layout

alert( document.getElementById('div2').currentStyle.hasLayout );
<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green; zoom: 1;}
#div3 {background: orange;}
</style>
<body id="body1">
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

<script>
alert( oDiv3.offsetParent.id );
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值...
    吴博阅读 504评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,790评论 0 8
  • 什么是DOM??? DOM(Document Object Model 文档对象模型)是针对HTML和XML文档的...
    荧惑3_3阅读 1,408评论 0 1
  • 首先要了解客户的真实需求 首先要清楚客户的真正需求,尽管这并不是一件容易的事。你介绍的而不是单纯的家装方案,你要清...
    洒洒666阅读 723评论 0 0