HTML, CSS & JavaScript

Mörkt tema

DOM (20 min) ​

💡 Introduktion till ämnet (flipped classroom) ​

⏰ Tidsåtgång: c.a. 17 min

DOM (3 min) ​

Selektera DOM-element (9 min) ​

Manipulera DOM-element (5 min) ​

🔈 Transkription

Nu börjar äntligen det roligare - nu har vi ett antal verktyg att jobba med, för att faktiskt kunna börja göra något lite mer interaktivt!

Kommer du ihåg att vi i HTML- och CSS-kursen pratade om DOM-träd och child och sibling-selektorer, och parents? Nu är det dags att gräva fram dom kunskaperna!

En liten repetition:

html
<article>
    <h1>Heading</h1>
    <p>En paragraf med text</p>
</article>
  • <article> är ett "parent element" till både <h1> och <p>.
  • <h1> och <p> är i sin tur "child elements" till <article>.
  • <h1> och <p> är "sibling elements".

Med hjälp av JavaScript kan vi "navigera" DOM-trädet, dvs. hoppa mellan olika HTML-element och på så sätt kontrollera dess utseende.

Senare, när ni börjar läsa om JavaScript-ramverk, kommer ni att stöta på begrepp som "virtual DOM". Det är ett "lager" ovanpå det vanliga DOM:et, som gör uppdateringar av utseendet lite snabbare. Det är nämligen ganska långsamt att uppdatera DOM:et, så därför bygger man ett virtuellt DOM. Men detta är out-of-scope för denna kurs.

I HTML-dokumentet så är själva <html>-taggen document-objektet i JavaScript.

Vi skulle alltså i konsolen kunna skriva console.log(document.body.innerHTML) och då får utskrivet hela HTML-strukturen på vår sida. Pausa och prova gärna i ett HTML-dokument.

Ett bra verktyg för att komma åt element i HTML-strukturen är funktionen querySelector. Den fungerar såhär:

html
<div class="someText">Some text here</div>

<script>
  const myDiv = document.querySelector('.someText');
  console.log(myDiv);
</script>

Vi kan också använda id:

html
<div id="someDiv">Some text here</div>

<script>
  const myDiv = document.querySelector('#someDiv');
  console.log(myDiv);
</script>

Notera nu att denna väljer endast det första elementet den stöter på i dokumentet, som matchar villkoret.

Vill vi välja alla HTML-element som motsvarar ett villkor/en selektor, så får vi istället skriva såhär:

html
<ul>
  <li>En listpunkt</li>
  <li>En till listpunkt</li>
  <li>En tredje listpunkt</li>
</ul>

<script>
  const myListItems = document.querySelectorAll('li');
  console.log(myListItems);
</script>

Vi kan även kombinera selektorer:

html
<ul>
  <li class="red">En listpunkt</li>
  <li>En till listpunkt</li>
  <li class="red">En tredje listpunkt</li>
</ul>

<script>
  const myListItems = document.querySelectorAll('li.red');
  console.log(myListItems);
</script>

Ovan kod skulle alltså välja alla <li>-element som har klassen red applicerad.

Om vi väljer ett element i HTML, kan vi istället inspektera dess släktskap till andra HTML-noder.

html
<ul>
  <li id="firstItem">En listpunkt</li>
  <li>En till listpunkt</li>
  <li>En tredje listpunkt</li>
</ul>

<script>
  const myListItem = document.querySelector('#firstItem');
  console.log(myListItem.parentElement);
  console.log(myListItem.nextElementSibling);
</script>

Ett tips är att använda sig av console.dir istället för console.log, om du behöver "granska" vilka egenskaper ett element har.

💬 Kodexempel ​

Tips! document.body är "special", men det fungerar t.ex. inte att skriva document.main, utan för att välja taggen <main> så måste det skrivas såhär:

js
const mainTag = document.querySelector('main');

📖 Läsanvisningar ​

🏋️ Övningsuppgifter ​

Dessa matchar ganska bra mot det vi kommer att göra denna vecka: 4 Geeks Academy

✅ Avstämning ​

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi
  • DOM
  • Node (ej Node.js)
  • createElement
Du är klar när…
  • Du vet hur du väljer ett element i DOM-strukturen
  • Du vet vad parent, child och siblings är i DOM-kontext
  • Du kan skilja på querySelector, querySelectorAll, getElementsByTagName, getElementsByClassName, getElementById

📚 Resurser ​

Våga Fråga-lådan ​

Anonyma frågelådan

Klar? ​

Happy coding!