Programmeren in JavaScript/Het Document Object Model: verschil tussen versies
Verwijderde inhoud Toegevoegde inhoud
Nieuwe pagina aangemaakt met '== Inleiding == Het document object model is een model waarbij een HTML document wordt omgezet in een boomstructuur van objecten. Als voorbeeld nemen we onze testpa...' |
|||
Regel 55:
De bijbehorende boomstructuur van objecten ziet er als volgt uit:
[[Afbeelding:DOM boom van testpagina.PNG]]
Elk knooppunt in de boom is een object. ▼
In de boom wordt bijvoorbeeld ''document'' de ouder (parent) van ''html'' genoemd en ''
▲Elk knooppunt in de boom is een object met eigenschappen en methoden.
Met javascript kunnen we elk van deze kinderen benaderen, bijvoorbeeld om informatie hierover af te drukken. U kunt dit zelf proberen door het script in de testpagina te plakken.
{{Code
| Taal=JavaScript
Regel 74 ⟶ 75:
</source>
}}
Als we dit op de testpagina uitproberen, zien we dat ''document'' twee kinderen heeft, beide met nodeName "html". Wat zou het verschil tussen beide nodes zijn? dat kunnen we zien aan een eigenschap van deze nodes, nl ''nodeType''. Laten we eens gaan kijken, en meteen vragen hoeveel kinderen elk van deze nodes heeft:
{{Code
Regel 91 ⟶ 92:
De testpagina geeft uitsluitsel:
CHILD: html (Type=10) 0 kinderen
CHILD: HTML (Type=1) 2 kinderen
Hieronder de betekenis van nodeType:
{| class="prettytable"
!Element-type
!nodeType
|-
|HTML-element
|1
|-
|Attribuut van een HTML-element
|2
|-
|Tekst
|3
|-
|Commentaar
|8
|-
|Document
|9
|-
|Document-type
|10
|}
Het eerste object komt dus overeen met <!DOCTYPE html>.
Het tweede object is het HTML-element ''html'' hetgeen de rest van het document bevat.
De attributen van HTML-elementen zijn in het plaatje niet weergegeven maar zijn wel degelijk onderdeel van de boom. Elk attribuut vormt weer een object en is
Met het onderstaande script kunnen we de afbeelding verder controleren. Het plaatje wijkt op één plaats af van het HTML-document. Probeer die plaats te vinden.
{{Code
| |||