Node List vs. Array

document.querySelectorAll(selector) gibt eine NodeList zurück.

const NodeList = document.querySelectorAll('selector');

Was können wir damit machen und was ist der Unterschied zu einem Array?

Eine NodeList ist ein array-ähnliches Objekt. Es sieht aus wie ein Array und verfügt auch über die Eigenschaft length. Wie bei einem Array kann man ein bestimmtes Element über einen Index [n] ansprechen und über die Elemente mit for-of oder forEach iterieren.
forEach funktioniert in älteren Browsern möglicherweise nicht, dann können wir die NodeList mit der Methode Array.from() in einen Array umwandeln:

const elementArray = Array.from(NodeList);
// oder gleich so selektieren:
const Array = Array.from(document.querySelectorAll('selector'));

Live vs. non-live collections

Neben der Methode querySelectorgibt es noch weitere Methoden, um Elemente zu selektieren:

getElementsbyTagName
getElementsByClassName

Diese Methoden sind ein kleines bisschen schneller als querySelectorAll, aber der Unterschied ist vernachlässigbar. Ein interessanter Unterschied ist aber, dass sie eine live collection zurückgeben. Was ist eine live collection und wozu brauchen wir sie?

Angenommen, wir selektieren alle Buttons auf einer Seite. Grundsätzlich liefern beide Methoden (also querySelectorAll und getElementByTagName) das gleiche Ergebnis. Der entscheidende Unterschied ist: wenn später per JavaScript ein weiterer Button hinzugefügt wird, aktualisiert sich die live collection automatisch und nimmt den neuen Button mit in die Liste auf. Die static collection bleibt wie sie ursprünglich war.

// Live collection vs. static/non-live collections:
const liveCollection = document.getElementsByTagName('button');
// => findet alle Buttons und auch die Buttons, die später per
// JavaScript ins HTML aufgenommen werden

const staticCollection = document.querySelectorAll('button');
// => findet alle Buttons, aber die NodeList wird nicht automatisch
// aktualisiert

Das klingt jetzt erst einmal sehr nützlich. Allerdings hat die Sache einen Haken: Die Verwendungsmöglichkeiten sind eingeschränkt. Ein typischer Anwendungsfall wäre, alle Elemente einer Liste zu selektieren und einen EventListener auf jedes einzelne Listenelement zu legen. Wenn zu einem späteren Zeitpunkt ein weitere Listenpunkt hinzugefügt wird, aktualisiert sich die Liste, da sie ja eine live collection ist.
Aber: der EventListener wird nur auf die ursprünglich vorhandenen Listenelemente draufgelegt, nicht auf später hinzugefügte. Daher macht die live collection für so einen Anwendungsfall wenig Sinn.

So oder so ist es aber best practice, für solche Zwecke die event delegation zu verwenden.