Du har skrevet HTML-koden din, stylet den med CSS, og nå vil du at noe skal skje. Kanskje en knapp skal endre farge, en tekst skal oppdateres, eller en liste skal fylles med nye elementer. Det første steget er alltid det samme: du må velge elementet du vil jobbe med. Med querySelector i JavaScript peker du rett på HTML-elementer ved hjelp av CSS-selektorer du allerede kjenner.
Velge elementer med getElementById
Den klassiske måten å velge et element i JavaScript er document.getElementById. Du gir den ID-en til elementet du er ute etter, og du får tilbake selve elementet. Lagrer du resultatet i en variabel, kan du bruke den variabelen til å endre innhold, styling og attributter.
Fordelen med getElementById er at ID-er skal være unike. Det finnes bare ett element med den ID-en på siden, så du vet at du treffer riktig. Metoden er rask og har vært i JavaScript siden starten.
Ulempen viser seg når du trenger å velge elementer basert på klasse eller tagnavn. Da trenger du getElementsByClassName eller getElementsByTagName. Plutselig har du tre ulike metoder for noe som egentlig er samme oppgave.
querySelector JavaScript erstatter tre metoder med en
Med document.querySelector bruker du CSS-selektorer direkte i JavaScript. Vil du velge en ID, skriver du # foran. Vil du velge en klasse, bruker du punktum. Vil du velge et tagnavn, skriver du bare navnet. Syntaksen er den samme som i CSS-filen din.
Det betyr at du bare trenger en metode i stedet for tre. querySelector velger det første elementet som matcher selektoren. Har du en ID, finnes det bare ett treff. Har du et tagnavn som li, får du det første li-elementet i dokumentet.
Denne enkelheten gjør querySelector til førstevalget for de fleste utviklere. Kjenner du CSS-selektorer, vet du allerede hvordan du velger elementer i JavaScript.
querySelectorAll for flere elementer
querySelector returnerer bare det ene elementet. Trenger du alle li-elementene i en liste, eller alle knapper med en bestemt klasse, bruker du querySelectorAll. Den gir deg en NodeList, som fungerer omtrent som en array.
Hvert element i listen har et indeksnummer. Det første elementet har indeks 0, det andre har indeks 1, og så videre. Du henter et bestemt element med klammer bak variabelnavnet, akkurat som med arrays.
Forskjellen mellom NodeList og den eldre HTMLCollection (som getElementsByTagName returnerer) spiller sjelden noen rolle i praksis. Begge lar deg velge elementer med indeksnummer, og begge fungerer i en for-loop.
Spesifikke selektorer gir tryggere kode
En selektor som bare sier "p" velger det aller første p-elementet på hele siden. Det fungerer, men det er sårbart. Legger noen til et nytt p-element lenger opp i HTML-filen, velger du plutselig feil element.
Bruk ID-er på elementer som JavaScript skal jobbe med. Da er du sikker på at riktig element blir valgt, uavhengig av hva som ellers endres i dokumentet. Har du ikke mulighet til å sette en ID, gjør selektoren mer presis. Skriv "main p" i stedet for bare "p", så begrenser du søket til p-elementer inne i main.
Du kan bruke alle CSS-selektorer i querySelector, inkludert attributtselektorer. Vil du velge alle lenker som peker til eksterne sider, kan du skrive a[href^="http"]. Det velger alle a-elementer der href-attributten begynner med "http". Kombinerer du dette med querySelectorAll og en for-loop, kan du legge til target="_blank" på alle eksterne lenker automatisk.
Endre innhold med innerHTML
Når du har valgt et element, kan du endre innholdet med innerHTML. Setter du innerHTML til en ny tekst, erstattes alt innholdet i elementet. Selve taggen og attributtene beholdes, men alt mellom åpnings- og lukketaggen byttes ut.
Det finnes også outerHTML, som erstatter hele elementet, inkludert taggen. Bruker du outerHTML uten å ta med ny HTML-markup, forsvinner taggen og du sitter igjen med ren tekst.
innerHTML er nyttig for raske endringer, men for å bygge mer avanserte elementer er det bedre å lage elementer med createElement.
Endre styling fra JavaScript
Hvert HTML-element har en style-egenskap du kan bruke i JavaScript. Du skriver elementnavn.style.color = "red" for å endre tekstfargen, eller elementnavn.style.fontSize = "2em" for å endre skriftstørrelsen. Legg merke til camelCase i stedet for bindestrek: backgroundColor i JavaScript tilsvarer background-color i CSS.
Problemet med style-egenskapen er at den setter inline CSS direkte på elementet. Hver gang du setter style som en hel streng, slettes eventuelle andre inline-stiler du har lagt til. Setter du derimot style.color, style.fontSize og style.backgroundColor separat, beholdes alle.
En enda bedre tilnærming er å bruke classList for å legge til og fjerne CSS-klasser, slik at all styling forblir i CSS-filen der den hører hjemme.
setAttribute for andre attributter
Utseende er ikke det eneste du kan endre. Med setAttribute legger du til eller endrer hvilken som helst attributt på et element. Du kan sette target="_blank" på lenker, endre src på bilder, eller legge til data-attributter for JavaScript-logikk.
setAttribute tar to argumenter: navnet på attributten og verdien den skal ha. Kombinerer du dette med querySelectorAll og en loop, kan du endre attributter på mange elementer samtidig. Det er en kraftig teknikk for å gjøre sider dynamiske uten å røre HTML-filen.
Neste steg med DOM-manipulasjon
Å velge elementer er grunnsteinen i alt du gjør med JavaScript og DOM-en. Når du mestrer querySelector JavaScript, åpner det for å endre utseende med classList, bygge nye elementer med createElement, og reagere på brukerhandlinger med events.
Vil du se alle disse teknikkene i praksis, dekker kurset JavaScript for nybegynnere med instruktør Lars Vidar Nordli hele prosessen fra å velge elementer til å bygge interaktive nettsider. Kurset viser deg blant annet hvordan du kombinerer selektorer med events og dynamisk elementoppretting for å lage en fungerende handleliste-app.
