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.

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: Which object is the “global object” in the browser?

Section titled “Fråga 09-01: Which object is the “global object” in the browser?”
  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 — alla globala variabler och funktioner blir egentligen egenskaper på window.

Fråga 09-02: DOM is an abbreviation for….

Section titled “Fråga 09-02: DOM is an abbreviation for….”
  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: How many “Elements” does the snippet contain?

Section titled “Fråga 09-03: How many “Elements” does the snippet contain?”
<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: How many “Nodes” does the snippet contain?

Section titled “Fråga 09-04: How many “Nodes” does the snippet contain?”
<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. 6 noder: p-noden, a-noden, textnoden “Foo” samt tre tomma textnoder som bara innehåller whitespace (mellanslag/radbrytningar) mellan taggarna.

Fråga 09-05: How many “attributes” does the snippet contain?

Section titled “Fråga 09-05: How many “attributes” does the snippet contain?”
<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: Which options do you have to select the li element containing the text node “Second one”?

Section titled “Fråga 09-06: Which options do you have to select the li element containing the text node “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. Alternativ 3 fungerar inte heller som skrivet — firstChild ger ul-elementets första barn-nod, vilket här är whitespace-texten före <li class="active">, inte li-elementet självt.

Fråga 09-07: How do you create a new ELEMENT_NODE using JavaScript? (Multiple choice)

Section titled “Fråga 09-07: How do you create a new ELEMENT_NODE using JavaScript? (Multiple choice)”
  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 Element-nod, och anotherNode.cloneNode() klonar en befintlig nod (inklusive dess nodtyp). createTextNode() skapar en text-nod, inte en Element-nod, och node:create "ELEMENT_NODE" är inte giltig JavaScript-syntax.

Fråga 09-08: Given HTML and CSS. Which class/classes is set on the div?

Section titled “Fråga 09-08: Given HTML and CSS. Which class/classes is set on the div?”
<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: Why do we use templates (<template>)?

Section titled “Fråga 09-09: Why do we use templates (<template>)?”
  1. Better performance than creating nodes using JavaScript.
  2. They help us separate HTML from JavaScript.
  3. It is a better version of Flash.
  4. Templates are cached in the browser. JavaScript code is not.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. <template> hjälper oss 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: Why do we not want styling to be done in our JavaScript files? (multiple choice)

Section titled “Fråga 09-10: Why do we not want styling to be done in our JavaScript files? (multiple choice)”
  1. CSS generated from JavaScript will not be rendered
  2. Modern browsers won´t accept CSS manipulation in JavaScript code as it opens up for security issues
  3. Separation Of Concern is a design goal that simplifies the maintenance of an application
  4. Designers would probably like to have CSS separated from JavaScript

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 designers vill vanligtvis kunna jobba 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.)

CCBY