JavaScript操作DOM元素的childNodes和children区别
更新时间：2015年04月01日 08:55:08 投稿：junjie
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。
具体看一下针对children和childNodes在chrome环境下的测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1" class="div">
<span id="s1" class="sp" lang="zh-cn">
</span>
</div>
</body>
<script type="text/javascript">
function test() {
var o = document.getElementById("div1");
var child = o.children;
console.log("div1.children运行结果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
console.log("");
child = o.childNodes;
console.log("div1.childNodes运行结果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
}
test();
</script>
</html>
测试结果如下：
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
上面childNodes集合的结果中有两个undefined节点，这连个就是nodeType=3的TextNode。
如果把HTML代码写成如下样式，那么children和childNodes的结果就没有差别了。
<body> <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body>
对document、head、body及div等HTML元素实测未发现有其他差异
相关文章
JavaScript实现仿微博的图片拖动特效，貌似这些天有不少朋友需要这功能，今天发现这款是js制作的好，不敢独享，希望需要的朋友喜欢哦。2015-05-05
这篇文章主要为大家详细介绍了小程序实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家详细介绍了JavaScript实现楼层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
这篇文章主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。2017-06-06
这篇文章主要给大家介绍了关于如何利用原生JS实现data方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用原生JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
js获取当前年月日时分秒的方法实例(new Date()/moment.js)
JavaScript是一种流行的编程语言,它可以用来获取当前年月日,这篇文章主要给大家介绍了关于js获取当前年月日时分秒的相关资料,分别使用的是new Date()/moment.js,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了js实现滑动门效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
本文是在Web中通过Javascript判断键盘按键事件，并改变按键的默认动作。2009-02-02
本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-02-02
IE和FireFox之间常用函数的区别小结，需要的朋友可以参考下。2010-03-03
最新评论