Les 5. Interactief met de DOM: HTML-elementen manipuleren met JavaScript

Interactief met de DOM: HTML-elementen manipuleren met JavaScript

Leerdoel

Aan het einde van de les kan je de basisinteracties met de DOM uitleggen en HTML-elementen manipuleren met JavaScript.

Wat weet je al over het manipuleren van HTML-elementen met JavaScript?

DOM = Document Object Model

Een programmeerinterface voor webdocumenten.

Stelt JavaScript in staat om de structuur, stijl en inhoud van een webpagina te manipuleren

Een boomstructuur van objecten die de pagina representeert

Html

Boomstructuur

Zonder de DOM

• Statische webpagina's 
• Geen interactie mogelijk
  
• Geen dynamische content

Met de DOM

• Dynamische webpagina's 
• Interactieve elementen
  
• Real-time updates
  
• Responsieve interfaces

Hoe werk je met de DOM

Element selecteren 👆

Element manipuleren 🛠️

Event listeners toevoegen 🎯

Selecteren van elementen

Elementattributen wijzigen

JavaScript stelt ons in staat om de attributen van HTML-elementen te bewerken, zoals het veranderen van de tekstinhoud, het toevoegen van klassen of het wijzigen van stijlen.

Eventlisteners

Opdracht

Dom manipulatie

Samenvatting

De interactie met de DOM en het manipuleren van HTML-elementen met JavaScript stelt ontwikkelaars in staat om dynamische en interactieve webpagina's te creëren.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.