De querySelectorAll

De querySelectorAll

In het vorige deel heb je kunnen lezen dat je een element kan ophalen met de querySelector maar soms wil je alle elementen met dezelfde selector ophalen. In zo een geval gebruik je de querySelectorAll.
Bovenstaande tekst verraad het al een beetje natuurlijk, de querySelectorAll haalt ALLE gevonden elementen op en stopt deze in een NodeList (soort Array).

<ol class="groceries-list">
    <li class="list-item">Melk</li>
    <li class="list-item">Aardappels</li>
    <li class="list-item">Appels</li>
    <li class="list-item">Gehakt</li>
    <li class="list-item">Cola</li>
</ol>

const listItems = document.querySelectorAll('.list-item');

En nu loopen maar ;-)

Een querySelectorAll geeft ALTIJD een lijst terug. In tegenstelling tot de querySelector die het eerst gevonden element teruggeeft of NULL.
De lijst van de querySelectorAll kan wel een lege lijst zijn.
Maar er is altijd een lijst en je hoeft dus niet eerst een if-statement te maken om te controleren of er wel 'iets' teruggekomen is.

Je kan dus met een while of een for-loop door een element heen loopen. In het onderstaande voorbeeld gebruiken we dezelfde HTML als hierboven, dus de boodschappenlijst.

const listItems = document.querySelectorAll('.list-item');
let i = 0;
while (i < listItems.length) {
  const showItem = listItems[i];
  console.log(showItem);
  i++;
}

Geen items gevonden?

Zoals hierboven beschreven staat, als de querySelectorAll geen elementen vindt in het document dan krijg je nog steeds een NodeList terug. Als je in je developers console de variabele toont krijg je NodeList[] te zien.
De NodeList heeft net als een array een .length attribute die je kan gebruiken, bij een lege lijst is de length 0.