javascript中childNodes与children的区别

最新推荐文章于 2023-08-26 11:28:14 发布

木子木木的专栏

最新推荐文章于 2023-08-26 11:28:14 发布

阅读量780

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_37029814/article/details/84799321

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文深入解析了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>