26/07/11

Document Object Model (DOM)

Het Document Object Model (DOM) is een ‘application programming interface’ API voor HTML en XML documenten. Het DOM omvat de logische structuur en opbouw achter deze documenten en de manier hoe je door deze documenten kunt navigeren om ze te kunnen bewerken en manipuleren. XML wordt gebruikt om de verschillende stukken informatie te presenteren en de DOM wordt gebruikt om deze data te beheren. Het Document Object Model is het platform waar de JavaScript programmeur documenten kan opbouwen, door deze documenten kan navigeren, elementen en inhoud kan toevoegen, bewerken en verwijderen.

Wat is het Document Object Model precies?

Het Document Object Model is een API voor HTML en XML documenten. Het is gebaseerd op een object structuur dat de structuur van documenten weerspiegeld.

Voorbeeld:

De grafische presentatie van het DOM van de bovenstaande HTML tabel is:

Afbeelding: w3c.org

Terminologie van het DOM

De volgende termen zijn gerelateerd aan de werking van het Document Object Model en XML documents.

Ancestor

Ancestor verwijst naar de directe parent van een element, en de directe parent van de parent, en de directe parent van die parent, enz … tot aan het <html> element. Van bovenstaand voorbeeld zijn de ancestors van onze eerste <td> cel de volgende: <tr>, <tbody>, <table>, <body><html>

Attribute

Attributes zijn eigenschappen van HTML elementen die extra informatie bevatten van het element. Bekende attributes zijn title, href, alt, style, …

Child

De elementen in een HTML element zijn de children van dat element. Elementen kunnen zowel andere elementen en text nodes als children hebben.

Document

Elk XML document bestaat uit één element (de root node of document element) die alle eigenschappen bevat van het document.

Descendant

De descendants van een element bevatten de childnodes van dat element, de childnodes van die childnodes, enz …

Element

Een element is een container die attributes en andere nodes bevat. XML documenten zijn opgebouwd uit elementen en deze bepalen de structuur van het document. Bekende elementen zijn <html>, <head>, <body>, <title>, …

Node

Een node is een unit in de DOM representatie. Elementen, attributes, comments, documents en text nodes zijn allemaal nodes. Ze hebben typische node eigenschappen zoals nodeType, nodeName en nodeValue.

Parent

Met de term parent verwijs je naar het element waarin een bepaald element bevat zit. In bovenstaand voorbeeld is <tr> de directe parent van (alle) <td> elementen. Alle elementen hebben een parent element, behalve de root node.

Sibling

Een sibling node zijn children die hetzelfde parent element met elkaar delen. Deze term wordt doorgaans gebruikt in de context als previousSibling en nextSibling. Twee attributes die die je in alle DOM nodes terug vindt. In het bovenstaande voorbeeld zijn alle <td> elementen siblings van elkaar.

Text node

Een text node is een speciale node die enkel tekst en witte ruimte (white spaces) kan bevatten. Dus als je text in een element ziet, zit er eigenlijk een aparte text node in dat element. In het bovenstaande voorbeeld bevat de textnode van het eerste element ‘Shady grove’.

Interessante links:

copyright 2011 agmino web solutions