Hacker News Reader

Comment by yunyu | Hacker News Reader

You can wrap that in Array.from() to take advantage of foreach, filter, etc..

This is how i've been doing it:

  const elements = document.querySelectorAll('li');
  [...elements].forEach((element) => element.addEventListener('click', this.onClickHandler));

This is a much more elegant solution. Thanks.

It's even easier now. `.forEach` on `NodeList` is standard https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo..., so all you need to do is load a polyfill for that.

Why do you need the [ ... elements ] -- can't you call foreach off elements directly? Is it not an array?

It's not an array, but in recent versions of browser it does support `forEach` and some others.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

No, it returns a NodeList, not an array. But, forEach exists on NodeList, but map and reduce does not (together with all the rest of the array functions).

Huh, TIL I guess. I've only barely messed with that, and it most have just been on "recent enough" versions to support array functions.

And this is why JavaScript is one of my least favorite languages.

Is there a website that stays up-to-date with a brief summary of all this nonsense? I haven't programmed in JavaScript in 4 years but am needing to relearn it again for a project, and searching Google for "iterating over elements" in JavaScript returns 57 different techniques, all considered "the best way" at some different point in time over the last few years, and all with varying levels of browser support.

Looping/filtering over things should just not be this convoluted of a process...

I think that the Mozilla Dev docs would probably be useful to you, or at least that's what I always end up going to -- https://developer.mozilla.org/en-US/

It makes sense because the DOM is like a huge global, mutable variable. Map and reduce are used in functional programming to create a new immutable variable. forEach allows to mutate each node from the nodeList.

This works too:

    var elements = document.querySelectorAll('li');
    
    var arr_elements = [].slice.call(elements);

Reply on news.ycombinator.com