De DOM en JavaScript

Na mijn Mijn interpretatie van de Basis van JavaScript artikel is dit mijn volgende artikel/ blad met aantekeningen over mijn JS leertocht. Deze keer zijn dit aantekeningen over wat de DOM is en hoe die zich verhoudt tot JavaScript. Ik krijg graag jullie feedback. Hier kan ik weer van leren.
Mijn twitter-handle en mailadres staan onderaan de pagina.

De DOM is een representatie van de webpagina, maar is er ook voor bedoeld om te communiceren met de webpagina.
De DOM is een object met properties en methods. Naast de DOM heb je ook het scherm dat een object is met zijn eigen properties en methods. En elke node is een object met methods en properties.
De DOM is ook een API. Het is een API voor HTML (XML, SVG) die een webpagina aanbiedt als een boom met vertakkingen van objecten. Browser vendors gebruiken de DOM specificatie om te komen tot het weergeven van webpagina’s. Een webbrowser zet de HTML om naar de DOM. En de DOM is waar de JS mee kan praten.
De DOM is opgebouwd uit Nodes. Nodes zijn objecten in een boomstructuur. Nodes hebben properties en methods. Methods die je kan gebruiken staan op https://developer.mozilla.org/en-US/docs/Web/API/Document en op https://developer.mozilla.org/en-US/docs/Web/API/Node.

Verschillende Node types:

Met JS pas je de DOM tree aan en niet de originele HTML bestanden.

Het werken met de DOM behelst 2 stappen:

Nodes selecteren in je webpagina

Om een Node te selecteren in je pagina kan je typen: document.children. Dan krijg je een array van elementen. Zo kan je [ 0 ] er achter zetten en krijg je de eerste waarde uit je array. Daar kan je weer achterzetten children[ 1 ] en zo kan je doorgaan totdat je het element hebt dat je wilt hebben. Dit is erg omslachtig. Om het makkelijker te maken voor ons ontwikkelaars kan je methodes gebruiken. Zo heb je:

Het kan zijn dat getElementById() en getElementsByTagName() sneller werken dan de querySelector.

Dom Traversal

Het reizen van en naar andere onderdelen.

Bovenstaande zijn vaak het zelfde, maar niet elke node is een element.

Bij elk Node type:

Bij Element Nodes → dit is nieuwer:

White Space (witruimte) is ook een Node. Door .childNodes op te vragen krijg je ook de witruimte/regels terug. Maar de witruimte/regel is geen Element.

Buren bezoeken:

Bij elk Node type:

Bij Element Nodes → dit is nieuwer:

Meest voorkomende Nodes zijn de Element en Text nodes.

Een interessant en handig artikel over het selecteren van elementen in de DOM komt van Zell Liew, Traversing the DOM with JavaScript.

waardes in en uit Element Nodes te krijgen

Om nieuwe HTML of text in een element te plaatsen gebruik je .innerHTML = '<h2> </h2>'. Dit zet de nieuwe html. Met .innertext = kkkkkskjsjj doe je hetzelfde maar dan voor tekst.

Om de waardes in en vanuit Text Nodes te krijgen gebruik:

Nodes aanmaken

Nodes toevoegen aan de DOM

Kopiëren van Nodes

Verwijder Nodes van de DOM

Style aanpassen van Nodes

Attributes

Om met de attributes te spelen gebruik je de propertie .attributes. Je krijgt dan een array van informatie terug.

Om de informatie van de attribute te krijgen gebruik je:

Om de waardes van attributes aan te passen:

Om Class attributes te krijgen:

Om Data attributes te krijgen:

Er zijn betere manieren om data op te slaan ipv in je markup. Liever niet in je HTML opslaan.

Formulier elementen

Bij formulier elementen om deze te laten werken zet de <form> tag er om heen. Deze heeft een attribute method. De method attribute kan de waardes hebben GET of POST. Als je GET doet zie je de waardes van de invulvelden in de url terugkomen. Bij POST niet. Dit laatste moet je officieel doen zodat alles verborgen blijft, maar de GET methode is handig voor testen. De id attribute is handig voor referentie zodat je vanuit je JS aan het formulier kan referen. De name attribute is belangrijk voor het doorgeven van de info zodat je weet welke info bij de form met die naam hoort.

De attributes van form elementen kan je makkelijk met JS aanpassen.

De value attribute is de waarde die je bij een inputveld invult. Deze kan je ook voorinvullen, dan zie je bij het komen op een website dat er al iets in de inputvelden staat. Dat kan zijn als je al iets weet zoals postcode of andere adres gegevens.

Om formulier elementen aan te spreken kan je gebruik maken van:

Selecteer een onderdeel van een form. Gebruik:

Om te werken met radio, checkbox en option voor te checken op checked of ze daarop te zetten:

Events

Events zijn technisch gezien een onderdeel van de DOM.

Selecteer het element waarop iets moet gebeuren. Zeg welk event moet plaats vinden om een bepaalde functie te activeren.

Te veel eventlisteners kunnen de performance verslechteren. Soms kan het beter zijn op een parent element een eventlistener te zetten.

Type:

Kan het inline zetten, dus in de HTML, bijvoorbeeld met onclick=” “. Denk er aan dit is niet Best Practice, dus alleen in noodsituaties gebruiken.

Bij Global Event Handlers gebruik je bijvoorbeeld een onclick, maar dan in het JS bestand. Je kan de onclick koppelen aan een element. Hierbij moet je altijd de functie voor de Global event handler zetten. Je gebruikt een function reference.

Event Listeners is de meest gebruikte en de beste manier om Events te gebruiken; addEventListener().

Weghalen gaat met: removeEventListener();

Gebruik geen anonieme functies met Event Listeners, want je kan de removeEventListener niet gebruiken bij een anonieme functie.

Event Propagation gaat over :

Een Event Listener kan inhaken op de Capturing of Bubbling fase. Wat kan je hier mee? Het kan zijn dat je wilt dat een parent element weet wat er gebeurt in een child element en of dit er voor of er na moet gebeuren.

Event Object: heeft properties met informatie over het Event dat net gebeurd. Middels functies is deze info te verkrijgen.