Articles
Introductie tot TypeScript
DOM-manipulatie in TypeScript

DOM-manipulatie in TypeScript

Dit artikel legt DOM-manipulatie in TypeScript uit.

Je leert hoe je DOM-elementen kunt manipuleren en hoe je via codevoorbeelden elementen aan de DOM-boom kunt toevoegen of verwijderen.

YouTube Video

DOM-manipulatie in TypeScript

DOM-manipulatie in TypeScript gebeurt op dezelfde manier als in JavaScript, maar TypeScript biedt typecontrole waardoor bewerkingen veiliger zijn. De DOM (Document Object Model) is een objectmodel dat wordt gebruikt om HTML- en XML-documenten programmeerbaar te manipuleren. Het stelt je in staat om pagina's die in de browser worden weergegeven te benaderen, elementen toe te voegen of te verwijderen, of stijlen te wijzigen.

Laten we de basis methoden introduceren voor het manipuleren van de DOM met TypeScript.

DOM-elementen verkrijgen

Gebruik het document-object om HTML-elementen te verkrijgen. De volgende methoden worden vaak gebruikt:.

  1. document.getElementById document.getElementById haalt het element op met het opgegeven ID-attribuut.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById haalt het element op met het opgegeven ID en maakt het mogelijk om de inhoud ervan te benaderen als het bestaat.`.
  1. document.querySelector document.querySelector haalt het eerste element op dat overeenkomt met de CSS-selector.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector haalt het eerste element op dat overeenkomt met de opgegeven CSS-selector en maakt het mogelijk om de inhoud ervan te benaderen als het bestaat.`.
  1. document.querySelectorAll document.querySelectorAll haalt alle elementen op die overeenkomen met de CSS-selector.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll haalt alle elementen op die overeenkomen met de opgegeven CSS-selector en maakt het mogelijk om hun inhoud via iteratie te benaderen.`.

Elementtype-aannames

In TypeScript kun je door het expliciet aangeven van het type van een element, meer specifieke methoden en eigenschappen gebruiken.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Het as-sleutelwoord is een type-assertie-operator in TypeScript, die wordt gebruikt om de compiler expliciet te vertellen een waarde als een specifiek type te behandelen.
  • In TypeScript kun je type-asserties gebruiken om het opgehaalde element als een specifiek type te behandelen en toegang te krijgen tot eigenschappen of methoden die specifiek zijn voor dat type.

De DOM manipuleren

Manipulatie van de DOM wordt uitgevoerd via de eigenschappen van elementen. Hierdoor kun je flexibel wijzigingen aan tekst of attributen aanbrengen, stijlen toepassen en weergegeven inhoud bijwerken.

  1. Tekst van een element wijzigen

    Je kunt de tekst of HTML van een element wijzigen via textContent of innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Je kunt textContent of innerHTML van een element gebruiken om de weergegeven tekst of HTML-inhoud te wijzigen.

  1. De stijl van een element wijzigen

    Je kunt inline stijlen aanpassen via de style-eigenschap van een element.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Deze code haalt een specifiek element op, verandert de tekstkleur naar blauw en stelt de lettergrootte in op 20px.

  1. Attribuutwaarden van een element wijzigen

    Als je de attributen van een element wilt wijzigen, gebruik je setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Deze code wijzigt het href-attribuut van het eerste link-element op de pagina naar https://example.com.

  1. Elementklassen manipuleren

    Om klassen toe te voegen of te verwijderen van een element, gebruik je classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Deze code voegt de active-klasse toe en verwijdert de inactive-klasse van een specifiek element.

DOM-elementen toevoegen en verwijderen

Je kunt ook nieuwe elementen toevoegen of bestaande verwijderen. Hierdoor is het mogelijk om de paginabouw dynamisch te wijzigen als reactie op gebruikersacties of de status van de applicatie.

  1. Nieuwe elementen aanmaken en toevoegen

    Gebruik document.createElement om een nieuw element te maken en toe te voegen aan de DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Deze code maakt een nieuw <div>-element aan, stelt de tekst in en voegt het toe aan de <body> van de pagina.

  1. Elementen verwijderen

    Om een element te verwijderen, gebruik je de methoden removeChild of remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Deze code laat zien hoe je een specifiek kindelement uit zijn ouder kunt verwijderen en hoe je het element direct zelf verwijdert.

Gebeurtenissen toevoegen

In TypeScript kun je event listeners aan elementen toevoegen om acties uit te voeren op basis van gebruikersinteracties.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Deze code voegt een event listener toe die een bericht in de console weergeeft wanneer op de knop wordt geklikt.
  • Met addEventListener kun je luisteren naar en omgaan met verschillende gebeurtenissen zoals klikken, muisbewegingen en toetsenbordinvoer.

Aandachtspunten voor DOM-manipulatie in TypeScript

Wanneer je de DOM met TypeScript manipuleert, kan het letten op elementtypedefinities en null-controles helpen om fouten te voorkomen en robuuste code te schrijven.

  1. Controleren op null

    Omdat een DOM-element mogelijk niet bestaat, wordt aanbevolen om een null-controle uit te voeren voordat je elementen in TypeScript manipuleert.

  2. Expliciete typeaanduiding

    Bij het werken met een specifiek element (bijvoorbeeld een HTMLInputElement) is het gebruikelijk om een typeaanduiding (as) te gebruiken om het type te specificeren en element-specifieke eigenschappen zoals value te gebruiken.

Met deze punten in gedachten stelt DOM-manipulatie met TypeScript je in staat om veiliger en voorspelbaarder code te schrijven door de flexibiliteit van JavaScript te combineren met de typeveiligheid van TypeScript.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Het window-object in TypeScriptKlassen Gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScript