DOM - Het Document Object Model.

Bron: http://www.sceneone.nl/algemeen/dom.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Het DOM ofwel het Document Object Model is een verzameling regels en afspraken over hoe een browser een web pagina interpreteert. Het DOM zit ingebakken in een browser en je kunt er niets aan wijzigen. Maar als je weet volgens welke basis regels het DOM werkt kun je er wel gebruik van maken. Je kúnt er niet alleen gebruik van maken, je maakt er gebruik van. Voortdurend.

Een hiërarchische structuur

Iedere HTML pagina is opgebouwd uit een aantal elementen die in een hiërarchische verhouding tot elkaar staan en samen de DOM tree vormen. Sinds de introductie van het DOM wordt een html pagina niet langer gezien als een lange serie tekens, maar als een verzameling op zichzelf staande elementen (objecten) die onafhankelijk van elkaar kunnen worden benaderd en gemanipuleerd en vormgegeven.
De elementen in de DOM tree hebben hun eigen specifieke eigenschappen: attributen. Deze attributen zijn ook beschreven in het DOM. Elementen in de DOM tree kennen ook hun eigen gedrag, ook beschreven in het DOM.

Met het DOM zelf hebben we niet zoveel te maken. Met de DOM tree des te meer!

Ouders en hun kroost

De hiërarchische structuur van een html document wordt omschreven in de vorm van parent-elementen en child-elementen
Bovenaan in deze structuur staat het <html> element. Zeg maar de Padre de Familias, de boss of all bosses. Het <html> element heeft twee directe 'children': <head> en <body>. Vervolgens is bijvoorbeeld <title> weer een 'child' van <head>. Je begrijpt dat <body> niet stil heeft gezeten en stikt van de 'children'.
Wanneer je het ene element in het andere plaatst wordt dit geneste element automatisch het 'child' van het bovenliggende element:

<div class="container"><p>Eigenlijk is de structuur van een html document een grote<strong><em>family</em> business</strong></p></div>

In bovenstaand voorbeeld is de <p> het 'child' van de <div>, terwijl <p> weer de 'parent' is van <strong> en <em> op zijn beurt weer het 'child' is van <strong>
"class" is een attribuut van de <div>.
Het standaard gedrag van een <div> en een <p> is dat ze block elementen zijn en bijvoorbeeld een <strong> is een inline element. Lees hier meer over inline - en block elementen.

Er zijn 2 manieren om de elementen in de DOM te manipuleren. Met JavaScript en met CSS.
Wij zullen onszelf concentreren op de manier waarop je via CSS de verschillende elementen direct kunt benaderen en vormgeven.

Wil je meer weten over het DOM, kijk dan eens hier

naar het begin van de pagina