title: How do you get elements from a javascript HTMLCollection
body: <p>I can't understand why I cant get elements from a HtmlCollection. This code example:</p>
  
  <pre><code> var col = (document.getElementsByClassName("jcrop-holder"));
   console.log(col);
  </code></pre>
  
  <p>produces this output on console:</p>
  
  <p><a href="https://i.stack.imgur.com/yjZUC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yjZUC.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to get the dic.jcrop-holder object but i cant get it from my variable col. None of this works:</p>
  
  <pre><code>  console.log(col[0]); // undefined
    console.log(col.item(0)); // null
  
    // check length of collection
  
    console.log(col.length); // 0
  </code></pre>
  
  <p>So if the length is 0 why does the console show a length of 1, as well as objects inside? When I open the node it contains children. What's going on?</p>
  
  <p>Here are some expanded nodes. I didn't expand div.jcrop.holder because it is too long. Here are children elements:</p>
  
  <p><a href="https://i.stack.imgur.com/RAzCz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RAzCz.png" alt="enter image description here"></a></p>