JavaScript中childNodes默认格式问题

最新推荐文章于 2024-05-13 13:37:50 发布

King_960725

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量357

点赞数

分类专栏： JS 文章标签： childNodes

本文链接：https://blog.csdn.net/weixin_42566993/article/details/96499001

版权

JS 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

先看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function(){
			console.log(document.body.childNodes);
		}
	</script>
</head>
<body><div></div></body>
</html>

看上面的代码，一开始我觉得body的childNodes应该只有一个div标签的，因为childNodes表示的子节点的NodeList，但是结果并不是我想的那样。运行结果如下图：
在这里插入图片描述
看到这个结果我就有点蒙圈了，明明body里面就只有一个div，但是怎么会有个text文本节点呢？于是我改变了下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function(){
			console.log(document.body.childNodes);
		}
	</script>
</head>
<body><div></div>
</body>
</html>

我给div和body结束标签之间加了个回车，查看结果：
在这里插入图片描述
我的天，怎么结果是一样的！！于是我又改变了一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function(){
			console.log(document.body.childNodes);
		}
	</script>
</head>
<body><div></div></body></html>

我将html结束标签与body标签放在了同一行，查看结果：
在这里插入图片描述
发现终于只有一个div标签了。

归纳总结：默认情况下，在body与其最后一个子节点之间没有空格或换行时，如果body后面的html结束标签和body不在一行的情况下，body中的childNodes会把body结束标签与html结束标签之间的文本节点也放进去。
而在在body与其最后一个子节点之间有空格或换行时，这个奇怪的行为就会自动消除，此时body中的childNodes就会按照其内部的子节点个数存储。
所以以后如果想只获取body里面某个节点的childNodes时，记得让body的结束标签与html的结束标签放在同一行！！！

King_960725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中childNodes默认格式问题

默认情况下，在body与其最后一个子节点之间没有空格或换行时，如果body后面的html结束标签和body不在一行的情况下，body中的childNodes会把body结束标签与html结束标签之间的文本节点也放进去。
复制链接

扫一扫