Javascript HTML-коллекция, отображающая длину 0

  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. Раньше я использовал этот подход, раньше не имел проблем с этим подходом. Что-то не так с тем, чего я пытаюсь достичь выше?

Ответ 1

Это связано с тем, что ваш JS работает до того, как элементы будут переданы в DOM. Уверен, что script у вас запущена загрузка до <body> вашего html. У вас есть два варианта:

Добавить self-executing <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>

Ответ 2

Вы можете написать код внутри

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

или при загрузке тела или в готовности 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

Ответ 3

Для доступа к элементу в позиции 0 HTMLCollection вы должны использовать

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

Использование setTimeout чтобы убедиться, что DOM закончил рендеринг.