Получить длину элемента в цикле и получить атрибут

Question

var elements = document.querySelector('.card-blog__footer time');

for (var i = 0; i < elements.length; i++) {
  let t = elements[i].getAttribute('datetime');
  elements[i].innerHTML(t)
}

<div id="test">
<div class="card-blog__footer">
  <time datetime="13:00">12:00</time>
</div>

<div class="card-blog__footer">
  <time datetime="15:00">14:00</time>
</div>
</div>

1. for не работает, потому что elements.length всегда возвращает undefined
2. "Uncaught TypeError: Cannot read property 'getAttribute' of undefined",
3. "Uncaught TypeError: Cannot read property 'innerHTML' of undefined",

Answer 1

Вместо document.querySelector() используйте document.querySelectorAll()

Результат, возвращаемый первым, не имеет свойства length

... возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается ноль.

, в то время как второй имеет свойство length

... возвращает статический (не действующий) NodeList представляет список элементов документа, которые соответствуют указанной группе селекторов.

Кроме того, innerHTML не является функцией. Вам нужно использовать это так:

elements[i].innerHTML = t;

Фрагмент:

var elements = document.querySelectorAll('.card-blog__footer time');

for (var i = 0; i < elements.length; i++) {
  let t = elements[i].getAttribute('datetime');
  elements[i].innerHTML = t;
}

<div id="test">
<div class="card-blog__footer">
  <time datetime="13:00">12:00</time>
</div>

<div class="card-blog__footer">
  <time datetime="15:00">14:00</time>
</div>
</div>

Answer 2

Длина не определена, поскольку document.querySelector возвращает только первое совпадение.

Используйте document.querySelectorAll для получения результата, подобного массиву.