title: how to iterate on HTMLCollection?
body: <p>I have some elements in my HTML with class <code>node-item</code>, I access them in my component using:</p>
  
  <pre><code>let nodeItems = document.getElementsByClassName('node-item');
  </code></pre>
  
  <p>and when I log <code>nodeItems</code> it gives me a <code>HTMLCollection[]</code> with length 4.</p>
  
  <p>I tried many ways but still can't iterate on <code>nodeItems</code>:</p>
  
  <p><strong>1- first try</strong>:</p>
  
  <pre><code>let bar = [].slice.call(nodeItems);
  for (var g of bar){
      console.log(g); //gives me nothing
  } 
  </code></pre>
  
  <p><strong>2- second try</strong>:</p>
  
  <pre><code>for(let c of &lt;any&gt;nodeItems) {
      console.log(c); //gives me nothing
  }
  </code></pre>
  
  <p>And I tried array iteration and object iteration but still <code>undefined</code> or <code>error</code>. also tried:</p>
  
  <p><code>let nodeItems = document.querySelector(selectors);</code></p>
  
  <p>But same problems.</p>