Articles
Introductie tot TypeScript
Klassen Gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScript

Klassen Gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScript

In dit artikel leggen we de klassen uit die worden gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScript.

Je kunt leren over de Document-klasse, de Element- en NodeList-klassen, en verschillende gebeurtenisgerelateerde klassen via codevoorbeelden.

YouTube Video

Klassen Gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScript

Voor DOM-manipulatie en evenementafhandeling in TypeScript worden voornamelijk de interfaces van het Document Object Model (DOM) gebruikt. Bij DOM-manipulatie en evenementafhandeling worden standaard JavaScript-klassen en -interfaces gebruikt, maar in TypeScript wordt type-informatie toegevoegd, wat veiliger gebruik mogelijk maakt.

Hieronder worden de klassen en interfaces beschreven die vaak worden gebruikt bij DOM-manipulatie en evenementafhandeling.

Belangrijkste Klassen/Interfaces Gebruikt voor DOM-manipulatie

Document

Document is een object dat HTML- of XML-documenten vertegenwoordigt. Wordt gebruikt om toegang te krijgen tot de DOM-boom of elementen te zoeken.

Codevoorbeeld 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Belangrijkste methoden
  • getElementById haalt een element op met het opgegeven id-attribuut.
  • querySelector haalt een element op met een CSS-selector.
  • createElement maakt een nieuw HTML-element aan.
Uitleg van de code
  • Deze code haalt een element met een id-attribuut op met behulp van getElementById en wijzigt de tekst ervan. Het verkrijgt ook een knop-element met querySelector en voegt een click-eventlistener toe. Bij een klik maakt het een nieuw div-element aan met createElement en voegt dit toe aan de hoofdinhoud. Generics en type-asserties worden gebruikt om typeveiligheid tijdens DOM-bewerkingen te garanderen.

Element

Element is een interface die individuele HTML-elementen in de DOM vertegenwoordigt. Het wordt het meest gebruikt bij het manipuleren van de DOM.

Codevoorbeeld 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Belangrijkste Eigenschappen en Methodes
  • Met de eigenschap innerHTML kun je de HTML-inhoud van een element instellen of ophalen.
  • Met de eigenschap textContent kun je de tekstinhoud van een element instellen of ophalen.
  • classList is een eigenschap voor het manipuleren van klassen, waarmee je klassen kunt toevoegen, verwijderen en schakelen.
  • Met de methode setAttribute stel je een attribuut in op een element.
Uitleg van de code
  • Deze code laat een voorbeeld zien van het instellen van inhoud met innerHTML en textContent voor elementen die met querySelector zijn opgehaald, het toevoegen van klassen met classList en het instellen van aangepaste attributen met setAttribute. Bewerkingen worden op een typeveilige manier uitgevoerd met behulp van generics.

NodeList en HTMLCollection

NodeList en HTMLCollection vertegenwoordigen collecties die meerdere DOM-elementen bevatten. Bijvoorbeeld, querySelectorAll retourneert een NodeList, en getElementsByClassName retourneert een HTMLCollection.

Codevoorbeeld 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Deze code laat zien hoe je een NodeList direct manipuleert met forEach en een HTMLCollection omzet naar een array voor iteratie.

Belangrijkste Klassen/Interfaces Gebruikt voor Evenementafhandeling

Event

Event is de basisklasse voor alle evenementen die in de DOM plaatsvinden. Verschillende evenementen zoals klikken, invoer en paginaladingen breiden de Event-klasse uit.

Codevoorbeeld 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Belangrijkste Eigenschappen en Methodes
  • De eigenschap target vertegenwoordigt het element (EventTarget) waarop het evenement plaatsvond.
  • type staat voor het type gebeurtenis dat heeft plaatsgevonden, zoals click of input.
  • De methode preventDefault annuleert de standaardactie van het evenement.
Uitleg van de code
  • Deze code laat zien hoe je een submit-eventlistener aan een formulier toevoegt. target verwijst naar het formelement waar het event plaatsvond, en type geeft het type event aan (in dit geval, "submit"). Door de methode preventDefault aan te roepen, kun je standaardgedrag voor het versturen van formulieren, zoals paginanavigatie of herladen, uitschakelen. In plaats daarvan wordt hier een aangepast proces uitgevoerd—het loggen van de output.

MouseEvent

MouseEvent vertegenwoordigt evenementen die verband houden met muisbewerkingen. Muisevenementen zoals click en mousemove gebruiken deze klasse.

Codevoorbeeld 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Deze code is een voorbeeld van het gebruik van MouseEvent om de muiscoördinaten te loggen.
Belangrijkste Eigenschappen
  • clientX is de X-coördinaat van de muisaanwijzer binnen de pagina.
  • clientY is de Y-coördinaat van de muisaanwijzer binnen de pagina.
  • button geeft aan welke muisknop is ingedrukt. 0 is de linkerknop, 1 is de middelste knop en 2 is de rechterknop.

KeyboardEvent

KeyboardEvent vertegenwoordigt evenementen die verband houden met toetsenbordbewerkingen. keydown- en keyup-evenementen vallen onder deze categorie.

Codevoorbeeld 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Belangrijkste Eigenschappen
  • key is de naam van de ingedrukte toets, zoals Enter of a.
  • code is de code die overeenkomt met een toets op het toetsenbord.
  • altKey, ctrlKey en shiftKey zijn eigenschappen die aangeven of de Alt-, Ctrl- of Shift-toets is ingedrukt.
Uitleg van de code
  • Deze code gebruikt KeyboardEvent om de naam van de ingedrukte toets (key), de bijbehorende keycode (code) en of de modificatietoetsen (altKey, ctrlKey, shiftKey) zijn ingedrukt, te loggen. Het voert ook een speciale actie uit wanneer de Enter-toets wordt ingedrukt.

FocusEvent

FocusEvent betreft gebeurtenissen van focus krijgen of verliezen. focus- en blur-evenementen vallen onder deze categorie.

Codevoorbeeld 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Deze code is een voorbeeld van het gebruik van FocusEvent om te detecteren en te loggen wanneer een invoerveld focus krijgt of verliest.

Typen in TypeScript

Bij het gebruik van TypeScript wordt typecontrole bij DOM-manipulatie en gebeurtenisafhandeling verbeterd. Hieronder staan voorbeelden van type-veilige DOM-manipulatie en gebeurtenisafhandeling in TypeScript.

Getypeerde Event Listeners

Bij het toevoegen van event listeners zorgt het specificeren van het type evenement voor typecontrole en wordt toegang tot onjuiste eigenschappen voorkomen.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Deze code is een voorbeeld van het gebruik van een getypte eventlistener om invoergebeurtenissen af te handelen en veilig de huidige waarde van een invoerveld op te halen en te loggen.

Generieke Gebeurtenisafhandeling

Met behulp van generics in TypeScript kun je generieke gebeurtenisafhandeling uitvoeren die verschillende soorten gebeurtenissen ondersteunt.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Deze code is een voorbeeld van een generieke event handler met generieken, die het gebeurtenistype en de tagnaam van het doelelement logt.

Samenvatting

In TypeScript worden typen toegepast op standaard DOM API's tijdens DOM-manipulatie en gebeurtenisafhandeling, wat de veiligheid en leesbaarheid van de code verbetert. Door gebruik te maken van klassen zoals Document en Element, en gebeurtenisgerelateerde klassen zoals Event, MouseEvent en KeyboardEvent, is type-veilige ontwikkeling mogelijk. Bovendien zorgt het gebruik van querySelector<T>() of HTMLCollectionOf<T> voor typeveilige DOM-manipulaties.

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

YouTube Video

DOM-manipulatie in TypeScriptShadow DOM in TypeScript