JavaScript中DOM元素的childNodes与children区别详解
本文深入解析JavaScript中DOM元素的childNodes与children属性的核心区别。通过Chrome环境下的实际测试代码，展示两者在获取子节点时的不同表现：children仅返回元素节点，排除文本节点；而childNodes包含所有子节点，包括隐藏的TextNode。文章提供具体HTML结构对比，说明在特定布局下两者结果可能一致，并总结了对document、head、body及div等常见元素的实测结论。
childNodes与children的核心区别
在DOM元素处理中，children属性返回的是DOM Object类型的子对象集合，它不包含标签之间隐式存在的TextNode（文本节点）；而childNodes属性则包含所有子节点，包括那些在标签之间隐式存在的TextNode对象。
Chrome环境下的测试验证
为了更直观地理解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节点，这两个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元素的实际测试，未发现其他显著差异。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40