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

Interactief met de DOM: HTML-elementen manipuleren met JavaScript
1 / 13
volgende
Slide 1: Tekstslide

In deze les zitten 13 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Interactief met de DOM: HTML-elementen manipuleren met JavaScript

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

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

Slide 3 - Woordweb

Deze slide heeft geen instructies

Wat is de DOM?
De Document Object Model (DOM) is een platform- en taalonafhankelijke interface die de structuur van een document representeert en het mogelijk maakt om de inhoud ervan te veranderen.

Slide 4 - Tekstslide

Deze slide heeft geen instructies

JavaScript en de DOM
JavaScript biedt de mogelijkheid om de DOM te manipuleren door het toevoegen, verwijderen of wijzigen van elementen en attributen.

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Selecteren van elementen
Met JavaScript kunnen elementen worden geselecteerd met behulp van querySelectors en getElementById om ze vervolgens te manipuleren.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Dynamisch elementen toevoegen
Met JavaScript kunnen nieuwe elementen dynamisch aan het DOM worden toegevoegd, waardoor de webpagina interactief en responsief wordt.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Elementen verwijderen
JavaScript maakt het mogelijk om elementen uit de DOM te verwijderen, wat handig is voor het opruimen van de interface of het reageren op gebruikersacties.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 11 - Open vraag

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.

Slide 12 - Open vraag

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.

Slide 13 - Open vraag

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.