javascript - DOM 中缺少子节点

Question

我正在使用 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]);

最终输出:

9
#text
<h2>​Page Title​</h2>​
#text
<h3>​Article Heading​</h3>​
#text
<p>​First Paragraph​</p>​
#text
<p>​Second Paragraph​</p>​
#text

其余段落在哪里？我设法使用检索元素document.querySelector(".main > h3") 或使用 querySelectorAll 但我对这里发生的事情的逻辑解释感兴趣？

Answer 1

那是因为您正在读取 childElementCount，它是 nodeType 为 1 的 childNodes 的计数，并且您正在读取所有 childNodes 在循环中，它还返回 nodeType 为 3 的 textNode。您应该在循环中使用 children 属性而不是 childNodes。