获取循环中的元素长度并获取属性

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.querySelector()

第一个返回的结果没有document.querySelectorAll()属性

...返回文档中与指定的选择器或一组选择器。如果没有找到匹配项，返回null。

而第二个具有document.querySelectorAll()属性

...返回代表列表的静态（非实时）length与指定选择器组匹配的文档元素。

此外，length不是函数。您需要像这样使用它：

NodeList

摘要：

NodeList

innerHTML

Answer 2

长度是不确定的，因为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;
}

获得类似数组的结果。