DOM元素的childNodes和children的区别

最新推荐文章于 2022-07-11 12:21:42 发布

mole

最新推荐文章于 2022-07-11 12:21:42 发布

阅读量1.8k

点赞数

分类专栏： JavaScript HTML 文章标签： JavaScript children childNodes

未经本人同意，禁止复制文章内容

本文链接：https://blog.csdn.net/mole/article/details/42873595

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

对于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元素实测未发现有其他差异

mole

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素的childNodes和children的区别

对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。具体看一下针对children和childNodes在chrome环境下的测试：
复制链接

扫一扫