Inleiding HTML en CSS

De DOM

Binnen het werken met HTML werken we ook met het Document Object Model of in het kort DOM. De DOM van een webpagina bevat alle HTML-elementen die erop de pagina zijn, dus alles wat binnen de <html> en </html> tags staat.

Zoals de benaming al zegt deelt het de pagina op in objecten ook wel nodes genoemd. Voor nu spreken we over elementen of nodes.

Een voorbeeld van een node in een DOM (pagina) kan een anchor element zijn:
<a href="google.com">Klik hier om te zoeken</a>
In het bovenstaande voorbeeld heb je een node van een anchor element.

Een element met elementen erin

Een node kan uit meerdere HTML-elementen bestaan, bijvoorbeeld omdat je een list selecteert of een section met articles erin. Alle elementen/ tekst en onderdelen van de gekozen node vallen in diezelfde node.

<ol class="my-list">
    <li>Eerste item</li>
    <li>Tweede item</li>
    <li>Derde item</li>
</ol>

Als je in bovenstaande code het ol element zou selecteren bestaat de node dus uit 4 elementen, de ol en de drie li elementen. Ook alle tekst die in de list-items (li) staat zit in de node. Later zullen we erop in gaan hoe je informatie in zo een node kan vinden en aanpassen.

Child & parent elementen

In bovenstaand voorbeeld hebben we een ol en in deze node zitten nog drie elementen de li elementen. In een node spreken we van een parent en child constructie. De ol is de parent (de ouder) en deze heeft drie child-elementen (kinderen) namelijk de li list-items.

Jouw JavaScript

Op de MBO-SD Fiddle site kan je meer oefenen met deze stof.

Klik hier voor de MBO-SD Fiddle site