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;
  };

Not any more:

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

PS. The other two answers here are outdated.

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.

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.

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

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

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

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

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