JavaScript中childNodes默认格式问题

先看一段代码：

<!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的结束标签放在同一行！！！

JavaScript中childNodes默认格式问题相关推荐

深入 JavaScript 中的默认参数！
译者:前端小智作者:Tania Rascia 来源:flatlogic.com 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitH ...
javascript中childNodes与children 区别以及firstChild与firstElementChild区别
1:childNodes属性: 标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
在JavaScript中使用“原型”还是“ this”？
之间有什么区别 var A = function () {this.x = function () {//do something}; }; 和 var A = function () { }; A. ...
Javascript中的valueOf与toString
基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...
现在JavaScript日期–如何在JavaScript中获取当前日期
Many applications you build will have some sort of a date component, whether it's the creation date ...
如何在 JavaScript 中获取当前日期
日常开发中我们经常会用到某种日期功能,比如内容的创建日期.活动的时间戳等.处理日期和时间戳格式可能会很麻烦.在本文中,我们将一起学习如何在 JavaScript中以各种格式获取当前日期. JavaSc ...
JavaScript 中获取当前日期
在我们开发的许多应用程序都会用到某种日期功能,无论是内容的创建日期还是活动的时间戳等等. 处理日期和时间戳格式可能会很麻烦.在本文中,我们将一起学习如何在 JavaScript 中以各种格式获取当前日 ...
JavaScript中实现函数重载和参数默认值
2019独角兽企业重金招聘Python工程师标准>>> 参数默认值是指在调用函数时,若省略了某个实参,函数会自动为该参数分配一个默认值,使得函数调用的方便性和灵活性大大提高. 举个例 ...

JavaScript中childNodes默认格式问题

JavaScript中childNodes默认格式问题相关推荐

最新文章

热门文章