0

您好，我有一个问题，我试图抓取所有图像，以便循环浏览它们并在下面添加事件处理程序：

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

我有点困惑，因为我尝试过 getelementbyid 来获取所有图像通过 AJAX 动态填充的部分区域。现在就 querySelectorAll 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);
4

1 回答 1

0

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

于 2013-01-19T14:35:31.417 回答