Chapter 14 Document Object Model (DOM)

Trees

Een data Structure noem je een boom, het heeft veel takken maar 1 stam: document.documentElement

DOM Nodes hebben een nodeType property met een nummer die de node identificeert (elementen hebben code: 1, text heeft code: 3)

Elementen

Als je een specifiek element wil vinden kun je dit beter niet doen door document.body…. te schrijven, het kan zijn dat je de structuur later veranderd en de code niet meer werkt.

Alle Node elementen hebben een getElementsByTagName Method die alle elementen met die tag verzameld en in een soort array object zet

Nodes hebben een Remove method om ze uit de parent node te halen appendChild = toevoegen aan het einde insertBefore = voegt node toe voor de vorige replaceChild = Child node vervangen met een andere createTextNode = text node maken

Attributes

Attributen kunnen gebruikt worden door de property met de dezelfde naam aan te spreken, je kunt de nodes zelf een naam geven en er meer informatie in opslaan maar het is recommended om er altijd data- voor te zetten

getAttribute en setAttribute zijn de methods die je hier voor gebruikt

Layout

in elk document kan de browser bepalen welke elementen inline of block zijn, en de grootte bepalen door de content. De grootte en positie van een element kan ook Javascript ook bepaald worden met offsetWidth en offsetHeight

clientWidth and clientHeight geven je ze grootte van de ruimte in een element zonder de border.

De meest effectieve manier om de precieze locatie van een element te zien is met de getBoundingClientRect method, je krijgt hiermee de top, bottom, left en right waardoor je de pixel positie van het element relatief aan de top links van heet scherm, pageXOffset en pageYOffset gebruik je om de scroll position te bepalen.

CSS

querySelector method gebruik je om 1 specifiek element aan te spreken

Animatie

Met requestAnimationFrame kun je de animaties timen wanneer de browser opnieuw laad.