Lesweek 3: DOM scripting

Leerdoelen

• Je kunt met getElementById() XHTML elementen in je document benaderen
• Je kunt de waarde van een XHTML element attributen uitlezen en/of aanpassen
• Je kunt door het class of id attribuut aan te passen de vormgeving van een XHTML element beinvloeden
• Je kunt door het src attribuut van een img aan te passen een plaatje veranderen
• Je begrijpt de node structuur van het DOM en kent verschillende nodeTypes
• Je kunt de tekst tussen de open- en sluit-tag van een element aanpassen door de nodeValue van de firstChild te veranderen
• Je kunt de console van Firebug gebruiken om de (CSS) eigenschappen van XHTML elementen op te vragen

De inhoud van deze lesbrief komt grotendeels overeen met hoofdstuk 3 van het boek. Daar kun extra uitleg vinden.

DOM

DOM staat voor Document Object Model.

Het woord Object is het meest belangrijke datatype binnen JavaScript. Een object is net als in het gewone taalgebruik iets met eigenschappen (properties) en dingen die je het kan laten doen of vragen: functies (methods).

Voorbeeld: een object boek heeft eigenschappen (dikte, gewicht, titel) en functies (een boek kun je openslaan, ergens neerleggen)

Voorbeeld: een object mens heeft eigenschappen (naam, gewicht, leeftijd) en functies (een mens kan een opdracht uitvoeren, een vraag beantwoorden)

In JavaScript is de syntax

	<Object.property>
	<Object.method( )> 

(tussen haakjes staan parameters die je meegeeft in de aanroep en aangeven hoe de methode moet worden uitgevoerd).

Een mens is een voorbeeld van een mogelijk object. Er zijn echter vele verschillende mensen. Het object mens kun je vergelijken met een algemene vorm (met algemene properties en methods). Individuele mensen zijn dan zogenaamde instanties van het object mens, met dezelfde algemene properties en methods.

Er zijn drie soorten objecten in JavaScript:

host objects: objecten die ondersteund worden door de gebruikte webbrowser. Dit zijn bijvoorbeeld Image, Form, Element. We kunnen deze gebruiken in JavaScript (aanroepen, wijzigen, .....).
Native object: dit zijn object die al in JavaScript aanwezig zijn. Dit zijn bijvoorbeeld variabelen, Math (voor allerlei wiskundige functies), Date (voor tijd en kalender functies).
User-defined objects: dit zijn eigengemaakte objecten.

Het woord Document staat voor het object dat de inhoud van het browserscherm weergeeft. De vele properties en methods van het object Document zullen we in deze cursus uitgebreid leren kennen.

Het woord Model staat voor een representatie van iets. Voorbeelden: een modeltrein, een kaart van Rotterdam.

Een DOM is de representatie van de webpagina die aanwezig is in het browser-scherm als een boom. Dit is weergegeven in het boek in figuur 3-1 op pagina 44. Deze is ook al in les 2 en 3 van het vorige blok aan de orde geweest. Je kunt dit nakijken als het weggezakt is. In Aptana Studio is in de DOM tree van de onderhanden xhtml code te zien in het rechtervenster. Dit is handig om de hierarchie van alle nodes in de gaten te houden. De DOM kent enkele methoden die helpen om elementen te benaderen. We zullen een simpele bekijken.

GetElementById, getAttribute en setAttribute

Met getElementById is de id van een element in xhtml op te vragen. Dit kan vervolgens in JavaScript gebruikt worden.

 document.getElementById(id)

Tussen de haakjes kun je tussen quotes de naam van de gewenste id aangeven. Denk eraan dat methoden case-sensitive zijn en dus op exact deze wijze gebruikt moeten worden.

Nu we weten hoe de id van een element is op te vragen, is het de volgende stap om de waarden van zijn attributen op te vragen en, indien gewenst, te wijzigen.

Het opvragen gaat met behulp van de functie getAttribute. Het argument is de naam van het gewenste attribute.

object.getAttribute(attribute)

Met de functie setAttribute is waarde van een attribute te wijzigen.

object.setAttribute(attribute,value)

Lesopdracht

1. Maak een pagina die een alert geeft en als je daar op klikt veranderd de achtergrondkleur van de pagina.

2. Maak een pagina die een prompt geeft met de vraag om je naam in te typen. Vervolgens wordt deze naam gebruikt om de tekst in de tag h1 aan te passen.