Del 8: Flere Selectors

Vi har sett en måte å hente ut et element fra HTML, getElementById(). I JavaScript har vi flere måter å hente ut elementer og metodene kalles selectors. Her går vi gjennom de mest vanlige.

1. Ulike måter å velge elementer

getElementsByClassName

Brukes for å hente ALLE elementer med et bestemt klassenavn. Du får en liste med elementer, så du må bruke en løkke for å gjøre noe med hvert element.

I HTML-koden nedenfor har vi en unordered list (ul) med tre liste-elementer (li) som har samme class list-item:

<ul>
  <li class="list-item">The Matrix</li>
  <li class="list-item">Star Wars</li>
  <li class="list-item">Harry Potter</li>
</ul>

I JavaScript skriver vi:

let listElements = document.getElementsByClassName("list-item");
console.log(listElements); //HTMLCollection(3) [li.list-items, li.list-items, li.list-items]

Vi ser i konsollen en array med alle liste-elementene.

HTMLCollection(3)[li.list-items, li.list-items, li.list-items]

Så for å gjøre noe med et spesifikt element må vi huske hvordan en array fungerer. I koden nedenfor bruker vi en for-løkke for å gå gjennom arrayen og endre fargene på teksten.

Live Preview:
script.js

Loading editor...

document.getElementById("myButton").addEventListener("click", function() {
  let elements = document.getElementsByClassName("list-item");
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = "blue";
  }
});

getElementsByTagName

Brukes for å hente ALLE elementer med en bestemt HTML-tag (f.eks. <p>, <h1>, <div>) og lagrer det i en array. For eksempel kan du hente ut alle li-elementene, samme som forrige kode.

Live Preview:
script.js

Loading editor...

document.getElementById("myButton").addEventListener("click", function() {
  let elements = document.getElementsByTagName("li");
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.fontSize = "18px";
  }
});

querySelector og querySelectorAll

querySelector henter det første elementet som matcher en CSS-selektor. querySelectorAll henter alle som matcher, som en liste.

Det betyr at du kan bruke class (.klasse), id (#id) eller mer avanserte CSS-selektorer som div p, ul > li eller [type='text'] for å finne elementer, akkurat som i CSS.

Live Preview:
script.js

Loading editor...

document.getElementById("styleBtn").addEventListener("click", function() {
  // querySelector finner DET FØRSTE elementet som matcher
  let first = document.querySelector(".list-item");
  first.style.backgroundColor = "yellow";

  // querySelectorAll finner ALLE elementer som matcher
  let all = document.querySelectorAll(".list-item");
  all.forEach(function(el){
    el.style.border = "2px solid red";
  });
});
2. Endre CSS med JavaScript

Direkte stilendring

Bruk element.style for å endre ting som farge, bakgrunn eller størrelse direkte. Merk at CSS-egenskaper som er skrevet i snake-case (som font-size) er skrevet i camelCase i JavaScript (fontSize).

Live Preview:
script.js

Loading editor...

document.getElementById("styleChange").addEventListener("click", function() {
  let el = document.getElementById("myElement");
  el.style.color = "green";
  el.style.backgroundColor = "lightgrey";
});

Legge til og fjerne klasser med classList

classList lar deg legge til, fjerne eller veksle (toggle) mellom ferdige CSS-klasser. Dette er nyttig fordi du vanligvis definerer stilene i CSS – og lar JavaScript bare bestemme når klassene skal brukes.

De vanligste metodene er: - add() – legger til en klasse. - remove() – fjerner en klasse. - toggle() – veksler mellom å legge til og fjerne.

add() – legge til en forhåndsdefinert klasse

Her har vi laget en CSS-klasse .highlight som gir gul bakgrunn. Når du trykker på knappen, legger JavaScript til denne klassen.

Live Preview:
script.js

Loading editor...

document.getElementById("addClassBtn").addEventListener("click", function() {
  let box = document.getElementById("box");
  box.classList.add("highlight");
});

remove() – fjerne en klasse igjen

Dette eksemplet starter med klassen aktivert, men vi fjerner den når knappen trykkes.

Live Preview:
script.js

Loading editor...

document.getElementById("removeClassBtn").addEventListener("click", function() {
  let box = document.getElementById("box2");
  box.classList.remove("highlight");
});

toggle() – veksle mellom på og av

toggle() gjør begge deler: hvis klassen finnes, fjernes den – hvis den mangler, legges den til. Dette brukes ofte til å veksle mellom to tilstander, som "aktiv" eller "åpen".

Live Preview:
script.js

Loading editor...

document.getElementById("toggleHighlight").addEventListener("click", function() {
  let element = document.getElementById("box3");
  element.classList.toggle("highlight");
});

Ved å kombinere classList med forhåndsdefinerte CSS-klasser får du ryddig kode som holder design og logikk adskilt — slik det bør være.

3. Legge til elementer med JavaScript

Så langt har vi endret eksisterende elementer i DOM-en. Men hva om vi vil lage nye elementer direkte i JavaScript? Da bruker vi createElement().

createElement() og appendChild()

createElement() lager et nytt HTML-element, mens appendChild() legger det inn i et eksisterende element i dokumentet. Det betyr at du kan dynamisk legge til nye elementer uten å skrive dem i HTML på forhånd.

I eksemplet under legger vi til to nye filmer i listen når du trykker på knappen:

Live Preview:
script.js

Loading editor...

document.getElementById("addMoviesBtn").addEventListener("click", function() {
  // Hent listen fra DOM
  let list = document.getElementById("movieList");

  // Lag to nye elementer
  let newMovie1 = document.createElement("li");
  newMovie1.textContent = "Inception";

  let newMovie2 = document.createElement("li");
  newMovie2.textContent = "Interstellar";

  // Legg til elementene i listen
  list.appendChild(newMovie1);
  list.appendChild(newMovie2);
});

Når du trykker på knappen, ser du at de nye filmene dukker opp nederst i listen. Dette er grunnleggende DOM-manipulasjon, og brukes overalt når man bygger dynamiske nettsider.

Oppgaver
Oppgave 1: Endre stil på flere elementer
Bruk getElementsByClassName for å velge alle elementer med en bestemt klasse, og endre fargen på teksten deres.
Oppgave 2: Bruk querySelectorAll til å velge elementer
Bruk querySelectorAll for å velge alle div-elementer, og legg til en rød kant rundt dem når en knapp trykkes.
Oppgave 3: Endre klasser med classList
Bruk classList til å veksle en klasse som endrer bakgrunnsfargen på et element.

Disse oppgavene vil hjelpe deg å forstå hvordan du kan bruke forskjellige selectors for å hente ut elementer fra DOM, samt hvordan du kan endre stiler dynamisk ved hjelp av JavaScript.

← Forrige del Neste del →