Hoppa till innehåll

Utmaningar

Nedan finns tio frågor om DOM (Document Object Model) — hur webbläsaren representerar HTML som ett träd av noder och hur JavaScript kan läsa, skapa och manipulera dem. Frågorna bygger på veckans artiklar DOM-trädet, Att ändra i DOM:en och HTML templates.

Varje fråga har ett antal alternativ att välja bland. Klicka på “Visa lösning” för att se svaret och förklaringen.

Om du är osäker kan du alltid testa i webbläsarens devtools-konsol eller ta upp frågan på en handledning.

Fråga 09-01: Vilket objekt är webbläsarens globala objekt?

Section titled “Fråga 09-01: Vilket objekt är webbläsarens globala objekt?”
  1. document
  2. window
  3. object
  4. module

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2, window. window är webbläsarens globala objekt, och det nås också via det miljöoberoende namnet globalThis. Globala funktioner som setTimeout() och fetch() är egentligen egenskaper på window. Det gäller också variabler som deklareras med var på toppnivå i ett vanligt skript, men inte variabler i en modul, som har ett eget scope.

Fråga 09-02: Vad står förkortningen DOM för?

Section titled “Fråga 09-02: Vad står förkortningen DOM för?”
  1. Dynamic Object Moderation
  2. Document Over Modulation
  3. Document Object Model
  4. Dynamic Over Mode

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 3, Document Object Model. DOM är den trädstruktur av noder som webbläsaren bygger upp av HTML-dokumentet, och som JavaScript kan läsa och manipulera.

Fråga 09-03: Hur många element innehåller kodsnutten?

Section titled “Fråga 09-03: Hur många element innehåller kodsnutten?”
<p class="highlight overview">
  <a href="#">Foo</a>
</p>
  1. 2
  2. 3
  3. 4
  4. 5
  5. 6
  6. 7

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 1, 2. Två element: p-elementet och a-elementet.

Fråga 09-04: Hur många noder innehåller kodsnutten?

Section titled “Fråga 09-04: Hur många noder innehåller kodsnutten?”
<p class="highlight overview">
  <a href="#">Foo</a>
</p>
␣
  1. 2
  2. 3
  3. 4
  4. 5
  5. 6
  6. 7

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 5, 6:

  1. p-elementet.
  2. Textnoden med radbrytning och indentering mellan <p ...> och <a ...>.
  3. a-elementet.
  4. Textnoden Foo.
  5. Textnoden med radbrytningen mellan </a> och </p>.
  6. Textnoden med radbrytningen efter </p>, som avslutar kodsnutten.

Står kodsnutten sist i en fil utan avslutande radbrytning blir det fem. Attributen räknas inte; de hör till elementet men är inte noder i trädet.

Fråga 09-05: Hur många attribut innehåller kodsnutten?

Section titled “Fråga 09-05: Hur många attribut innehåller kodsnutten?”
<p class="highlight overview">
  <a href="#">Foo</a>
</p>
  1. 2
  2. 3
  3. 4
  4. 5
  5. 6
  6. 7

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 1, 2 attribut: class (med värdet "highlight overview") och href.

Fråga 09-06: Vilka alternativ väljer li-elementet med texten “Second one”?

Section titled “Fråga 09-06: Vilka alternativ väljer li-elementet med texten “Second one”?”
<body>
  <div>
    <ul id="numberlist">
      <li class="active">First one</li>
      <li>Second one</li>
    </ul>
  </div>
</body>
  1. document.querySelector('#SecondOne')
  2. document.querySelectorAll('li')[1]
  3. document.getElementById('numberlist').firstChild.nextSibling
  4. document.getElementById('numberlist').children[1]

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Alternativ 2 och 4 är korrekta: document.querySelectorAll('li')[1] och document.getElementById('numberlist').children[1].

Alternativ 1 fungerar inte eftersom det inte finns något element med id SecondOne, så querySelector returnerar null. Alternativ 3 hamnar på fel element: firstChild ger ul-elementets första barnnod, som är textnoden med mellanrum före <li class="active">. nextSibling från den textnoden är det första li-elementet, “First one”. För att nå “Second one” den vägen hade det behövts ytterligare två steg, eller firstElementChild.nextElementSibling.

Fråga 09-07: Hur skapar du en ny elementnod med JavaScript? (flera rätt)

Section titled “Fråga 09-07: Hur skapar du en ny elementnod med JavaScript? (flera rätt)”
  1. document.createElement()
  2. document.createTextNode()
  3. anotherNode.cloneNode()
  4. node:create "ELEMENT_NODE"

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Alternativ 1 och 3 är korrekta: document.createElement() skapar en ny elementnod, och anotherNode.cloneNode() klonar en befintlig nod, så att kopian blir en elementnod om originalet är ett element. createTextNode() skapar en textnod, inte en elementnod, och node:create "ELEMENT_NODE" är inte giltig JavaScript-syntax.

Fråga 09-08: Vilka klasser har div-elementet efter att koden körts?

Section titled “Fråga 09-08: Vilka klasser har div-elementet efter att koden körts?”
<div class="number"></div>
const div = document.querySelector('.number')
div.setAttribute('class', 'blue')
div.classList.toggle('number')
div.classList.add('tiger')
  1. red, blue, tiger
  2. blue, number, tiger
  3. blue, tiger
  4. red, number
  5. number, red, blue, number, tiger

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2, blue, number, tiger.

setAttribute('class', 'blue') skriver över hela class-attributet — number försvinner och bara blue finns kvar. classList.toggle('number') lägger tillbaka number eftersom den inte längre finns (toggle lägger till en frånvarande klass, tar bort en befintlig). classList.add('tiger') lägger till tiger. Slutresultatet blir blue number tiger.

Fråga 09-09: Varför använder du mallar (<template>)?

Section titled “Fråga 09-09: Varför använder du mallar (<template>)?”
  1. Det ger bättre prestanda än att skapa noder med JavaScript.
  2. Det hjälper dig att hålla isär HTML och JavaScript.
  3. Det är en bättre version av Flash.
  4. Mallar cachas i webbläsaren, men det gör inte JavaScript-kod.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. <template> gör det möjligt att separera HTML-struktur från JavaScript-logiken — innehållet skrivs som vanlig HTML-markup istället för att byggas upp nod för nod i JavaScript.

Fråga 09-10: Varför vill du undvika att sätta stil i dina JavaScript-filer? (flera rätt)

Section titled “Fråga 09-10: Varför vill du undvika att sätta stil i dina JavaScript-filer? (flera rätt)”
  1. CSS som sätts från JavaScript renderas inte.
  2. Moderna webbläsare tillåter inte att JavaScript ändrar CSS, eftersom det öppnar för säkerhetsproblem.
  3. Separation of concerns är ett designmål som förenklar underhållet av en applikation.
  4. Den som arbetar med designen vill troligen ha CSS-koden skild från JavaScript-koden.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Alternativ 3 och 4 är korrekta. Separation of concerns är en designprincip som förenklar underhåll av en applikation, och den som arbetar med designen vill vanligtvis kunna arbeta med CSS separat från JavaScript-koden. (Alternativ 1 och 2 stämmer inte — CSS som sätts från JavaScript renderas precis som vanligt, och det finns ingen sådan säkerhetsspärr i moderna webbläsare.) Byt i stället klass med classList och låt stilreglerna ligga i CSS-filen.

CCBY