为什么 childNodes 计数大于预期？答案

【问题标题】：Why is the childNodes count is greater than expected?为什么 childNodes 计数大于预期？
【发布时间】：2018-03-23 06:47:00
【问题描述】：

我有一个关于 DOM 的问题。考虑以下 javascript 代码，输出将是 5。

<body>
    <p>Hello</p>
<script>
    function countBody() {
        var childs = document.getElementsByTagName("body")[0].childNodes;
        alert(childs.length);
    }
    window.onload = countBody;
</script>
</body>

由于我有两个元素节点和两个文本节点，那么第 5 个节点是什么？

【问题讨论】：

我数了五个 childNode：<p> 之前的空格、<p> 本身、它和<script> 之间的空格、脚本以及脚本之后的空格。
为什么不编写额外的代码来遍历节点并记录它们的类型和内容？
遍历孩子们看看.....for( var i=0; i<childs.length; i++) console.log(childs[i])
顺便说一句，您可以通过请求节点对象的 .childElementCount 属性来获取仅元素（而非文本）子项的数量，在这种情况下我希望为 2。

标签： javascript dom

【解决方案1】：

自己检查一下吧：

<body>
  <p>Hello</p>
  <script>
      function countBody() {
          var childs = document.getElementsByTagName("body")[0].childNodes;
          console.log([].map.call(childs, function (node) { return node.textContent; }));
      }
      window.onload = countBody;
  </script>
</body>

您在计数时错过了一个文本节点。请注意，sn-p 的输出将与您提供的代码不同。

【讨论】：

【解决方案2】：

你有三个文本节点。

正文开始标记和段落之间。
在段落和脚本之间。
脚本和正文结束标签之间

...您可以循环查看 childNodes 和 console.log() 每个值。

【讨论】：