Hacker News Reader

Comment by nailer | Hacker News Reader

> As one of the commenters pointed out, a lot of stuff was copied from jQuery to make it work.

> In other words, this entire effort seems of dubious benefit to me.

You made other points, but I wanted to focus on this one. Yes, there's a few remaining bits that don't have standards. But you can do so much with querySelector, classlist.toggle(), lastElementChild, scrollIntoView, insertAdjacentHTML - literally every JavaScript answer on SO is now "2016: all current browsers now support X".

Yeah, I'm sure they had to patch in a lot, but I'm also sure they didn't have to recreate everything.

Side benefit: also no weird $(thing)[0] when you need to use a DOM API, like HTML5 validity or whatever.

View on HN

> Side benefit: also no weird $(thing)[0] when you need to use a DOM API, like HTML5 validity or whatever.

But looping over querySelectorAll() is painful. I'm not really a frontend dev, so perhaps I'm doing it wrong, but this is the "easier" way I found when I was writing an app a few weeks ago (in TypeScript):

  // Get Array of HTMLElements from querySelectorAll().
  let queryAll = (q: string): HTMLElement[] => {
    let nodes = document.querySelectorAll(q);

    let arr: HTMLElement[] = [];
    arr.length = nodes.length;

    for (let i = 0; i < nodes.length; i++) {
      if (!(nodes[i] instanceof HTMLElement)) {
        arr.length--;
        continue;
      }

      arr[i] = nodes[i] as HTMLElement;
    }

    return arr;
  };

    return Array.from(document.querySelectorAll(q));

This won't filter SVG elements, and unfortunately Array.from isn't available in IE (and perhaps some other browsers that are still in use).

  let queryAll = (q: string): HTMLElement[] => {
    let nodes = document.querySelectorAll(q);
    return Array.from(nodes).filter(node => (node instanceof HTMLElement)) as HTMLElement[];
  }

Will do the same. Note that `Array.from()` is a relatively new method, that you will need to polyfill if you wish to support internet explorer, but `Array.prototype.slice.call()` serves the same purpose and can be used in older browsers.

> But looping over querySelectorAll() is painful.

Not any more:

    let elements = document.querySelectorAll('.some-class')
    elements.forEach(function(element){
      ...
    })

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

PS. The other two answers here are outdated.

Or if you prefer:

    for (const element of document.querySelectorAll('.some-class')) {
      // ...
    }

> PS. The other two answers here are outdated.

Sure, the other two answers may be "outdated" but they're still extremely useful if you're looking to calling map/filter/etc against your queried elements.

For that you can write:

    const elements = document.querySelectorAll('.some-class');
    const values = Array.prototype.map.call(elements, element => element.value);

or more idiomatically (and perhaps a little slower):

    const elements = [...document.querySelectorAll('.some-class')];
    const values = elements.map(element => element.value);

They asked about looping, not mapping or filtering.

I should have explained the use case better: I need to store an indexed array of elements for cache/querying later on; so forEach() isn't a good fit here.

Other people suggested Array.from(), but that won't work in IE, and the polyfill for it is a lot longer/more complex than the for loop I wrote.

[...document.querySelectorAll(el)]

Reply on news.ycombinator.com