6. Document Object Model

HTML DOM beschrijft de hiërarchische structuur van een webdocument,
bv: document – body – formulier – veld – veldinhoud (value)

Op www.w3schools.com vind je een volledig overzicht van het DOM.

6.1. Objecten aanspreken

De boomstructuur vertrekt vanaf een gemeenschappelijke stam (window), waarop aftakkingen voorkomen en aan het uiteinde de bladeren.
Elke verdere aftakking is een child van de vorige, de parent. Elk HTML-element is een knooppunt, node.

Om de knooppunten te kunnen benaderen moet elk knooppunt uniek geïdentificeerd kunnen worden.
In JavaScript gebruiken we daarvoor een ID; je kent ondertussen wel document.getElementById()

Level 0 DOM werd geïntrodeerd door Netscape rond dezelfde tijd als JavaScript. Het model ondersteunde maar enkele elementen, nl. <a>, <img>, <form> en formulierelementen.
Elk element werd in een array van gelijkaardige elementen gezet. bv: document.forms[0].elements[1] geeft toegang tot het tweede element in het eerste formulier op de pagina.

Internet Explorer DOM, ook All DOM genoemd, sprak alle elementen aan via "all". bv: document.all["naam"].value of document.all.naam.value

W3C moest weer voor een standaard zorgen. Zo ontstond W3C-DOM waar de elementen aangesproken worden via één van volgende methodes:

Binnen het W3C-DOM kan je dan verder gaan met de parent/child-relatie:

Vervolgens breng je met DOM-scripting leven in de brouwerij: vanuit JavaScript kan je o.a. de value, innerHTML of style van de DOM-elementen aanpassen.

6.2. Dynamische stijlen

Met document.getElementById("id").style.CSSeigenschap kan je het uitzicht van elementen wijzigen.
Je moet maar op één ding letten: overal waar in de CSS-stijldefinitie een klein streepje staat (bv: z-index, font-size) wordt dat in JavaScript weggelaten en de volgende letter is een hoofdletter (bv: zIndex, fontSize).

Met dynamische stijlen kan je het uitzicht van elementen op de pagina veranderen zonder een nieuwe pagina te laden.
Bekijk als voorbeeld de broncode van pagina testdyn.html, waar de titel via zijn ID 'hoofding' aangeroepen wordt.

Je kan nog een stapje verder gaan, bv. tekst laten verschijnen door een muisklik, zoals in dit voorbeeld.
De HTML-tag SPAN dient om een woord of enkele woorden samen kunnen aan te spreken via CSS of JavaScript.

De gebruiker zelf de achtergrondkleur laten kiezen is ook leuk, zoals je hier kan zien.


6.3. Werken in lagen

Met de HTML-tag DIV kan je een deel van je document, een sectie, alinea, enz. apart nemen en aanspreken via CSS of JavaScript.
Zo'n sectie kan je dan via CSS een vaste positie geven (position:absolute), op andere elementen stapelen (z-index) enz.

Enkele voorbeelden:

6.4. CreateElement

Je kan via JavaScript alle mogelijke HTML-elementen aan een HTML-pagina toevoegen met createElement().

Voorbeeld 1: voeg een knop toe aan de pagina
var knop = document.createElement("BUTTON"); // maak een <button>-element
var t = document.createTextNode("Klik hier"); // maak de tekst
knop.appendChild(t); // voeg de tekst toe aan het <button>-element
document.body.appendChild(knop); // voeg de knop toe aan de pagina

Voorbeeld 2: voeg een alinea toe aan het DIV-element met id "mijnDIV"
var para = document.createElement("P");
var t = document.createTextNode("Dit is een alinea");
para.appendChild(t);
document.getElementById("mijnDIV").appendChild(para);

Voorbeeld 3: voeg een listitem toe aan een UL-lijst met id "lijst"
var lijst = document.getElementById("lijst");
var nieuw = document.createElement("LI");
var tekst = document.createTextNode("Nieuwe regel");
nieuw.appendChild(tekst);
lijst.insertBefore(nieuw,lijst.childNodes[0]);