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在一般情况下的工作方式，我一定遗漏了一些内容，但目前我似乎无法通过文档或谷歌弄清楚这一点。

根据我的理解，如果我看到所有这些span元素都是console.log语句的一部分，那么它们应该会增加eventToClick 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。

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

如果你在这方面需要帮助，让我知道你正在使用的日历库，将很乐意研究它。