title: Difference between HTMLCollection, NodeLists, and arrays of objects
body: <p>I've always been confused between HTMLCollections, objects, and arrays when it comes to DOM.  For instance...</p>
  <ol>
  <li>What is the difference between <code>document.getElementsByTagName(&quot;td&quot;)</code> and <code>$(&quot;td&quot;)</code>?</li>
  <li><code>$(&quot;#myTable&quot;)</code> and <code>$(&quot;td&quot;)</code> are objects (jQuery objects).  Why is console.log also showing the array of DOM elements beside them, and are they not objects and not an array?</li>
  <li>What is the elusive &quot;NodeLists&quot; all about, and how do I select one?</li>
  </ol>
  <p>Please also provide any interpretation of the below script.</p>
  <pre class="lang-js prettyprint-override"><code>[123,&quot;abc&quot;,321,&quot;cba&quot;]=[123,&quot;abc&quot;,321,&quot;cba&quot;]
  {123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=Object { 123=123, abc=&quot;abc&quot;, 321=321, more...}
  Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
  document.links= HTMLCollection[a #, a #]
  document.getElementById(&quot;myTable&quot;)= &lt;table id=&quot;myTable&quot;&gt;
  document.getElementsByClassName(&quot;myRow&quot;)= HTMLCollection[tr.myRow, tr.myRow]
  document.getElementsByTagName(&quot;td&quot;)= HTMLCollection[td, td, td, td]
  $(&quot;#myTable&quot;)= Object[table#myTable]
  $(&quot;td&quot;)= Object[td, td, td, td]
  
  
  &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
      &lt;head&gt; 
          &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot; /&gt; 
          &lt;title&gt;Collections?&lt;/title&gt;  
          &lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
          &lt;script type=&quot;text/javascript&quot;&gt;
              $(function(){
                  console.log('[123,&quot;abc&quot;,321,&quot;cba&quot;]=',[123,&quot;abc&quot;,321,&quot;cba&quot;]);
                  console.log('{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=',{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;});
                  console.log('Node=',Node);
                  console.log('document.links=',document.links);
                  console.log('document.getElementById(&quot;myTable&quot;)=',document.getElementById(&quot;myTable&quot;));
                  console.log('document.getElementsByClassName(&quot;myRow&quot;)=',document.getElementsByClassName(&quot;myRow&quot;))
                  console.log('document.getElementsByTagName(&quot;td&quot;)=',document.getElementsByTagName(&quot;td&quot;));
                  console.log('$(&quot;#myTable&quot;)=',$(&quot;#myTable&quot;));
                  console.log('$(&quot;td&quot;)=',$(&quot;td&quot;));
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;a href=&quot;#&quot;&gt;Link1&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Link2&lt;/a&gt;
          &lt;table id=&quot;myTable&quot;&gt;
              &lt;tr class=&quot;myRow&quot;&gt;&lt;td&gt;td11&lt;/td&gt;&lt;td&gt;td12&lt;/td&gt;&lt;/tr&gt;
              &lt;tr class=&quot;myRow&quot;&gt;&lt;td&gt;td21&lt;/td&gt;&lt;td&gt;td22&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>