Question

  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的值。我之前使用过这种方法，之前没有遇到任何问题。我上面想要达到的目标有什么不对吗？

Answer 1

这是因为在元素呈现给DOM之前，JS正在运行。我敢打赌你运行的脚本是在你的html <body>之前加载的。您有两种选择：

将自动执行的<script>添加为<body>标记中的最后一项或;
包装您的函数，以便在执行之前等待加载DOM。您可以使用以下任一方法执
- jQuery＆＃39; $(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>

Answer 2

您可以在

中编写代码

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

或on 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

Answer 3

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

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

使用setTimeout确保DOM完成渲染。

Javascript HTML集合显示为0长度

3 个答案: