title: How to iterate through HTMLCollection in Javascript
body: <p>I am using:</p>
  
  <pre><code>var links = document.getElementsByTagName('a');
  </code></pre>
  
  <p>to get all links on the page. We need to modify a few.</p>
  
  <p>if I console log links, I get an HTMLCollection of 100+ a elements.
  If I console log links.length, it's 0. </p>
  
  <p>I've tried everything I can find to convert this to an array but nothing is working.</p>
  
  <p><code>Array.from(links)</code></p>
  
  <p><code>Array.prototype.slice.call(links)</code></p>
  
  <p><code>[].forEach.call(links, function (el) {...});</code></p>
  
  <p><code>HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];</code></p>
  
  <p><code>HTMLCollection.prototype.forEach = Array.prototype.forEach;</code></p>
  
  <p>These all produce an empty array.</p>
  
  <p>Additionally <code>var links = document.querySelectorAll('a');</code> produces an empty NodeList.</p>
  
  <p>I've run out of options. The initial links variable is very much not empty. So I don't understand why all of these suggested options don't work. Additionally, jQuery is not an option for us.</p>