How do I use .forEach on DOM Elements?

The title of this post is what I originally googled. Here's what got me there:

I was working on displaying local times for the event listings on dev.to/events (haven't made a PR yet). To do this, I added a class to all elements with a timestamp, like this:

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

I wanted to grab all the timestamps on the page, loop through them, and update their innerHTML to reflect the local time. I usually use for statements when I need to loop stuff, but I decided to try the .forEach function.

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

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

I got this error:

Eventually, I realized that timestamps was not an array, it was a NodeList and at the top of mdn documentation, it clearly states:

Although NodeList is not an Array, it is possible to iterate on it using forEach(). It can also be converted to an Array using Array.from().

However some older browsers have not yet implemented NodeList.forEach() nor Array.from(). But those limitations can be circumvented by using Array.prototype.forEach() (more in this document).

I probably should have googled "How to loop through a NodeList" for specificity. Anyway, so then I wrote this:

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

And it worked! But when I showed it to @maestromac, he told me that a simple for statement would have worked. And would probably be a bit safer. So I went back to what I was most familiar with:

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

At least I learned something about NodeLists today ¯_(ツ)_/¯