javascript中childNodes与children的区别

本文深入解析了DOM操作中常用的属性如childNodes、children、parentNode和offsetParent的使用方法及浏览器兼容性问题,特别关注了不同场景下offsetParent的表现差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、childNodes:获取节点,不同浏览器表现不同;

IE:只获取元素节点;
  非IE:获取元素节点与文本节点;
  nodeType:节点类型 与childNodes配合使用;
  解决方案:if(oUl.childNodes.nodeType == 1) { …}
  
2、children:获取元素节点,浏览器表现相同。
建议使用children。

3、parentNode:获取父元素,不存在兼容性问题。
例:隐藏父级:

var aLi=document.getElementsByTagName('a');
for(var i=0;i<aLi.length;i++){
    aLi[i].onclick=function(){
        this.parentNode.style.display='none';
    }
}

4、offsetParent:获取第一个设置定位的父元素。
a,元素自身有fixed定位,offsetParent的结果为null:
当元素自身有fixed固定定位时,固定定位的元素相对于视口进行定位,此时没有定位父级, offsetParent的结果为null

firefox浏览器有兼容性问题

<div id="parent" style="position:fixed"></div>    
<script>
//firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null
console.log(parent.offsetParent);
</script>

b,元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为

<div id="parent"></div>    
<script>
console.log(parent.offsetParent);//<body>
</script>

c,元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

复制代码
<div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='parent'></div>    
    </div>    
</div>
<script>
console.log(parent.offsetParent);    //<div id="div1">
</script>

d,元素的parentNode是null

console.log(document.body.offsetParent);//null

f,IE7-浏览器Bug

当元素本身经过绝对定位或相对定位,且父级元素无经过定位的元素时,IE7-浏览器下,offsetParent是

<div id="parent" style="position:absolute;"></div>    
<script>
//IE7-浏览器返回<html>,其他浏览器返回<body>
console.log(parent.offsetParent);
</script>
----------------------------------------------------------------------------------------
<div id="parent" style="position:relative;"></div>    
<script>
//IE7-浏览器返回<html>,其他浏览器返回<body>
console.log(parent.offsetParent);
</script>
----------------------------------------------------------------------------------------
<div id="parent" style="position:fixed;"></div>    
<script>
//firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null
console.log(parent.offsetParent);
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值