HTMLCollection和NodeList

Question

您好，我有一个问题，我试图捕获所有图像，以便我可以循环通过它们，并添加下面的事件处理程序：

  addEventListener('dragstart', handleDragStart, false);
  addEventListener('dragenter', handleDragEnter, false);
  addEventListener('dragover', handleDragOver, false);
  addEventListener('dragleave', handleDragLeave, false);

我有点困惑，因为我尝试过getelementbyid来获取通过AJAX动态填充所有图像的部分区域。现在，就querySelectorAl而言，l()似乎并没有捕获到任何东西。我假设我用错了这个。也许它不会响应标签。但我尝试了一下getElementsByTagName，它似乎能抓取所有内容并将其放入HTMLCollection中。然而，HTML集合的长度为0。有没有使用Javascript (而不是jquery)将这些事件处理程序附加到每个IMG的最佳实践方法？我对如何抓取和操纵它们感到困惑。.length似乎不能工作，我也不习惯HTMLCollection，这似乎就是我所得到的。

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);

Answer 1

我确定bfavaretto是正确的。为了检查dom是否正在加载，我将add事件处理程序移到了一个位置，以便在用于加载图像的ajax调用完成后执行(检查if语句中的readyState和readyStatus )。我以前没有想到这一点，因为我个人误解了DOM是如何加载它的HTMLCollection和数组长度的，并认为它是在加载所有内容之后才加载的。尽管它正确地抓取了所有的图像，但根据我的理解，DOM并不是为了抓取和完全构建长度而加载的。