Ontdek het Document Object Model in JavaScript

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

 Document Object Model in JavaScript

Waar aan denk je als je Document Object Model hoort

Leerdoelen

1. Het DOM uitleggen 

2. DOM-elementen selecteren en manipuleren met JavaScript 

3. Events en event listeners toepassen op DOM-elementen

Dit is een goede plek om de leerdoelen van de les te delen.

Wat is het DOM?

Het Document Object Model (DOM) is een programmeerinterface voor HTML- en XML-documenten. Het vertegenwoordigt de pagina, zodat programma's zoals JavaScript de structuur, stijl en inhoud van de pagina kunnen wijzigen.

Hier legt de leraar uit wat het DOM is en waarom het belangrijk is voor het ontwikkelen van webpagina's.

DOM-elementen selecteren

De 'document' variabele en verschillende methoden zoals getElementById, getElementsByClassName en querySelector.

Hier laat de leraar verschillende manieren zien om DOM-elementen te selecteren met JavaScript.

DOM-elementen manipuleren

Stijl en attributen van DOM-elementen wijzigen met behulp van methoden zoals innerHTML, style en setAttribute.

Hier laat de leraar zien hoe je de inhoud, stijl en attributen van DOM-elementen kunt wijzigen met JavaScript.

Hoe kan ik een element van kleur veranderen met JS?

1. Style.Color==red
2. Style.color="red"
3. Color =="red"
4. Color=red

Events en event listeners

Events zijn acties die worden uitgevoerd door de gebruiker of de browser, zoals klikken op een knop. JavaScript kan reageren op deze events door event listeners toe te passen op DOM-elementen.

Hier legt de leraar uit wat events zijn en hoe je event listeners kunt toepassen op DOM-elementen.

Welke andere User events kan je bedenken

Voorbeeld: Verander achtergrondkleur

In dit voorbeeld gebruiken we JavaScript om de achtergrondkleur van een HTML-element te veranderen wanneer erop wordt geklikt.

Hier laat de leraar een interactief voorbeeld zien van hoe het DOM kan worden gemanipuleerd met JavaScript.

Oefening: Maak een interactieve knop

Gebruik JavaScript om een knop te maken die de tekst van een HTML-element verandert wanneer erop wordt geklikt.

Hier geeft de leraar een oefening om de studenten de kans te geven hun vaardigheden met het DOM en JavaScript te oefenen.

Samenvatting

Het DOM is een belangrijk concept voor het ontwikkelen van webpagina's met JavaScript. Het stelt ontwikkelaars in staat om de structuur, stijl en inhoud van een pagina te manipuleren.

Dit is een goede plek om de belangrijkste punten van de les samen te vatten en te benadrukken waarom het DOM belangrijk is.

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.