The Document Object Model - YunusEmreCMD/blokTech GitHub Wiki

De gegevensstructuur die de browser gebruikt om het de document weer te geven wordt het Document Object Model genoemd, afgekort “DOM”. Een datastructuur wordt een “Tree” genoemd, wanneer deze geen vertakkingen heeft. Dit wordt ook wel de “Root’ genoemd. Een typische Tree heeft verschillende knooppunten, bijvoorbeeld ID’s en Waarden. Knooppunten kunnen “children” hebben, hierbij zijn de ID’s “Leaves” of knooppunten zonder children.

Een aantal Javascript eigenschappen:

nodeType, childNodes, firstChilden, lastChild, null, previousSiblingen, nextSibling, appendChild, insertBefore, replaceChild, document.createTextNode, Array.from, getAttribute

Indeling & styling

Elementen die op de hele breedte worden weergegeven, noemen we “blokelementen”. Andere elementen die dat niet doen, worden “inline elementen” genoemd. Met de offsetWidth en offsetHeight eigenschappen kun je zien hoeveel ruimte een element inneemt in pixels. De eigenschappen clientWidth en clientHeight geeft de ruimte binnen het element weer, zonder de border-width mee te rekenen. Om de precieze locatie te achterhalen kan de getBoundingClientRect methode gebruikt worden (de top, bottom, left en right eigenschap wordt weergegeven, uitgaande van de elementen eromheen). Om de positie te achterhalen, relatief gezien van het gehele document, moet je de scrollpositie toevoegen, wat achterhaald kan worden door pageXOffset en pageYOffset te gebruiken. De styling van een element kan aangepast worden met Javascript door “.style” te gebruiken met daar achter de eigenschap die je wilt wijzigen, zie hieronder en voorbeeld:

p.style.color = “red”;

CSS staat voor Cascading Style Sheet

Selecteren van elementen kan op de volgende manieren:

getElementByTagName, document.querySelector, Array.from