Oefening 1: de stijl en de tekst van

een node aanpassen via id

In de vorige opdracht hebben we geleerd hoe je een element node met een bepaalde id
selecteert.
Aan alleen selecteren heb je niet zoveel, je wil juist de node selecteren om er iets mee te
doen.
Let op! je past hiermee alleen de DOM Tree in je browser aan, niet je HTML document.
De wijzigingen worden zijn dus niet meer aanwezig als je je pagina opnieuw laadt.
Hieronder enkele voorbeelden:

JavaScript code om een element aan te passen

Op de vorige pagina heb je geleerd dat je met: document.getElementById("id") een element

met een bepaalde id kan selecteren. Daarna moet aangeven wat je aan het element wilt
aanpassen.
Hiervoor gebruik je dus de id van een element. Heb je een element de id: "mijnEl" gegeven
en wil je deze benaderen dan schrijf je natuurlijk:

document.getElementById("mijnEl")

Zet dus altijd de id van het element wat je wilt bereiken tussen ("")!

wat wil je aanpassen aan code

een element?

de achtergrond kleur: omdat achtergrond kleur een onderdeel is van de stijl begin je met:
het resultaat: style

daarna zeg je dat het dat het om de achtergrond kleur gaat:

backgroundColor

daarna moet je aangeven wat de achtergrond kleur moet worden:

"orange"

nu moet je alles aan elkaar plakken:

document.getElementById("id").style.backgroundColor = "orange";

de lijn omdat border een onderdeel is van de stijl begin je met:

het resultaat:

style

daarna zeg je dat het dat het om de lijn gaat:

border

daarna moet je aangeven wat de border dikte, stijl en kleur moet worden:

"1px solid black"

nu moet je alles aan elkaar plakken:

document.getElementById("id").style.border= "1px solid black";

de tekst Tekst is een onderdeel van het nodeElement om deze tekst te benaderen gebruik
het resultaat: innerHTML

daarna moet je aangeven wat de tekst moet worden:

"hallo"

nu moet je alles aan elkaar plakken:

document.getElementById("id").innerHTML = "hallo";
 de kleur van de tekst omdat tekstkleur een onderdeel is van de stijl begin je met:
het resultaat: style

daarna zeg je dat het dat het om de tekstkleur gaat:

color

daarna moet je aangeven wat de tekstkleur moet worden:

"white"

nu moet je alles aan elkaar plakken:

document.getElementById("id").style.color= "white";

Hierboven zijn maar enkele voorbeelden genoemd wil je meer weten

check: https://www.w3schools.com/jsref/dom_obj_style.aspLinks to an external site.

Oefening
Vul in het linker scherm hieronder de juiste code in om:

 het eerste node element (id: list_0) te selecteren en van kleur te veranderen.
 het tweede node element (id: list_1) te selecteren en een zwarte border te geven.
 het derde node element (id: list_2) te selecteren en daar de tekst "geselecteerd" in
te zetten.
 het derde node element (id: list_2) te selecteren en de tekst wit te maken.

Als je in het linker scherm hieronder de juiste code intypt zie je dit meteen veranderen in het
rechter scherm hieronder!

Resultaat:

https://codepen.io/VvdL/pen/eYKzLEO

Zie je niet dit resultaat dan heb je misschien iets fout getypt, inspecteer dan je code via
de Google Devtools! (zie: Debugging)

Oefening 2: een attribuut van een

node aanpassen via id
In de vorige oefening heb je geleerd hoe je de style en de tekst van een node aan kan passen.
Je kan ook het attribuut (zoals bijvoorbeeld: href, src en class) van een node aanpassen.
Let op! je past hiermee alleen de DOM Tree in je browser aan, niet je HTML document.
De wijzigingen worden zijn dus niet meer aanwezig als je je pagina opnieuw laadt.
Hieronder enkele voorbeelden:

JavaScript code om het attribuut van een node aan te passen

Op de vorige pagina heb je geleerd dat je met: document.getElementById("idnaam") een

element met een bepaalde id kan selecteren. Daarna moet aangeven wat je aan het element
wilt aanpassen.

wat wil je aanpassen? code

de waarde van het a
attribuut href omdat je de waarde van het href attribuut wilt aanpassen gebruik je:

href

daarna moet je aangeven wat de nieuwe waarde moet worden (bijvoorbeeld):

"homepage.html"

Nu moet je alles aan elkaar plakken:

document.getElementById("id").href= "homepage.html";

de waarde van het img

attribuut src (hierdoor omdat je de waarde van het class attribuut wilt aanpassen gebruik je:
wordt er een andere
afbeelding geplaatst) src

daarna moet je aangeven wat de nieuwe waarde moet worden (bijvoorbeeld):

"images/foto.jpg"

Nu moet je alles aan elkaar plakken:

document.getElementById("id").src= "images/foto.jpg";

de waarde van het attribuut:

class omdat je de waarde van het class attribuut wilt aanpassen gebruik je:

className

daarna moet je aangeven wat de nieuwe waarde moet worden (bijvoorbeeld):

 "myActiveButton"

Nu moet je alles aan elkaar plakken:

document.getElementById("id").className = "myActiveButton";

Hierboven zijn maar enkele voorbeelden genoemd wil je meer weten check alles onder de
kop HTML Objects in: https://www.w3schools.com/jsref/dom_obj_anchor.aspLinks to an
external site.

Oefening
Vul in het linker scherm hieronder de juiste code in om:

 het attribuut href van het node element (a) met id: link te selecteren en de waarde
te veranderen in "https://tinyurl.com/3utk7wtw"
 het attribuut src van het node element (img) met id: image te selecteren en de
waarde te veranderen in "https://tinyurl.com/43xyj78n"
 het attribuut class van het node element (a) met id: knop te selecteren en de
waarde te veranderen in "myActiveButton"

Als je in het linker scherm hieronder de juiste code intypt zie je dit meteen veranderen in het
rechter scherm hieronder!
Let dus goed op of je alles goed intypt!
https://codepen.io/VvdL/pen/poKbOWB

Resultaat
Ben jij ook benieuwd wat je ziet veranderen? Helaas kan je het bij een van de
elementen niet zien zonder erop te klikken...
Dus voer de opdracht uit en klik daarna op alle elementen in het rechterscherm.
O en misschien moet je je geluid wat zachter zetten... speel 2 levels en ga dan weer
verder met de opdracht!
Zie je niks dan heb je misschien iets fout getypt, inspecteer dan je code via de Google
Devtools! (zie: Debugging)

Oefening 3: een node element

toevoegen via id
Naast het aanpassen van stijlelementen of attributen kun je ook element nodes toevoegen.
Bekijk onderstaande voorbeelden:
Wat wil je doen? Code
Een nieuw element toevoegen
Je moet altijd star

document

De code om een n

createElement();

Tussen de haakjes
aanmaken type je:

createElement("p");

Wil je een li element a

Omdat je niet zom

moet je een variab
wordt dan:

const myNode = d

Het nieuwe element toevoegen aan een ander element Als eerste moet je
je het juiste eleme

document.getElem

De code om een n

appendChild();

Tussen de haakjes
creëerde.
Let op! een variab

appendChild(myNo

De gehele code w

document.getElem

Teskt toevoegen aan het nieuwe element Als je ook tekst w

const nodeText = doc

Om de tekst toe te
 myNode.appendChild

Zie je dat je hierb

variabelenaam vo

const myNode = docu

Bovenstaande code combineren: const myNode = d

const nodeText = doc

myNode.appendChild
document.getElem

Oefenen

Voeg een li element toe aan het ul element met de id: nav:
https://codepen.io/VvdL/pen/MWXQYjP

Resultaat:

Zie je niet dit resultaat dan heb je misschien iets fout getypt, inspecteer dan je code via
de Google Devtools! (zie: Debugging)

Oefening 4: een node element

verwijderen via id
Naast het aanpassen van stijlelementen of attributen en het toevoegen van een element node
kun je ook element nodes verwijderen.
Bekijk onderstaande voorbeelden:

Wat wil je doen? Code

Een element node verwijderen Als eerste moet je

 document.getElem

De code om een n

remove();

De gehele code w

document.getElem

Oefenen
Verwijder alle elementen!
Pas eerst de HTML aan zodat de elementen die je moet verwijderen een id hebben.
Je kan de HTML aanpassen door op de knop HTML te klikken!
https://codepen.io/VvdL/pen/MWXQYjP
Zie je niet dit resultaat dan heb je misschien iets fout getypt, inspecteer dan je code via de
Google Devtools! (zie: Debugging)

Oefening 5: een property van een

node element opvragen via id
Naast het aanpassen van nodes kun je ook informatie over een node opvragen, bijvoorbeeld
welke kleur de tekst is of welke class het element heeft.
Kleur, class etc noemen we properties.
Bekijk onderstaande voorbeelden:

Wat wil je doen? Code

Informatie van een element node opvragen welke niet in de css staat. Omdat je de waar

const el = docum

Vervolgens kun je
hieronder laten we
variabele:

alert(el.className);
alert(el.innerHTML);
Informatie van een element node opvragen welke in de css staat. Omdat je de waar

const el = docum

Omdat de css niet

kunnen we niet m
volgende gebruike

getComputedStyle

Vervolgens kun je
bijvoorbeeld de ac

alert(getComputedSty

Bovenstaande we
getPropertyValue

const el = docum
const cssObj = w

alert(cssObj.getPrope

Oefenen
Vraag via JavaScript de class, de achtergrond kleur, de tekst kleur en de tekst op van het
element met de id: info
https://codepen.io/VvdL/pen/eYKPNzG

Resultaat:
De class naam, de tekst kleur, de tekst en de achtergrond kleur van het element met de
id:info.

Zie je niet dit resultaat dan heb je misschien iets fout getypt, inspecteer dan je code via
de Google Devtools! (zie: Debugging)