##JavaScript中的childNodes和children节点

您所在的位置：网站首页 › 获取所有的子元素 › ##JavaScript中的childNodes和children节点

##JavaScript中的childNodes和children节点

2023-05-16 03:51| 来源: 网络整理| 查看: 265

##JavaScript中的childNodes和children节点原创

wx5b513ff79311e 2021-11-30 16:08:54 ©著作权

文章标签元素节点子节点解决方案 html 数组文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者wx5b513ff79311e的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、childNodes属性是用来获取任何一个元素的所有子元素，它是包含一个元素全部子元素的数组。返回元素节点、属性节点和文本节点。

（极端情况）：html的body中什么都不写；window.onload = function (){ var oBody = document.getElementsByTagName('body')[0]; var aChild = oBody.childNodes; alert(aChild.length); //1};

body元素默认有一个文本节点，如果在里面直接写文本，值仍为1。

如果添加两个div元素：

值为3，2个元素节点和一个文本节点（文本节点可以通过nodeType属性值为3确认）。

空格和换行符都会被解释为节点

节点数为7

利用nodeType输出body子节点的所有类型for(var i = 0; i < aChild.length; i++) { alert(aChild[i].nodeType); //3 1 3 1 3 1 3 }

2 、children 只返回元素节点

var oBody = document.getElementsByTagName('body')[0]; var aChild = oBody.children;

上述childNodes属性输出为7的情况下，利用children输出为3（只包含元素节点）

3、两者的不同

childNodes：不同浏览器获取不同

IE：只获取元素节点；

非IE：获取元素节点与文本节点；

解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

children：不同浏览器都是获取元素节点。

赞收藏评论分享举报

上一篇：小米商城 -- vue项目实战

下一篇：webpack中的重要设置

【本文地址】

##JavaScript中的childNodes和children节点

##JavaScript中的childNodes和children节点

今日新闻

推荐新闻