Werken met het DOM

Home / Programmeren / Javascript / Werken met dom

Nu je al het een en al weer over Javascript weet is het handig om met het DOM te gaan werken. DOM staat voor Document Object Model, en is een manier om alle onderdelen van een webpagina te kunnen lezen en veranderen. Zo kun je controleren of een formulier wel helemaal is ingevuld, een plaatje veranderen, tekst in een pagina veranderen enzovoort. Je kunt er echt alles mee aanpassen. Als je dit eenmaal onder de knie hebt zul je merken dat het gebruik hiervan veel eenvoudiger is dan het gebruik van bijvoorbeeld alert() en prompt().

De techniek achter DOM

Zoals de naam al zegt is het Document Object Model een model met objecten. Als je niet weet wat een object is, geen nood. Je hoeft er alleen maar mee te werken, maar je hoeft niet perse te weten wat het precies is.

Wat is mogelijk?

Oke, genoeg gepraat, het is tijd om te laten zien wat er allemaal kan met DOM. Hieronder vind je een aantal knoppen. Onder elk van die knoppen zit een javascriptje dat iets veranderd aan deze webpagina. Let wel op: alleen als je Javascript aan hebt staan zal dit werken!

Valid XHTML 1.0 Transitional





Zoals je kunt zien kun je heel veel met DOM. Dit was maar een kleine greep uit de mogelijkheden. We gaan er nu mee aan de slag.

Hoe kun je een bepaald element oproepen?

Als je iets met het DOM wilt veranderen moet je natuurlijk wel doorgeven waar je het over hebt. Er zijn enkele manieren om een element aan te wijzen dat je wilt veranderen. Zo kan elke tag een name-parameter en een id-parameter hebben. Hieronder zie je een plaatje met de id 'javascripttestid'.

Valid XHTML 1.0 Transitional

Nu weet je dat een plaatje onder andere een src, alt, height en width parameter heeft. De waarden die hierbij horen kun je via DOM aanpassen. We gaan me de code hieronder het plaatje de breedte 350 geven. We geven daarom via Javascript de opdracht om een tag te zoeken die de id 'javascripttestid' heeft, en hiervan de width te veranderen naar 350.

<a onclick="document.getElementById('javascripttestid').width='350'">Klik hier om het plaatje te veranderen!</a>

Deze code geeft dit: Klik hier om het plaatje te veranderen! Probeer maar! Zoals je ziet werkt het. Alleen hoe zit dat stukje code bij onclick nu precies in elkaar? We splitsen alles op en leggen uit wat het betekend.

  1. Helemaal vooraan staat document. document staat altijd vooraan zo'n DOM-uitdrukking om aan te geven dat we iets in het DOM willen bekijken of wijzigen.
  2. Daarna staat er een punt. Zoals je ziet staan er meer punten in het hele rijtje. Die punten zijn een soort van scheiding tussen de verschillende onderdelen van de uitdrukking
  3. Daarna staat er getElementById('javascripttestid') Hiermee wordt bedoeld dat alles wat we willen opvragen of veranderen gaat over de tag met de id die javascripttestid heet. In dit geval is dat het plaatje daarboven.
  4. Dan staat er width. Daarmee geven we door dat we iets met de width-parameter willen doen.
  5. Als laatste staat er ='350'. Zo zeggen we dat alles wat ervoor staat moet worden veranderd naar 350. In dit geval veranderd dus de width-parameter van het bovenstaande plaatje.

Misschien ziet dit er wat lastig uit, maar als je straks eenmaal doorhebt hoe het werkt blijkt het helemaal niet moeilijk meer te zijn. In veel gevallen zal getElementById erg handig zijn, maar er zijn andere methodes om elementen aan te roepen. We gaan deze nu bespreken.

getElementsByName()

Nu gaan we de tags selecteren op naam in plaats van op id. Het verschil tussen een naam en een id is dat een id uniek moet zijn, en een naam meerdere keren mag voorkomen. Dat betekend dus dat je bij het oproepen van een element via zijn id er altijd maar een element is dat kan worden bedoeld, maar dat je bij het gebruik van een naam moet kiezen. We geven hieronder een voorbeeld.

<input type="text" name="eentekstveld" />
<input type="text" name="eentekstveld" />
<input type="text" name="eentekstveld" />

<input type="button" value="Klik hier om het eerste veld te vullen!" onclick="document.getElementsByName('eentekstveld')[0].value='Test!'" />
<input type="button" value="Klik hier om het tweede veld te vullen!" onclick="document.getElementsByName('eentekstveld')[1].value='Test!'" />
<input type="button" value="Klik hier om het derde veld te vullen!" onclick="document.getElementsByName('eentekstveld')[2].value='Test!'" />

Dan krijg je dit:








Zoals je ziet moet je hier werken met [0], [1] en [2] om aan te geven welk veld je bedoeld. Let hierbij op dat computers altijd bij 0 beginnen met tellen, en niet bij 1. Ook een instinker: het is getElementById() en getElementsByName(), omdat er bij de laatste meerdere velden "aangesproken" worden.

getElementsByTagName()

Deze functie lijkt erg veel op getElementsByName(). Het verschil is dat de tags niet geselecteerd worden via hun name-parameter, maar op hun soort. Zo kun je alle div- of alle span-tags oproepen. Omdat je hier ook meerdere mogelijkheden hebt moet je hier ook gebruik maken van [0], [1], [2] enzovoort.

Parameters en inhoud veranderen

Oke, we hebben nu 3 manieren geleerd om elementen bij hun naam op te sommen. Nu is het belangrijk dat we iets met die opgeroepen elementen gaan doen. Je kunt in ieder geval elke parameter in de tag veranderen door eenvoudigweg de naam van die parameter te gebruiken. Als je dus de src-parameter van een plaatje met de id eenplaatje aan wilt passen gebruik je dit.

<input type="button" onclick="document.getElementById('eenplaatje').src='plaatje.png'" />

Dit kun je met alle parameters van een tag doen. Het is echter ook handig dat je dat wat tussen de begin en de eindtag staat. Dit kan met innerHTML. Hier heb je een voorbeeld:

<div id="eendiv"></div>
<input type="button" onclick="document.getElementById('eendiv').innerHTML='Dit staat in de div-tag'" value="klik hier!" />

Dit levert het volgende op:

Er staat nu tekst in deze div-tag. Als je op de knop hieronder drukt wordt deze vervangen door andere tekst!

Zoals je ziet is ook dit heel eenvoudig. Het wordt pas echt interressant als we deze invoeg-methode gaan combineren met een techniek die data ergens vandaan haalt. Hoe je dat kunt doen lees je in de volgende tutorials.