DOM Manipulation

Inleiding

Stel je voor dat een webpagina een grote tekening is met allerlei onderdelen, zoals koppen, tekst en plaatjes. De DOM (Document Object Model) is als een soort "instructieboek" dat uitlegt hoe die tekening in stukjes is verdeeld, zodat we precies weten waar elk onderdeel zit.

Waarom is dit handig met JavaScript?

Kortom, de DOM zorgt ervoor dat JavaScript precies weet hoe de pagina in elkaar zit, zodat je webpagina interactief en dynamisch kan worden.

Theorie

(English below)

DOM is het Document Object Model, dat is zeg maar de hele HTML pagina. Je kunt met JavaScript de DOM anapassen. Je kunt bijvoorbeeld een kleur van een element aanpassen, of de inhoud van een element aanpassen.

Dit kan natuurlijk ook met PHP, maar daarvoor moet je (terug) naar de server. Met JS kan je lokaal (front End) dingen aanapssen. Dat is vaak sneller en ziet er vaak beter uit.

Om de DOM aan te passen, heb je een paar specifieke commando's. De belangrijkste worden hier besproken.

1. Toegang krijgen tot Elementen

Om de inhoud te manipuleren, moet je eerst toegang krijgen tot de elementen. Veelgebruikte methoden om toegang te krijgen tot DOM-elementen zijn:

  • document.getElementById(id): Selecteert een enkel element op basis van zijn ID.
  • document.getElementsByTagName(name): Geeft een verzameling van elementen terug met de gegeven tag-naam.
  • document.getElementsByClassName(name): Geeft een verzameling van elementen terug die de gegeven klassenaam hebben.
  • document.querySelector(selector): Geeft het eerste element terug dat overeenkomt met een gespecificeerde CSS-selector.
  • document.querySelectorAll(selector): Geeft een lijst terug van alle elementen die overeenkomen met een gespecificeerde CSS-selector.

2. Wijzigen van Elementeigenschappen

Zodra je een referentie naar een element hebt, kun je de eigenschappen ervan wijzigen. Dit omvat het wijzigen van de innerlijke HTML, tekstinhoud, attributen en stijl van het element. Bijvoorbeeld:

  • element.innerHTML: Haalt op of stelt de HTML- of XML-markering in die binnen het element is opgenomen.
  • element.textContent: Stelt de tekstuele inhoud van een element en zijn nakomelingen in of retourneert deze.
  • element.setAttribute(name, value): Voegt een gespecificeerd attribuut toe aan een element, of werkt de waarde ervan bij als het al bestaat.
  • element.style.property: Wijzigt de stijl van een element, waarbij property een CSS-eigenschap is (in camelCase, bijvoorbeeld backgroundColor).

3. Creëren en Verwijderen van Elementen

JavaScript stelt je in staat om nieuwe elementen te creëren en deze in het DOM in te voegen of bestaande elementen te verwijderen:

  • document.createElement(tagName): Creëert een nieuw element met de gegeven tag-naam.
  • parentNode.appendChild(childNode): Voegt een knooppunt toe als het laatste kind van een ouder knooppunt.
  • parentNode.insertBefore(newNode, referenceNode): Voegt een nieuw knooppunt in vóór het referentieknooppunt als een kind van een gespecificeerd ouderknooppunt.
  • parentNode.removeChild(child): Verwijdert een kindknooppunt uit het DOM.
  • element.remove(): Verwijdert het element uit het DOM.

4. Event Handling

Het toevoegen van event listeners aan elementen stelt je in staat om code uit te voeren als reactie op gebruikersacties, zoals klikken, toetsenbordinvoer of muisbewegingen:

  • element.addEventListener(event, function, useCapture): Voegt een event handler toe aan een element. Veelvoorkomende events zijn click, mouseover, mouseout, keydown, keyup, enz.

5. Doorlopen en Wijzigen

Het DOM biedt methoden en eigenschappen om knooppunten te doorlopen en te wijzigen:

  • element.childNodes: Geeft een live NodeList van kindknooppunten van een element terug.
  • element.parentElement: Geeft het ouder-element van het gespecificeerde element terug.
  • element.nextSibling: Geeft de volgende sibling in de boom terug.
  • element.previousSibling: Geeft de vorige sibling in de boom terug.

Theory in English

(Dutch above)

The DOM is the Document Object Model, which is essentially the entire HTML page. You can modify the DOM using JavaScript. For example, you can change the color of an element, or modify the content of an element.

This can also be done with PHP, but that requires a (return) trip to the server. With JS, you can make local (front-end) adjustments. This is often faster and usually looks better.

To modify the DOM, you need a few specific commands. The most important ones are discussed here.

1. Accessing Elements

To manipulate the content, you first need to access the elements. Common methods to access DOM elements include:

2. Changing Element Properties

Once you have a reference to an element, you can modify its properties. This includes changing the element's inner HTML, text content, attributes, and style. For example:

3. Creating and Removing Elements

JavaScript allows you to create new elements and insert them into the DOM or remove existing elements:

4. Event Handling

Adding event listeners to elements enables you to execute code in response to user actions, such as clicks, keyboard input, or mouse movements:

5. Traversal and Modification

The DOM provides methods and properties to traverse and modify nodes:



Revision #6
Created 4 April 2024 21:53:44 by Max
Updated 26 February 2025 09:19:38 by Max