Question

你好我有一个问题，我试图抓取所有图像，所以我可以循环它们并添加下面的事件处理程序：

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

我有点困惑，因为我已经尝试了getelementbyid来获取所有图像通过AJAX动态填充的部分区域。现在就querySelectorAl而言 l（）似乎没有抓住任何东西。我假设我只是使用这个错误。也许它没有回应标签。但我尝试使用getElementsByTagName，它似乎抓住了所有内容并将其放入HTMLCollection中。然而，HTML Collection的长度为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来抓取并完全构建我理解的长度。

HTMLCollection和NodeList

1 个答案: