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>

for不起作用，因为elements.length总是返回undefined
"Uncaught TypeError: Cannot read property 'getAttribute' of undefined",
"Uncaught TypeError: Cannot read property 'innerHTML' of undefined",

Answer 1

使用document.querySelector()代替document.querySelectorAll()

第一个返回的结果没有length属性

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

第二个具有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获得类似数组的结果。

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

2 个答案: