children与childNodes的区别

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

原创最新推荐文章于 2023-08-26 11:28:14 发布 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#childNodes #children #childNodes与children

杂物间专栏收录该内容

19 篇文章

订阅专栏

本文详细解释了DOM中childNodes与children属性的区别。通过实例演示childNodes如何返回所有子节点，包括空白文本节点，而children仅返回元素节点。对于希望精确控制DOM遍历的开发者来说，了解这些细微差别至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

乍一看感觉一样平时用的时候也没怎么留意

其实区别还是有点儿大

传言啊这个 childNodes是正统属性亲生的

而这个children是野孩子

这个野孩子比较随意所以用它返回来的就只有DOM元素了其他的文字啥的都不返回

而 childNodes比较讲究事无巨细都要返回来

但是我还是觉得野孩子乖洒脱啊所以也获得了几乎所有浏览器的支持如果你想要DOM节点直接用野孩子就可以了

感觉有点儿偏心啊

为啥偏心呢？

这个亲生娃儿childNodes心太细了啥都给你返回来了

下面我们就举个例子

首先是野孩子的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"><div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").children);
		</script>
	</body>
</html>

上面的结果只返回三个div 数组长度是3 换成childNodes也一样因为没有文本元素啊

但是别着急换种写法问题就出来了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"> <div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").children);
		</script>
	</body>
</html>

不知道有没有看出来上面两端代码的区别我在那个father后面加了个空格结果呢

childNodes就返回来了四个长度的数组 ....好吧很乖

还有更奇葩的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father">
			<div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").childNodes);
		</script>
	</body>
</html>

不知道各位看出区别来了没有

我加了个换行符

结果又给我返回来了四个长度的数组妈呀换行也算啊

如果你说我就想用亲儿子但是呢又不想让他返回换行元素就只能按照下面这么来写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"
			><div>01</div
			><div>02</div
			><div>03</div
		></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").childNodes);
		</script>
	</body>
</html>

好吧这还是我认识的DOM吗

算了还是要私生子好了