显示为 0 长度的 Javascript HTML 集合答案

【问题标题】：Javascript HTML collection showing as 0 length显示为 0 长度的 Javascript HTML 集合
【发布时间】：2015-07-24 13:13:13
【问题描述】：

  var eval_table = document.getElementsByClassName("evaluation_table");
  console.log(eval_table);

这显示为：

[item: function, namedItem: function]0: 
    table.widefat.fixed.evaluation_table
    length: 1
    __proto__: HTMLCollection

但是，当我尝试获取eval_table、eval_table.length 的长度时，它返回的值是0。我以前使用过这种方法，以前没有使用过这种方法。我在上面想要实现的目标有什么问题吗？

【问题讨论】：

Works fine。也许，您的代码中有错字？
不，没有错字，也许是我的环境，在 wordpress 中工作，虽然这不应该影响 vanilla javascript？ @alexP
可能你的js是在元素创建之前执行的？
不，不应该。调用函数时元素是否已经在 DOM 中？
看这个例子：fiddle.jshell.net/7hc3qrhu/3 - 代码已经被移动到head，所以它在元素进入DOM之前执行（记录一个空数组和0作为长度），但是在控制台中展开集合后，元素就会显示出来，因为它显示了对象在展开时的状态，并且它是一个实时集合。

标签： javascript

【解决方案1】：

这是因为你的 JS 在元素被渲染到 DOM 之前就已经运行了。我敢打赌，您运行的脚本是在您的 html 的 <body> 之前加载的。你有两个选择：

将自动执行的<script> 添加到您的<body> 标记中的最后一项，或者；
包装您的函数，使其在执行前等待 DOM 加载。您可以使用以下任一方法执行此操作：
- jQuery 的 $(document).ready 或
- 如果你没有运行 jQuery：document.addEventListener("DOMContentLoaded", function(e) {// do stuff })

下面的代码示例：

<html>
  <head></head>
  <script>
    document.addEventListener("DOMContentLoaded", function(e) {
      var eval_table = document.getElementsByClassName('evaluation_table');
      console.log(eval_table, eval_table.length);
    });
  </script>
  <body>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
    <div class="evaluation_table"></div>
  </body>
</html>

【讨论】：

非常感谢。你让我今天一整天都感觉很好。我会接受这个答案。
现在我觉得自己像个白痴。尝试了很多不同的解决方案，结果证明它们可能都有效，我只需要等待文件准备好！哇！
@blankmaker 感谢您的回答。你能看看吗，这个和上面的问题有关 -> stackoverflow.com/questions/60601380/…
@blankmaker 这仍然没有帮助我，我的长度仍然为 0，而我可以在其中看到 3 个元素。

【解决方案2】：

为了访问 HTMLCollection 位置 0 的元素，您应该使用

        setTimeout(() => {
          let elms = document.getElementsByClassName('ClassName').item(0)
        }, 0);

使用 setTimeout 确保 DOM 完成渲染。

【讨论】：

这是一个糟糕的解决方案
可能会更糟

【解决方案3】：

你可以在里面写代码

$('document').ready(function(){
         // your code
   });

或者在 body onload 或者在 DOM ready 上

<body>
Your HTML here

<script>
// self executing function here
(function() {
    var eval_table = document.getElementsByClassName("evaluation_table");
    console.log(eval_table,eval_table.length);
})();
</script>
</body>

我在这个jsFiddle试过了

【讨论】：