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

页面上有一堆span元素，我正试图获取它们的格式如下：

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

我肯定在GetElementsByCassName或HTMLCollections的一般工作中遗漏了一些东西，但我似乎无法通过docs或Google在这一点上找到答案

据我所知，如果我将所有这些span元素都看作console.log语句的一部分，那么它们应该会影响eventToClickHTMLCollection的长度，我应该能够使用for循环对其进行迭代，但这不起作用！开发人员控制台是否在执行某种巫术，而我并没有将这些元素作为HTMLCollection的一部分

这是一个实时版本，您可以在自己的浏览器中进行复制：

在控制台中为帮助解决此问题的人员之一发布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);
    }
  }
});

document.addEventListener（'DOMContentLoaded'，函数（事件）{
var intervalID=window.setInterval（myCallback，50）；
函数myCallback（）{
var eventToClick=document.getElementsByClassName（'te-s'）；
如果（eventToClick.length>0）{
console.log（eventToClick）；
for（var i=0；i

正如Harshal在接受的答案中指出的，我无法获取元素，因为我的脚本在加载到页面之前就已经执行了。加载此日历数据的Google脚本非常复杂，使用调试器单步执行这些脚本并不能在逻辑上看到添加的元素，因此我尝试使用间隔计时器检查是否存在具有我要查找的类名的元素

现在看来，这是个好办法，如果你有更优雅的解决方案，我愿意接受！还在研究这个

---

加载日历后，您需要执行

document.getElementsByClassName（'te-s'）

您之前看到的32是正确的。它向您显示HTMLCollection的对象，该对象是对数组的引用。因此，当打印

eventToClick

时，它的值为零值。。放置调试器并查看它。但加载日历后，

eventToClick

会显示所有值。长度为

0

的原因是相同的。显示的长度是“按值传递”。因此，当您请求它时，长度实际上是

0

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

---

如果您在这方面需要帮助，请告诉我您正在使用的日历库，我很乐意对其进行研究。

需要更多。@melpomene刚刚上传到live站点，满足吗？何时添加这些元素<代码>HTMLCollection是一个实时收集。这意味着从

文档中添加/删除的任何元素都将反映在该集合中。因此，虽然日志显示长度为0，但当您在控制台中展开HTMLCollection时，它已更新为包含添加到
文档中的新元素，看起来非常复杂。@melpomene我同意，这只是一个愚蠢的附带项目，看看我是否可以从iCal嵌入中提取日历信息，然后以我认为合适的方式重新格式化。看起来我应该能够让HTMLCollection使用我使用过的方法，这正是困扰我的原因。这很有意义，我会仔细研究，看看是否有效，然后再回复你。@Daniel.Schroeder如果需要帮助，请告诉我！；）我喜欢和calendarsOK一起工作，这绝对是个问题。我还没有找到一种优雅的方法在元素加载后抓取它们，因为Google脚本对onload事件做了各种各样的处理，而通过调试器对我毫无帮助，因为所有包含的脚本和疯狂的函数调用。我能够使用setInterval获取元素，并等待对getElementsByClassName的调用返回一些元素。现在，这就是我要做的！
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);
    }
  }
});