JavaScript and the DOM

Question 1

Wat is de DOM? Waar staat de afkorting voor?

Answer 1

Document Object Model. Is het document dat je browser laat zien aan de gebruiker. Is in de kern een “gewoon” JavaScript Object met een aantal speciale functies en speciale mogelijkheden.

Question 2

Waar of niet waar.

De browser zelf is een Object

Answer 2

Waar.

De browser wordt ook wel de BOM genoemd (pun intended). De Browser Object Model. In de BOM bevindt zich de DOM.

Question 3

Wat doet:

document.getElementsByClassName(“button”)

Answer 3

Selecteert alle elementen op de pagina met de class “button”. Deze methode returned altijd meerdere elementen, vandaar elementS meervoud.

Question 4

Wat doet:

document.getElementById(“green-id”)

Answer 4

Selecteert 1 element, namelijk met het id “green-id”.

Question 5

Wat doet:

document.getElementsByTagName(“li”);

Answer 5

Selecteer alle “<li> li < /li>” elementen op de pagina</li>

Question 6

Moet ik de document methodes uit mijn hoofd kennen?

Answer 6

Nee, je kunt altijd heel gemakkelijk googlen naar “select X or Y element on page JavaScript”. Pak de documentatie van Mozilla, deze is het meest betrouwbaar.

Question 7

Wat is een DOM Eventhandler?

En wat is een Event?

Answer 7

Met DOM eventhandlers kun je met JavaScript bepaalde events vastmaken aan bepaalde HTML element. Deze HTML elementen “luisteren” dan naar deze events.

Events zijn: handelingen die plaatsvinden in de browser (meestal) door de gebruiker. Zoals: klikken, scrollen, hoveren etc.

Question 8

Wat doet:

document.querySelector(‘#foobar’);

Answer 8

Selecteert 1 elementen op de pagina: het element met de ID “foobar”

Question 9

Wat doet:

document.querySelector(‘.foobar’);

Answer 9

Selecteert alle elementen op de pagina met de class “foobar”. Dus het kúnnen meerdere elementen zijn.

Question 10

Wat doet:

document.querySelector(‘foobar’);

Answer 10

Dit zal niet werken.

Het gaat namelijk opzoek naar het element met de naam en dat bestaat niet.

Question 11

Wat doet:

document.querySelector(‘button’);

Answer 11

Selecteert alle button elementen op de pagina

Question 12

Kun je een HTML element in een variabele stoppen?

Answer 12

Ja! Dat doe je zelfs heel vaak

Question 13

Kun je meerdere HTML elementen in een variabele stoppen?

Answer 13

Ja! Dat kan zelfs hoofdpijn opleveren als je dénkt dat je met 1 element werkt, maar in werkelijkheid met meerdere elementen aan het werken bent.

Question 14

Hoe wordt een HTML element ook wel genoemd wanneer je met JavaScript en de DOM werkt?

Answer 14

Een node

Question 15

Wat is een Dom node?

Answer 15

Kort door de bocht: een html element

Lang door de bocht: The “DOM” is a tree structure that represents the HTML of the website, and every HTML element is a “node”

Question 16

Wat als je een error krijgt als je op een DOM methode die je probeert uit te voeren op een element?

Answer 16

Check altijd of je element echt echt echt is wat je verwacht. 9 van de 10 keer heb je niet (het juiste) element geselecteerd.

Question 17

Wat doet:

document.getElementById(‘myButton’)

Answer 17

Selecteert 1 element dat ‘myButton’ als ID heeft.

Question 18

Wat doet:

const myButton = document.getElementById('myButton')
myButton.addEventListener("click", function() {
        alert("button clicked!");
      });

Answer 18

Regel 1: selecteer de button met ID ‘myButton’
Regel 2: maak een eventhandler vast aan de button en vertel als tweede argument aan de button wat er moet gebeuren wanneer dit event plaatsvindt. In dit geval: wanneer een click event plaatsvindt op deze button alert dan “button clicked” aan de gebruiker.