Javascript DOM中缺少子节点

我正在使用DOM检索类名为“main”的元素节点的子节点，如下面的html代码段所示。 在我看来，父元素下有9个子元素。但我很惊讶 通过子节点值。有人对下面的输出有解释吗

<section class="main">
 <h2>Page Title</h2>
 <h3>Article Heading</h3>
 <p>First Paragraph</p>
 <p>Second Paragraph</p>
 <p>Third Paragraph</p>
 <p>Fourth Paragraph</p>
 <h3>Instructions</h3>
 <p>Fifth Paragraph</p>
 <p>Sixth Paragraph</p>
</section>

页面标题
文章标题
第一段

第二段

第三段

第四段

说明书
第五段

第六段

JS代码：

var articleHeadElemNode = document.querySelector(".main");
console.log(articleHeadElemNode.childElementCount);

for (i =0; i<articleHeadElemNode.childElementCount ; i++ )
  console.log(articleHeadElemNode.childNodes[i]);

var-articleHeadElemNode=document.querySelector（“.main”）；
log（ArticleHeadElementNode.childElementCount）；
对于（i=0；i您最好使用for子元素。仅返回元素节点子元素，而将返回所有节点子元素：

for(var i = 0; i < articleHeadElemNode.childElementCount; i++)
  console.log(articleHeadElemNode.children[i]);

for（变量i=0；i

.
这是因为您正在读取
childElementCount
，这是具有
nodeType
的
1
的子节点的计数，并且您正在读取循环中的所有
ChildNode
，该循环还返回具有
nodeType
的
3
的
的
文本节点。您应该使用
children属性而不是
childNodes
我希望我有9个子节点元素，从页面标题开始到第六段，这些文本节点来自何处？@WaelShowair标记中的这些元素、空格和其他不可见字符。您可以删除它们并检查差异。谢谢或者你的答案。我知道我可以用children来代替。我想了解一下输出的解释：我希望从页面标题到第六段有9个子节点元素，这些文本节点来自哪里？为什么其余的html标记不作为子节点包含？
for(var i = 0; i < articleHeadElemNode.childElementCount; i++)
  console.log(articleHeadElemNode.children[i]);