javascript - 什么是意外的文本节点？

Question

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

1.这个文本节点来自哪里？

1. 这些文本节点是内置的吗？它们的必要性是什么？

2. 他们的规则是什么？

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

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

Answer 1

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

childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead.

如果您不明白我的意思，请查看以下代码段的输出:

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 代码之间可能会有所不同，这可能会让您有些头疼。