HTMLCollection and NodeList
<p>Hello I have a problem where I am trying to grab all images so I can loop through them and add the event handlers below:</p>

<pre><code>  addEventListener('dragstart', handleDragStart, false);
  addEventListener('dragenter', handleDragEnter, false);
  addEventListener('dragover', handleDragOver, false);
  addEventListener('dragleave', handleDragLeave, false);
</code></pre>

<p>I am a little puzzled because I have tried getelementbyid to get the section area where all the images dynamically populate through AJAX.  Now in terms of querySelectorAl
l() doesn't seem to grab anything.  I am assuming I am just using this wrong.  Maybe it does not respond to tags.  But I tried with getElementsByTagName and it seems to grab everything and put it into an HTMLCollection.  Yet the HTML Collection's length is 0.  Is there a best practice way using Javascript (not jquery) to get these event handlers attached to each IMG?  I am at a lost here how to grab and then manipulate them.  .length does not seem to work and i'm not used to HTMLCollection which it seems is what I am getting.</p>

<pre><code>var imagesContainer = document.getElementById("images");

var allImages = document.querySelectorAll('#images img');
console.log(allImages);
console.log(allImages.length);

var allImages2 = imagesContainer.getElementsByTagName("img");
console.log(allImages2);
console.log(allImages2.length);
</code></pre>
