HTMLCollection出现在控制台中，包含许多元素但长度为0

Question

页面上有一堆我想要抓取的span元素，其格式如下：

<div class="ca-evp1 te" style="color:#2952A3">
    <span class="te-t">11am&nbsp;</span>
    <span class="te-s">Antoine Diel</span>
</div>

所以，我决定使用getElementsByClassName（）选择它们然后遍历这个HTMLCollection，当我在开发者控制台中查看时显示32个项目，但是当我检查length属性时它是0.

  var toType = function(obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
  }
  var eventToClick = document.getElementsByClassName('te-s');
  console.log(eventToClick); // shows 32 elements
  console.log(toType(eventToClick)); //htmlcollection
  console.log(eventToClick.length); // 0...huh?

我一定错过了getElementsByClassName或HTMLCollections的工作原理，但我现在似乎无法通过文档或Google来解决这个问题。

据我所知，如果我将所有这些span元素视为console.log语句的一部分，那么它们应该对 eventToClick <的长度做出贡献/ strong> HTMLCollection我应该可以使用for循环迭代它，但这不起作用！开发者控制台是否在这里执行某种类型的巫术，我真的没有将这些元素作为HTMLCollection的一部分吗？

以下是实时版本，您可以在自己的浏览器中进行复制：http://danielschroedermusic.com/apps/cal-test/cal.html

在控制台中发布第二个span元素图像，以帮助其中一个人解决此问题。

工作解决方案，但不是很好！

document.addEventListener('DOMContentLoaded', function(event) {
  var intervalID = window.setInterval(myCallback, 50);
  function myCallback() {
    var eventToClick = document.getElementsByClassName('te-s');
    if (eventToClick.length > 0) {
      console.log(eventToClick);
      for (var i = 0; i < eventToClick.length; i++) {
        console.log(eventToClick[i]); // 32 elements!
      }
      clearInterval(intervalID);
    }
  }
});

正如Harshal在接受的答案中指出的那样，我无法抓取元素，因为我的脚本在加载到页面之前正在执行。加载此日历数据的Google脚本非常复杂，并且使用调试器逐步执行它们并没有产生我可以在逻辑上看到要添加的元素的位置，因此我尝试使用间隔计时器来检查是否存在我正在寻找具有类名的元素。

现在似乎已经成功了，如果你有任何优惠解决方案我会更开心！还在研究这个......

Answer 1

加载日历后，您需要document.getElementsByClassName('te-s')。

你以前看到的32是正确的。它显示了HTMLCollection的对象，它是对数组的引用。因此，当打印eventToClick时，它的值为零..放入调试器并查看它。但是在加载日历后，eventToClick会显示所有值。长度为0的原因是相同的。显示的长度是按值传递的。所以当你提出要求时，长度实际上是0。

加载日历后必须有一些回调功能，你可以使用它来获得正确的值，你可以在那里获得正确的长度。

如果您需要帮助，请告诉我您正在使用的日历库，我很乐意研究它。