JavaScript — Introduktion genom exempel

1.4 Referera till HTML

För att komma åt HTML-element, deras innehåll och attribut, kan man använda några olika metoder. I detta exempel visas några sätt, men det är framför allt metoden querySelector() som vi kommer använda. Med den metoden kan man referera till element på samma sätt som man gör i en selektor i CSS. När man tagit fram en referens till elementet, lägger man med punktnotation till en egenskap för innehållet eller namnet på det attribut man vill komma åt. Man kan både avläsa innehåll i element och dess attribut samt lägga in nytt innehåll i elementet och nya värden i attributen.

Sammanfattning

• En fördel med att använda querySelector() är att man refererar till element på samma sätt som i CSS.
• Refererar man till en grupp av element, får man endast det första elementet i gruppen med hjälp av querySelector(). I ett senare exempel kommer vi se hur vi kan hantera hela gruppen som en lista och gå igenom den, men just nu arbetar vi endast med ett element i taget.
• Referenser till innehållet görs med .innerText, om man endast vill avläsa eller förändra textinnehållet i elementet. Vill man lägga till nytt innehåll som är formaterat med HTML, använder man .innerHTML.
• Attribut kommar man åt genom att efter querySelector() lägga till en punkt och attributets namn.

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, genom att skriva kod i init-funktionen:

• Ta med querySelector() fram en referens till den första input-taggen och skriv dess innehåll i konsolen med console.log().
  • För att testa måste du skriva något i textfältet och sedan ladda om sidan.
• Ta fram en referens till knappen med hjälp av querySelector() och skriv ut den med console.log().
  • Du ska i detta fall inte lägga till något efter querySelector() , så i konsolen bör du få fram att det är ett button-element.
• Ta fram en referens till div-elementet med id "result" och skriv valfri text i elementet.
  • Du ska i detta fall inte använda console.log(), utan utskriften ska göras i elementet på webbsidan.
  • Det är endast text som ska skrivas i elementet.
• Ändra ovanstående, så att du formaterar texten med HTML som två textstycken.
  • Det som skrivs nu ska alltså innehålla HTML-taggar och bli formaterat vid utskriften i elementet.