title: Why can’t I itertate through children of an HTML element?
body: <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow noreferrer">MDN</a>, a <code>HTMLCollection</code>, which the <code>children</code> property of an Element happen to be, is an “array-like object”. OK, so let’s try to iterate through it:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>for(var par in document.getElementById("Container").children)
    document.getElementById("Results").innerHTML +=
      par.id+"&lt;br&gt;"</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Container"&gt;
    &lt;p id="Par1"&gt;&lt;/p&gt;
    &lt;p id="Par2"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p id="Results"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>First of all, why am I shown 5 lines instead of 2, one per each paragraph? Then, why do I get <code>undefined</code>s instead of <code>Par1</code> and <code>Par2</code>?</p>
  
  <p>Oddly enough, looping through its indexes works as expected:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cont = document.getElementById("Container");
  for(var i = 0; i &lt; cont.children.length; i++)
    document.getElementById("Results").innerHTML +=
      cont.children[i].id+"&lt;br&gt;";</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Container"&gt;
    &lt;p id="Par1"&gt;&lt;/p&gt;
    &lt;p id="Par2"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p id="Results"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do I fail to understand?</p>