W języku JavaScript metoda document.querySelectorAll(".menu") zwraca
querySelector, bez końcówki All.length zwróconej listy."#menu".querySelectorAll przyjmuje selektor w składni CSS i zwraca wszystkie pasujące elementy w postaci listy NodeList. Kropka w ".menu" oznacza klasę, tak samo jak w arkuszu stylów, więc wynik zawiera każdy element z class="menu", w kolejności występowania w kodzie.
Po liście przechodzi się pętlą: document.querySelectorAll(".menu").forEach(el => el.style.color = "red");. Liczbę elementów daje właściwość length, a pojedynczy element indeks, np. [0]. Gdy nic nie pasuje, lista jest pusta, a nie null. Selektor może być dowolny: "ul li", "input[type=text]", "#menu a".
Lista zwrócona przez tę metodę jest statyczna: nie zmienia się, gdy później dodasz do strony kolejny element o tej klasie.
Pierwszy pasujący element zwraca bliźniacza metoda querySelector, bez końcówki All. To najczęstsza pomyłka, bo nazwy różnią się tylko jednym słowem, a wynik jest zupełnie inny: jeden obiekt albo lista wszystkich.
Element o identyfikatorze wskazuje selektor z krzyżykiem, "#menu", albo metoda getElementById("menu"). Kropka oznacza klasę, a nie identyfikator, dokładnie jak w CSS.
Liczby elementów metoda nie zwraca wprost. Daje ją dopiero właściwość listy: document.querySelectorAll(".menu").length. Kto chce policzyć elementy, musi więc najpierw pobrać listę, a potem odczytać jej długość.
Dobrze też pamiętać, że lista NodeList nie jest elementem. Zapis document.querySelectorAll(".menu").style.color = "red" nie zadziała, bo lista nie ma właściwości style. Trzeba przejść po elementach pętlą forEach albo wybrać jeden konkretny element z listy jego indeksem, np. [0].