# Introductie

Het Document Object Model (DOM) is de data representatie van de objecten die de structuur en de inhoud van een document op het web omvatten. De DOM representeert een HTML of XML document in het geheugen.

Het Document Object Model is een interface voor HTML en XML documenten. Het representeert de pagina op een manier zodat het computerprogramma de structuur, stijl en inhoud van een document kan aanpassen. De DOM presenteert het document als een verzameling van knooppunten (Eng. nodes) en objecten. Alle eigenschappen, methoden en gebeurtenissen om webpagina’s te manipuleren worden georganiseerd in objecten.

Document Object Model - Bron: http://hwang.cisdept.cpp.edu

De W3C DOM (opens new window) en de WHATWG DOM (opens new window) standaarden zijn geïmplementeerd in de meeste moderne webbrowsers. We kunnen bijvoorbeeld via de DOM standaard alle paragrafen opvragen die aanwezig zijn in een HTML document:

const paragraphElements = document.getElementsByTagName('p');
console.log(paragraphElements[0].nodeName);

1
2

De methode getElementsByTagName('p') geven een lijst terug van alle p-elementen. Het eerste p element of tag kunnen opvragen met paragraphElements[0], het tweede met paragraphElements[1] …

# Toegang tot de DOM

Om toegang te hebben tot de DOM hoef je niks speciaals te doen. De ingebouwde JavaScript engine van een webbrowser zorgt ervoor dat de DOM kan benaderd worden via een programmeerinterface (API). Deze API geeft rechtstreekse toegang tot een window (opens new window) en document (opens new window) object.

De volgende code visualiseert een bericht via alert() functie uit het window object wanneer het HTML document is geladen. Op dat moment is de volledige DOM beschikbaar:

<body onload="window.alert('Welcome to my home page!');">

Het volgende voorbeeld creëert een nieuw h1 element, voegt vervolgens tekst toe aan dit element en voegt tenslotte het h1 element toe aan het body element:

<html>
    <head>
        <script>
            window.onload = function() {
                var headingElement = document.createElement("h1");
                var textNode = document.createTextNode("Web Programming 1: Front-End");
                headingElement.appendChild(headingNode);
                document.body.appendChild(headingElement);
            }
        </script>
    </head>
    <body>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Fundamentele datatypen

De DOM API bestaat uit een verzameling van fundamentele datatypen, zoals: Window, Document, NodeList, Node, Element, Attribute, NamedNodeMap …

De Window (opens new window) interface representeert een window die het DOM document bevat. Het geladen DOM document kan via window.document of rechtstreeks via document opgevraagd worden. Het window object kan ook via het DOM document opgevraagd worden door document.defaultView. De objecten window en document zijn globale variabelen. De Window interface bevat nog heel wat functies, objecten …die niet persé direct nodig zijn om basis webinterfaces te maken, maar ze kunnen voor andere webapplicaties wel handig zijn.

Tip

Elke tab binnen een webbrowser bevat zijn eigen window object.

De Document (opens new window) interface representeert elke webpagina geladen in een webbrowser en verleent toegang tot de structuur en inhoud van deze webpagina via de DOM tree (opens new window) die vervat zit in het document object. De Document interface beschrijft eigenschappen en methoden voor eender welk document. Afhankelijk van het documenttype kunnen nog andere interfaces gebruikt worden, zoals: HTMLDocument (opens new window) interface, XMLDocument (opens new window) interfaces …

Er bestaand drie type nodes, namelijk element node, text node en attribute node die vervat zitten in de Node interface. De volgende interfaces erven over de Node (opens new window) interface: Document (opens new window), Element (opens new window), Attr (opens new window), CharacterData (opens new window) (which Text, Comment, and CDATASection inherit), ProcessingInstruction (opens new window), DocumentFragment (opens new window), DocumentType (opens new window), Notation (opens new window), Entity, EntityReference. Dit betekent dat deze interfaces op dezelfde manier behandeld omdat deze overerven van deze basis interface. De eigenschappen en methoden gedefinieerd binnen deze interface zijn ook aanspreekbaar door de afgeleide klassen.

Element objecten implementeren de DOM Element (opens new window) interface, die op zijn beurt overerft van de Node interface. Het HTMLElement (opens new window), SVGElement (opens new window), XULElement erven over van de Element interface. De algemene eigenschappen en methoden binnen deze Element interface kunnen aangesproken worden door de afgeleiden.

NodeList (opens new window) objecten zijn een collectie van nodes, meestal teruggegeven door Node.childNodes (live or dynamic list), document.querySelectorAll() (static list), document.getElementsByTagName() … We kunnen itereren over de elementen binnen een NodeList via de forEach() methode. Een NodeList kan geconverteerd worden naar een echte array via Array.from().

Attributes zijn nodes zoals elementen ook nodes zijn. Via o.a. de createAttribute() wordt een attribute object gegenereerd.

Een NamedNodeMap (opens new window) interface representeert een collectie van Attr objecten. De elementen binnen een NamedNodeMap kunnen opgevraagd worden via een naam of via een index. Een NamedNodeMap is een dynamische lijst (live) en wijzigingen worden direct geupdate in de corresponderend variabele.

Vele objecten erven eigenschappen en methoden over van verschillende interfaces. Een table object implementeert een HTMLTableElement (opens new window), waarmee we bijvoorbeeld een nieuwe rij kunnen toevoegen via insertRow(). Deze methode is enkel beschikbaar via de HTMLTableElement interface. Het table object implementeert ook de interfaces: HTMLElement, Element en Node. Hierdoor kunnen we een grote hoeveelheid eigeschappen van een table object manipuleren alsook een resem methoden aanspreken.

const productsElement = document.getElementById("products");
var productsAttrs = productsElement.attributes;
for (var i = 0; i < productsAttrs.length; i++) {
  if(productsAttrs[i].nodeName.toLowerCase() == "border")
    productsElement.border = '1';
}
productsElement.summary = "note: increased border";

1
2
3
4
5
6
7

# Meest gebruikte DOM interfaces

In vele webapplicaties gebruiken we meestal een dezelfde verzameling van DOM interfaces die courant gebruikt worden. Deze interfaces komen meestal steeds terug tijdens de ontwikkeling van websites d.m.v. JavaScript.

document en window objecten zijn de interfaces die we het meest gebruiken in het programmeren met de DOM. Het window object representeert een tab in een webbrowser en het document object is de root van het geladen document in deze tab.

De meest gebruikte API’s zijn:

# Setup

Maak een map (Eng. folder) aan met een naam die een indicatie geeft aan de webapplicatie, bijv.: random_color. De map bevat de volgende structuur:

Mappen & bestanden

random_color/ # hoofdmap (folder)
- js/ # map (folder)
  - main.js # bestand (file)
- css/ # map (folder)
  - main.css # bestand (file)
- index.html # bestand (file)

De HTML pagina ziet er als volgt uit:

./random_color/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming 1: Front-End Essentials | Associate Degree in Computer Programming</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <script src="js/main.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

We linken een lokaal (relatief pad ten opzichte van het HTML-bestand) JavaScript-bestand main.js waarin we onze eigen code (Eng. custom code) zullen schrijven.

Het JavaScript-bestand bevat de volgende inhoud:

./random_color/js/main.js

"use strict";

void (function() {})();

1
2
3

Het JavaScript-bestand bevat een zogenaamde instelling om strict mode (opens new window) te activeren via de string "use scrict" bovenaan in het JavaScript-bestand. Meer informatie over strict mode zie hoofdstuk clean code.

Het JavaScript-bestand bevat ook een IIFE. Deze wordt direct uitgevoerd na de definitie ervan.

Het CSS-bestand bevat de volgende start inhoud:

./random_color/css/main.css

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box; /* Optioneel, maar niet-aangewezen */
}

1
2
3
4
5
6
7
8

Met de * wildcard selector kunnen we basisinstellingen toepassen op alle elementen. In dit geval stellen we de marges en paddings gelijk aan 0. We kunnen dit eventueel uitbreiden met box-sizing: border-box, waardoor de paddings en border behoren tot de totale breedte van een element.

Selecteren