JavaScript — Introduktion genom exempel

2.13 HTML-element

Vi har i tidigare exempel använt querySelector(), för att komma åt enskilda element. Nu ska vi också se hur vi kan komma åt en grupp av element med querySelectorAll(). Vi repeterar också en del som vi redan varit inne på i tidigare exempel, t.ex. hur vi kan komma åt det element som användaren klickat på och ändring av elementst stil och klass.

I detta exempel tas det även upp hur vi går runt i HTML-strukturen till omgivande element. Det tas också upp två metoder för att komma åt och förändra attribut. Exemplet är uppdelat i två delar:

• Skillnad mellan querySelector() och querySelectorAll(). Referenser till det element användaren klickat på samt omgivande element.
• Referens till attribut och klasser samt inaktivering/aktivering av en knapp.

Sammanfattning

• Med querySelector("selektor") får vi det första elementet som erhålls med selektorn.
• Med querySelectorAll("selektor") får vi en lista (array) med alla de element som erhålls med selektorn.
• Med this får vi en referens till det element som användaren interagerat med (t.ex. klickat på), för att komma in i funktionen.
• Med element.parentElement får vi elementets "förälder", dvs det element som omger det som vi utgår från. Ett steg uppåt i HTML-strukturen.
• Med element.previousElementSilbling och element.nextElementSibling går vi till ett "syskon", dvs det element som ligger före eller efter i HTML-koden, men på samma nivå i strukturen. Finns det inget sådant element, erhålls null som resultat.
• De fördefinierade attributen i HTML kan man komma åt med element.attribut. Men har vi egendefinierade attribut som innehåller ett bindestreck, t.ex. data-myAttribute, kan vi inte referera till det på samma sätt, eftersom bindestrecket då tolkas som en minusoperator. Då får vi istället använda funktionerna getAttribute() och setAttribute(). Dessa funktioner fungerar naturligtvis även för de fördefinierade attributen.
• Knappar (button-element) och andra element i formulär kan inaktiveras eller aktiveras, genom att sätta egenskapen disabled till true eller false. Detta har redan använts i tidigare exempel, men repeteras här.

Alternativa funktioner till querySelectorAll() är getElementsByTagName() för att få en array med alla element av en viss tagg och getElementsByClassName() för att få en array med alla element som har en viss klass. Dessa kombineras ofta med getElementById(), för att först välja ut ett omgivande element med ett id. Exempel på hur de skrivs är:

let animalElems = document.getElementById("boxes").getElementsByTagName("img");
let selectedAnimalElems = document.getElementsByClassName("selected");

Dessa funktioner var tidigare de enda sätten att få fram en lista av element. De finns fortfarande kvar i JavaScript och används i en del kod på nätet, så det är viktigt att känna till dem, men i denna exempelsamling kommer vi fortsätta använda querySelector() och querySelectorAll().

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Funktionen init:
  • Lägg till en rad för att tilldela nrBlocks, med hjälp av querySelectorAll(), så att det blir en array med alla p-element inom elementet med id "nrBlocks".
  • Skriv en likadan rad för nrBtns, så att det blir en array med alla button-element inom elementet med id "nrBtns".
  • Gå igenom nrBtns i en for-loop och lägg på händelsehanterare på knapparna, så att funktionen test anropas, då man klickar på dem.
• Funktionen test:
  • Lägg in en rad för att inaktivera den knapp användaren klickat på.
    • Klicka på knapparna, för att se att de inaktiveras.
  • Lägg knappens value-attribut i en lokal variabel kallad nr.
  • Gå igenom alla nrBlocks i en for-loop. I loopen ska följande göras:
    • Inför en lokal variabel blockNr och tilldela den attributet data-nr i det nrBlocks som indexeras av loopvariabeln.
    • Jämför nr och blockNr i en if-sats. Om de är lika lägger du in nr som innehåll i blocket. Lägg också till klassen "marked" med hjälp av classList.add().
  • Efter loopen ska du göra en utskrift ifall siffran ej fanns i något av blocken. Då behöver du en s.k. flagga, för att avgöra om en siffra hittades eller ej.
    • Före loopen lägger du in en rad där du inför variabeln found och sätter den till false.
    • I if-satsen i loopen sätter du found till true.
    • Efter loopen skriver du en ny if-sats med villkoret (!found), dvs om found fortfarande är false. I så fall skriver du "Siffran fanns inte" i elementet för resultat.
  • Nu ska du kontrollera om alla siffror är funna, dvs om alla "block" har klassen "marked".
    • Inför en variabel kallad markedElems och tilldela den med hjälp av querySelectorAll(), så att det blir alla element med klassen "marked" inom elementet med id "nrBlocks".
    • I en if-sats kontrollerar du om markedElems.length är lika med nrBlocks.length. I så fall skriver du "Alla är markerade" i elementet för resultat.