Looping childNodes fails with whitespace
<p>Part of my script needs to loop through some childNodes and alter their styles. Pretty straightforward. However I've noticed that if my markup contains any whitespace the loop will fail full stop.</p>

<p>My Html</p>

<pre><code>&lt;p id="group"&gt;
  &lt;span&gt;1&lt;/span&gt;
  &lt;span&gt;2&lt;/span&gt;
  &lt;span&gt;3&lt;/span&gt;
&lt;/p&gt;
</code></pre>

<p>My Javascript</p>

<pre><code>var parent = document.getElementById("group"),
    children = parent.childNodes,
    i

for (i = 0; i &lt; children.length; i += 1) {
  children[i].style.background = "red"
  console.log(i)
}
</code></pre>

<p>Running this script produces this error: </p>

<pre><code>Uncaught TypeError: Cannot set property 'background' of undefined(…)
</code></pre>

<p>But if the html is compressed...</p>

<pre><code>&lt;p id="group"&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;3&lt;/span&gt;&lt;/p&gt;
</code></pre>

<p>Then everything works perfectly.
This is just very strange to me. Of course I can just compress the html and call it a day, but I want to understand why this is happening in the first place..</p>