Javascript中的HTML集合显示为0长度

Question

Javascript中的HTML集合显示为0长度

33

  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的结果。我以前使用过这种方法，并且没有遇到过问题。上面我尝试实现的方式有什么问题吗？

- Jack hardcastle

3

运行良好。也许是您代码中的一个错字？ - alexP

1

也许你的JS在元素创建之前就被执行了？ - user757095

是的，@alexP，如果我console.log集合本身，它可以看到它们在那里，它看到它们的长度（在上面的代码片段中看到），但是当我尝试直接引用这些的长度时，返回0。 - Jack hardcastle

1

请看这个例子：http://fiddle.jshell.net/7hc3qrhu/3/ - 代码已经移动到head，所以它在元素进入DOM之前执行（记录一个空数组和长度为0），但是一旦你在控制台中展开集合，元素就会显示出来，因为它显示了扩展时对象的状态，并且它是一个实时集合。 - pawel

它在jsbin中使用简单的表格运行 http://jsbin.com/rupobicibi/1/ ，您能发布更多的代码吗？HTML可能会有用。 - bmscomp

显示剩余2条评论

3个回答

3

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

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

使用 setTimeout 来确保 DOM 渲染完成。

- giapnh

3

这个解决方案很糟糕。 - Jack hardcastle

3

虽然并不完美，但也还算可以。 - Gust van de Wal

至少它能工作 - DonMB

1

你可以在

标签内编写代码。

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

或在body onload或DOM准备就绪时。

<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中尝试过了。

- sachin.ph

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blankmaker · Accepted Answer

这是因为您的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>