## Uppgift
Du har en inköpslista i din HTML och behöver välja specifika element med olika DOM-frågemetoder.
1. **Välj efter ID**: Välj `<h1>`-elementet med ID `title`;
2. **Välj efter klass**: Välj alla element med klassen `item`;
3. **Välj efter tagg**: Välj alla `<li>`-element;
4. **Välj det första matchande elementet**: Välj det första `<li>`-elementet med klassen `item`;
5. **Välj alla matchande element**: Välj alla `<li>`-element med klassen `item`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGlkPSJ0aXRsZSI+U2hvcHBpbmcgTGlzdDwvaDE+CiAgICA8dWw+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+TWlsazwvbGk+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+RWdnczwvbGk+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+QnJlYWQ8L2xpPgogICAgICA8bGkgY2xhc3M9Iml0ZW0iPkJ1dHRlcjwvbGk+CiAgICA8L3VsPgogICAgPCEtLSBEaXNwbGF5IFJlc3VsdHMgLS0+CiAgICA8ZGl2PgogICAgICA8cCBpZD0ic2VsZWN0ZWQtdGl0bGUiPjwvcD4KICAgICAgPHAgaWQ9InNlbGVjdGVkLWl0ZW1zLWNvdW50Ij48L3A+CiAgICAgIDxwIGlkPSJmaXJzdC1saS10YWciPjwvcD4KICAgICAgPHAgaWQ9ImZpcnN0LWl0ZW0iPjwvcD4KICAgICAgPHAgaWQ9ImFsbC1pdGVtcy1jb3VudCI+PC9wPgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY2Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGNvbG9yOiAjMzMzOwp9CgojdGl0bGUgewogIGZvbnQtc2l6ZTogMi41cmVtOwogIGNvbG9yOiAjM2E4YmNkOwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7CiAgbWFyZ2luLWJvdHRvbTogMXJlbTsKICBsZXR0ZXItc3BhY2luZzogMS4ycHg7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDAgMCAycmVtIDA7CiAgd2lkdGg6IDMyMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIG92ZXJmbG93OiBoaWRkZW47Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiAxNnB4OwogIGZvbnQtc2l6ZTogMS4xcmVtOwogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZTBlNGU3OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7Cn0KCi5pdGVtOmxhc3QtY2hpbGQgewogIGJvcmRlci1ib3R0b206IG5vbmU7Cn0KCi5pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDNlOWY1OwogIGNvbG9yOiAjMjY3ZWJkOwogIGN1cnNvcjogcG9pbnRlcjsKfQoKZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDE2cHg7CiAgd2lkdGg6IDMyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBib3gtc2hhZG93OiAwIDRweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Cgojc2VsZWN0ZWQtdGl0bGUsCiNzZWxlY3RlZC1pdGVtcy1jb3VudCwKI2ZpcnN0LWxpLXRhZywKI2ZpcnN0LWl0ZW0sCiNhbGwtaXRlbXMtY291bnQgewogIGZvbnQtc2l6ZTogMXJlbTsKICBtYXJnaW46IDhweCAwOwp9Cgojc2VsZWN0ZWQtdGl0bGUgewogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjMjhhNzQ1Owp9Cgojc2VsZWN0ZWQtaXRlbXMtY291bnQgewogIGNvbG9yOiAjMTdhMmI4Owp9CgojZmlyc3QtbGktdGFnIHsKICBjb2xvcjogI2ZmYzEwNzsKfQoKI2ZpcnN0LWl0ZW0gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojYWxsLWl0ZW1zLWNvdW50IHsKICBjb2xvcjogIzZjNzU3ZDsKfQ==

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdzZWxlY3RlZC10aXRsZScKKS50ZXh0Q29udGVudCA9IGBTZWxlY3RlZCB0aXRsZTogJHt0aXRsZUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYnkgQ2xhc3MKY29uc3QgaXRlbUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLWl0ZW1zLWNvdW50JwopLnRleHRDb250ZW50ID0gYE51bWJlciBvZiBpdGVtcyB3aXRoIGNsYXNzICdpdGVtJzogJHtpdGVtRWxzLmxlbmd0aH1gOwoKLy8gU2VsZWN0IGJ5IFRhZwpjb25zdCBsaUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWxpLXRhZycKKS50ZXh0Q29udGVudCA9IGBGaXJzdCB0YWcgbmFtZTogJHtsaUVsc1swXS50YWdOYW1lfWA7CgovLyBTZWxlY3QgdGhlIGZpcnN0IGl0ZW0KY29uc3QgZmlyc3RJdGVtRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1pdGVtJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGl0ZW0gdGV4dDogJHtmaXJzdEl0ZW1FbC50ZXh0Q29udGVudH1gOwoKLy8gU2VsZWN0IGFsbCBpdGVtcwpjb25zdCBhbGxJdGVtcyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

- Använd `getElementById` för att välja `<h1>`-elementet med ID `title`;
- Använd `getElementsByClassName` för att välja alla element med klassen `item`;
- Använd `getElementsByTagName` för att välja alla `<li>`-element;
- Använd `querySelector` för att välja det första `<li>`-elementet med klassen `item`;
- Använd `querySelectorAll` för att välja alla `<li>`-element med klassen `item`.

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGl0bGUnKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLXRpdGxlJwopLnRleHRDb250ZW50ID0gYFNlbGVjdGVkIHRpdGxlOiAke3RpdGxlRWwudGV4dENvbnRlbnR9YDsKCi8vIFNlbGVjdCBieSBDbGFzcwpjb25zdCBpdGVtRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnaXRlbScpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnc2VsZWN0ZWQtaXRlbXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgTnVtYmVyIG9mIGl0ZW1zIHdpdGggY2xhc3MgJ2l0ZW0nOiAke2l0ZW1FbHMubGVuZ3RofWA7CgovLyBTZWxlY3QgYnkgVGFnCmNvbnN0IGxpRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2xpJyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1saS10YWcnCikudGV4dENvbnRlbnQgPSBgRmlyc3QgdGFnIG5hbWU6ICR7bGlFbHNbMF0udGFnTmFtZX1gOwoKLy8gU2VsZWN0IHRoZSBmaXJzdCBpdGVtCmNvbnN0IGZpcnN0SXRlbUVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWl0ZW0nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgaXRlbSB0ZXh0OiAke2ZpcnN0SXRlbUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYWxsIGl0ZW1zCmNvbnN0IGFsbEl0ZW1zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig att skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

Lär dig grunderna i JavaScript-klasser, från klassdeklarationer till att definiera metoder som förbättrar funktionaliteten. Upptäck hur du använder parameterobjekt effektivt, hanterar privata egenskaper och kontrollerar åtkomst med getters och setters. Behärska statiska egenskaper och statiska metoder samt utnyttja kraften i klassarv med "extends" och "super()" för att skapa skalbar och återanvändbar kod.

Behärska DOM-manipulation för att skapa dynamiska, interaktiva webbapplikationer. Navigera och modifiera DOM-strukturen, uppdatera innehåll dynamiskt och tillämpa bästa praxis för säkerhet och prestanda. Skilj mellan egenskaper och attribut för att optimera din kod.

Lås upp interaktiviteten i dina webbapplikationer genom att bemästra JavaScript-händelser. Förstå händelsepropagering, kontrollera händelsebeteende och implementera effektiv händelsehantering för användarinteraktioner. Optimera prestanda med avancerade tekniker som händelsedelegering.

Fördjupa dig i asynkron JavaScript, inklusive återanrop, löften och async/await. Lär dig att hämta data från API:er, integrera tredjepartsbibliotek och hantera flera förfrågningar effektivt, vilket bygger färdigheter för att skapa datadrivna applikationer.

Utmaning: Fråga och Välj DOM-element

Uppgift

Utmaning: Fråga och Välj DOM-element

Uppgift