循环的childNodes失败并带有空格

Question

我的部分脚本需要遍历一些childNodes并改变它们的样式。非常直截了当。但是我注意到如果我的标记包含任何空格，则循环将完全停止。

我的Html

<p id="group">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</p>

我的Javascript

var parent = document.getElementById("group"),
    children = parent.childNodes,
    i

for (i = 0; i < children.length; i += 1) {
  children[i].style.background = "red"
  console.log(i)
}

运行此脚本会产生此错误：

Uncaught TypeError: Cannot set property 'background' of undefined(…)

但是如果html被压缩了......

<p id="group"><span>1</span><span>2</span><span>3</span></p>

然后一切都很完美。 这对我来说很奇怪。当然我可以压缩html并将其称为一天，但我想了解为什么会发生这种情况。