如何在 DOM 元素上使用 .forEach？

这篇文章的标题是我最初在谷歌上搜索到的。以下是搜索到的内容：

我当时正在为dev.to/events上的活动列表添加本地时间（目前还没有提交 PR）。为此，我给所有带有时间戳的元素添加了一个 class，如下所示：

<span class="utc-time"><%= event.starts_at %></span>

我想抓取页面上的所有时间戳，循环遍历它们，并更新它们innerHTML以反映本地时间。我通常for在需要循环操作时使用语句，但我决定尝试一下这个.forEach函数。

var timestamps = document.getElementsByClassName("utc-time");

timestamps.forEach(function(timestamp) {
      localTime = updateLocalTime(timestamps[i].innerHTML);
      timestamps[i].innerHTML = localTime;
    });

我收到此错误：

最终，我意识到那timestamps不是一个数组，而是一个NodeList ，并且在mdn 文档的顶部，它明确指出：

虽然 NodeList 不是数组，但可以使用 对其进行迭代forEach()。也可以使用 将其转换为数组Array.from()。

然而，一些老版本的浏览器还没有实现NodeList.forEach()。Array.from()不过，这些限制可以通过使用Array.prototype.forEach()（本文档中有更多内容）来规避。

我可能应该在 Google 上搜索“如何循环遍历 NodeList”来了解具体细节。总之，我写了这样一段代码：

    Array.prototype.forEach.call(timestamps, function (timestamp) {
      localTime = updateLocalTime(timestamp.innerHTML);
      timestamp.innerHTML = localTime;
    });

果然成功了！但当我把它拿给@maestromac看时，他告诉我，一个简单的for语句就可以了，而且可能更安全一些。所以我又回到了我最熟悉的语句：

    for (var i = 0; i < timestamps.length; i++) {
      localTime = updateLocalTime(timestamps[i].innerHTML);
      timestamps[i].innerHTML = localTime
    }

至少我今天学到了一些关于 NodeLists 的知识 ¯_(ツ)_/¯