Wat is het DOM en hoe wijzig je het met JavaScript?

Dit artikel kan nog worden bijgewerkt

Heb je vragen of opmerkingen, laat dan gerust een reactie achter.

Document

De node document is het startpunt: vanaf die node kom je bij alle elementen van het DOM. Hij staat ook voor het object Document, dat verschillende methoden aanbiedt om elementen op te halen. ( bijv.: document.querySelector(‘div.exemple’); )

Element

De HTML-elementen beschrijven de structuur van een HTML-pagina. Om in de DOM-boom te komen, zoek je eerst elementen op via Document. Heb je het element gevonden dat je zoekt, dan kun je bij de tekst- en attribuutnodes ervan.

Attribuut

De openingstags van HTML-elementen kunnen attributen bevatten ( bijvoorbeeld: id, class, … ) en die worden in de DOM-boom voorgesteld door attribuutnodes. Attribuutnodes zijn geen kinderen van het element dat ze draagt: ze horen bij dat element en kunnen zelf geen kinderen hebben. Zodra je bij een element bent, zijn er specifieke JavaScript-methoden en -eigenschappen om de attributen van dat element te lezen of te wijzigen.

Tekst

Net als bij de attribuutnode kom je bij een tekstnode via een elementnode, en net als de attribuutnode kan een tekstnode geen kinderen hebben.

Elementen benaderen

---

Om een element te kunnen wijzigen, moeten we er eerst bij kunnen. Daarvoor bestaan er allerlei methoden waarmee je door het DOM navigeert en het aanpast.

Eén element selecteren

• getElementById(): haalt een element op via zijn ID-attribuut.
• querySelector(): geeft een element terug op basis van een CSS-selector.

Meerdere elementen selecteren

Deze methoden geven de elementen terug als een lijst

• getElementsByClassName(): geeft meerdere elementen terug op basis van een klasse.
• getElementsByTagName(): geeft meerdere elementen terug op basis van een HTML-tag ( bijv.: <div> ) .
• querySelectorAll(): geeft meerdere elementen terug op basis van een CSS-selector.

Van de ene node naar de andere

• parentNode: geeft het bovenliggende element van het huidige element terug.
• childNodes: geeft een lijst met kinderen van het huidige element terug.
• previousSibling: geeft de vorige node op hetzelfde niveau terug.
• nextSibling: geeft de volgende node op hetzelfde niveau terug.
• firstChild: geeft het eerste kindelement van het huidige element terug.
• lastChild: geeft het laatste kindelement van het huidige element terug.

Attributen bewerken

---

Zodra je bij je element bent, kom je ook bij zijn attributen en hun waarden, met verschillende methoden om die te bewerken.

id

• id: leest of zet de id van het element

Klasse

• className: leest of zet de klasse van het element.
• classList: geeft een lijst met de klassen van het element terug
• add: een klasse aan de lijst toevoegen
• remove: een klasse uit de lijst halen
• toggle: een klasse toevoegen of weghalen (wisselt om: toevoegen als ze er niet staat, weghalen als ze er wel staat).
• contains: geeft de boolean true terug als een klasse in de lijst staat.

Attributen in het algemeen

• hasAttribute(): geeft de boolean true terug als een attribuut op het huidige element bestaat.
• getAttribute(): geeft de waarde terug van het opgegeven attribuut.
• setAttribute(): voegt een attribuut toe aan het element, met de waarde als tweede argument.
• removeAttribute(): haalt een attribuut van het element weg.

Bij de waarden komen

• nodeValue: geeft de inhoud van een node terug, bij een paragraaf is dat de tekst, en is de node een attribuut, dan de waarde van dat attribuut.
• innerText: haalt de tekst op zonder de opmaak mee te nemen.
• innerHTML: haalt de tekst én de opmaak van de node op.
• textContent: geeft de tekst zoals innerText, maar ook de inhoud van <script> en <style>, anders dan innerText.

Elementen toevoegen in 3 stappen

---

Een van de belangrijkste dingen bij het manipuleren van het DOM is nieuwe elementen kunnen maken. Een volledig element maak je in 3 stappen:

1. createElement(): je begint met een nieuwe elementnode te maken met de methode createElement(). Die elementnode zet je in een variabele.
   javascriptKopiëren

   var element= document.createElement("p");

2. createTextNode(): createTextNode() maakt een nieuwe tekstnode. Ook die node zet je in een variabele, en je hangt hem met de methode appendChild() aan de elementnode.
   javascriptKopiëren

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild(): nu je je element hebt, met of zonder inhoud in een tekstnode, kun je het met deze methode aan de DOM-boom toevoegen.
   javascriptKopiëren

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

De methode write

Misschien heb je gehoord van de methode document.write om opmaak en tekst in een document te zetten. Die methode brengt echter flink wat nadelen en problemen mee, want ze werkt alleen terwijl de pagina voor het eerst laadt, daarna kan ze van alles veroorzaken.

• De hele pagina overschrijven
• De inhoud niet aan de pagina toevoegen
• Een nieuwe pagina aanmaken

Een element verwijderen in 3 stappen

---

Net zoals je een element aan het DOM toevoegt, moet je er soms een uit het DOM weghalen.

1. Daarvoor zet je het element dat je wilt verwijderen eerst in een variabele.
   javascriptKopiëren

   var removeElement= document.getElementById('monId');

2. Vanaf die variabele ga je vervolgens naar het bovenliggende element via de eigenschap parentNode .
   javascriptKopiëren

   var parentElement = removeElement.parentNode;

3. Met die tweede variabele kun je het element verwijderen dat je in de eerste stap hebt opgeslagen.
   javascriptKopiëren

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);