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() select 它们，然后遍历此 HTMLCollection，当我在开发者控制台中查看时显示 32 个项目，但当我检查长度时属性它为 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 弄明白。

据我所知，如果我将所有这些跨度元素视为 console.log 语句的一部分，那么它们应该对 [=38 的长度有所贡献=]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 脚本非常复杂，使用调试器单步执行它们并没有产生一个我可以在逻辑上看到正在添加的元素的地方，所以我尝试使用间隔计时器来检查我要查找的名称为 class 的元素是否存在。

目前这似乎可以解决问题，如果您有任何更优雅的解决方案，我愿意接受！还在研究这个...

Answer 1

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

你之前看到的32是正确的。它向您显示 HTMLCollection 的对象，它是对数组的引用。因此，当打印 eventToClick 时，其中的值为零.. 放置调试器并查看它。但是在加载日历后，eventToClick 会向您显示所有值。长度为0的原因是一样的。显示的长度是按值传递的。所以当你请求它时，长度实际上是 0.

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

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

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

HTMLCollection appearing in console with many elements but has length 0

javascript

htmlcollection