Het Document Object Model (DOM) is een standaard om HTML en XML documenten te definiëren. Het is een taal onafhankelijke standaard dat de structuur van een document representeert. Een voorbeeld van een HTML document is altijd:
<html> <head> <title>Document Object Model</title> </head> <body> </body> </html>
JavaScript's interpretatie van DOM betekent dat elke tag in dit document een object is (vandaar de naam). Met JavaScript is het dus mogelijk om elke tag te manipuleren naar eigen zin. Maar JavaScript stopt niet bij manipulatie. Met JavaScript kun je ook tags (objects) aanmaken.
We hadden het net over manipulatie. Met JavaScript is het mogelijk om een element in de DOM te wijzigen naar hoe je het wil hebben. Je kunt bijvoorbeeld een HTML element CSS eigenschappen geven. Daarnaast zijn er nog vele andere mogelijkheden om elementen te manipuleren.
We hebben een DIV zonder border met tekst erin zoals je kunt zien bij het voorbeeld. Zodra men klikt op de link zal er een dash-border van 1 pixel omheen verschijnen.
Het aanpassen van CSS is hetzelfde als het wijzigen van een Attribuut in een Object. Dit betekent dat het Object het DOM element is en de Attribuut zijn de DOM attributen van het element.
De Attribuut van een HTML element voor CSS is style. Er is wel een uitzondering bij deze attribuut. Het is namelijk ook een Object. Elk stijl type (zoals background-color) is een Attribuut van dit Object en is dus beschikbaar in JavaScript. Aangezien dashes in JavaScript niet mogelijk zijn als attribuut naam, is er een andere oplossing gevonden voor naamgeving van deze attributen. Meestal worden de dashes van deze attributen vervangen en de eerste letter van het woord na de dash is een hoofdletter: background-color word dan backgroundColor.
Het is ook mogelijk om een element aan te maken via JavaScript. Dit is vergelijkbaar als je kijkt naar G-mail's website bij het verzenden van een e-mail. Je kunt dan veel attachments toevoegen door op een link te klikken die elementen on the fly aanmaakt. JavaScript heeft een speciale functie voor het aanmaken van een element. Na het aanmaken is het mogelijk attributen te geven aan het element. Als laatste van het proces kun je hem appenden aan een bestaande element. Als je geen element hebt, is het mogelijk het te appenden aan het document door het Object document te gebruiken.
Voor dit voorbeeld maken we de "on the fly G-mail attachment elementen" link. Zo zie je de belangrijkste functies die JavaScript aanbiedt. Bij het aanmaken van een element moet je tijdens het aanmaken het element in een variabele opslaan. De functie die een element aan kan maken is een method van het document Object. Attributen kun je daarna toevoegen aan het element door de net aangemaakte variabele te gebruiken. Die bevat namelijk nu methods.
Naast het aanmaken en wijzigen van een element moet er natuurlijk een mogelijkheid bestaan voor het verwijderen van een element. Dit kan ook met behulp van een functie dat elk element heeft. In het voorbeeld zie je dat er een verwijder linkje erbij is gekomen voor de attachments elementen die on the fly worden toegevoegd. Bij het verwijderen van element, moet je eerst weten wie zijn "parent" is.
De parent van een element is altijd het element waar de "child" zich rechtstreeks bevind zonder tussenstap. In het code fragment hieronder is de div "parent" de parent van de child element genaamd "child".
<div id="grandparent"> <div id="parent"> <div id="child"></div> </div> </div>
Ook is er een ID-veld bij gekomen. Zo kunnen we het element herkennen en zo verwijderen. Nu is het lijstje compleet en kun je nu elementen makkelijk manipuleren, aanmaken, wijzigen en zelfs verwijderen.
DOM manipulatie in javascript gaat ook zover dat het HTML elementen kan wijzigen. Aangezien elk element een Object is, is het mogelijk zijn attributen te wijzigen. Dit kun je doen door een =-teken achter te plaatsen met een nieuwe waarde. Zo kun je bijvoorbeeld de achtergrond kleur van een div wijzigen naar een rode kleur met het volgend voorbeeld:
document.getElementById('divElementId').style.backgroundColor = '#FF0000';
Zoals je kunt zien word hier het attribuut backgroundColor gewijzigd met behulp van het =-teken en een nieuwe waarde. Een andere mogelijkheid is het transformeren van een element naar een ander element. Dit is goed mogelijk met input velden, aangezien die een attribuut hebben die hun element type definieert. Zo kun je van een tekst element een password element maken met het volgend voorbeeld:
document.getElementById('textElementId').type = 'password';
Kortom, alles is in DOM manipuleerbaar met JavaScript als je onthoud dat alle elementen een Object is met Attributen dat aanpasbaar zijn.
Deze cursus is afkomstig van Cursus Javascript
Het is verboden zonder schriftelijke toestemming deze pagina in welke vorm dan ook te publiceren.