De querySelector

De querySelector - inleiding

In het vorige hoofdstuk heb je kunnen lezen dat een HTML pagina bestaat uit elementen en dat zo een element bij het programmeren een node of een object genoemd wordt. Ook heb je gelezen dat in zo een node alle HTML-elementen/ teksten etc. zitten die in de HTML staan.

Om pagina's interactief te maken, en dus te programmeren met JavaScript, wil je die elementen kunnen selecteren, Eenmaal geselecteerd kunnen we het object gebruiken om er iets aan toe te voegen, een handeling er aan toe te voegen (bijvoorbeeld als je er op klikt met je muis) of teksten en HTML die erin zit aan te passen.

De querySelector - werking

Om dit te doen moeten we vooraf weten welke HTML we hebben op onze pagina, we nemen onderstaand voorbeeld als stuk HTML code.

<div class="change-color">
    <p>
        This is some random text
    </p>
</div>

const myDiv = document.querySelector('.change-color');
console.log(myDiv);

De document. ?

Zoals je kan zien halen we informatie op met document.querySelector. Het eerste woord document staat voor het hele document. (denk aan de DOM uit het vorige hoofdstuk). Hierdoor wordt er gezocht in ALLE HTML onderdelen van de pagina. Je kan dit ook verkleinen maar daar komen we later wel op.

De selector

De selector is dat wat tussen de ( ) ronde haken staat. In bovenstaand voorbeeld dus '.change-color'. Deze manier van werken heb je al geleerd door het werken met CSS. Je kan op exact dezelfde manier als je met CSS aangeeft hoe een element gestyled wordt ook elementen ophalen. Een paar voorbeelden:

Classes graag!

Zoals je gewend bent werk je met CSS bij voorkeur (en eigenlijk echt alleen maar) met classes om je styling te doen. In JavaScript geldt dat ook, dus probeer altijd je selectors te maken met een class en niet met een element of een ID.

Iets of niets...

Een querySelector geeft altijd een object (dus een HTML-element) of niets terug. Als er meerdere divs op jouw pagina staan met dezelfde class, dan haalt de querySelector het eerste element wat voldoet aan de selector (dat wat je tussen de quotjes hebt staan) op. Probeer onderstaande code maar eens uit te voeren in jouw JavaScript:

const myDiv = document.querySelector('.change-color');
console.log(myDiv);

Gebruik een if-statement

Jouw JavaScript wordt soms over meerdere pagina's ingeladen en het kan dus voorkomen dat een element niet bestaat omdat het maar op 1 van de pagina's bestaat. Daarom is het altijd handig om te kijken of de querySelector niet null is. Dit kan en mag met een if-statement.

const myDiv = document.querySelector('.change-color');
if (myDiv) {
    console.log(myDiv);
} else {
    console.log('het element bestaat niet');
}