什么是意外的文本节点？

Question

我有一个仅包含一个子元素的父元素，据我所知，该父元素有一个子节点，但在控制台中有三个节点，其中两个是文本节点。在这张图片中很清楚。 现在我的问题是：

1。此文本节点来自哪里？

1. 这些文本节点是否内置？他们有什么必要？

2. 它们的规则是什么？

var container = document.getElementById('container');
var chlds = container.childNodes;
console.log(chlds);

<div id="container">
  <div id='test'></div>
</div>

Answer 1

childNodes中的两个是换行符。来自MDN：

  

childNodes包括所有子节点，包括非元素节点，例如文本和注释节点。要获取仅元素的集合，请改用ParentNode.children。

如果您不明白我的意思，请参见以下代码片段的输出：

var container = document.getElementById('container');
var chlds = container.childNodes;
chlds.forEach(c => console.log(c.nodeName + ":" + c.innerText));

<div id="container">
  <div id='test'></div>
</div>

要回答您的后续问题，由于文档具有换行符（或其他非元素标记），因此文本节点即存在于文档中。 children是获取元素的子节点的可靠得多的方法，因为childNodes的输出会在未最小化和最小化的HTML代码之间变化，这可能会引起您的麻烦。