Klasser brukt for DOM-manipulering/hendelseshåndtering i TypeScript

I denne artikkelen vil vi forklare hvilke klasser som brukes for DOM-manipulering/hendelseshåndtering i TypeScript.

Du kan lære om Document-klassen, Element- og NodeList-klassene, samt ulike hendelsesrelaterte klasser gjennom kodeeksempler.

YouTube Video

Klasser brukt for DOM-manipulering/hendelseshåndtering i TypeScript

For DOM-manipulering og hendelseshåndtering i TypeScript brukes i hovedsak Document Object Model (DOM)-grensesnittene. Ved DOM-manipulering og hendelseshåndtering brukes standard JavaScript-klasser og -grensesnitt, men i TypeScript legges typeinformasjon til for å muliggjøre tryggere operasjoner.

Følgende beskriver klasser og grensesnitt som ofte brukes ved DOM-manipulering og hendelseshåndtering.

Hovedklasser/grensesnitt brukt for DOM-manipulering

Document

Document er et objekt som representerer HTML- eller XML-dokumenter. Brukes for å få tilgang til DOM-treet eller søke etter elementer.

Kodeeksempel

 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});

Hovedmetoder

• getElementById henter et element med den angitte id-attributten.
• querySelector henter et element ved å bruke en CSS-velger.
• createElement lager et nytt HTML-element.

Kodeforklaring

• Denne koden henter et element med en id-attributt ved å bruke getElementById og endrer teksten i det. Den henter også et knappeelement med querySelector og legger til en klikkerhendelseslytter. Ved klikk oppretter den et nytt div-element med createElement og legger det til hovedinnholdet. Generiske typer og typeantakelser brukes for å sikre typesikkerhet under DOM-operasjoner.

Element

Element er et grensesnitt som representerer individuelle HTML-elementer i DOM-en. Det brukes oftest ved manipulering av DOM-en.

Kodeeksempel

 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}

Hovedegenskaper og -metoder

• innerHTML-egenskapen lar deg sette eller hente HTML-innholdet til et element.
• textContent-egenskapen lar deg sette eller hente tekstinnholdet til et element.
• classList er en egenskap for å manipulere klasser, som lar deg legge til, fjerne og veksle klasser.
• setAttribute-metoden setter et attributt på et element.

Kodeforklaring

• Denne koden viser et eksempel på hvordan man setter innhold med innerHTML og textContent for elementer som hentes med querySelector, legger til klasser med classList, og angir egendefinerte attributter med setAttribute. Operasjoner utføres på en typesikker måte ved bruk av generiske typer.

NodeList og HTMLCollection

NodeList og HTMLCollection representerer samlinger som inneholder flere DOM-elementer. For eksempel returnerer querySelectorAll en NodeList, og getElementsByClassName returnerer en HTMLCollection.

Kodeeksempel

 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});

• Denne koden viser hvordan man kan manipulere en NodeList direkte med forEach, og konvertere en HTMLCollection til et array for iterasjon.

Hovedklasser/grensesnitt brukt for hendelseshåndtering

Event

Event er basisklassen for alle hendelser som oppstår i DOM-en. Ulike hendelser som klikk, input og lasting av sider utvider Event-klassen.

Kodeeksempel

 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});

Hovedegenskaper og -metoder

• target-egenskapen representerer elementet (EventTarget) som hendelsen skjedde på.
• type representerer typen hendelse som fant sted, for eksempel click eller input.
• preventDefault-metoden avbryter standardhandlingen for hendelsen.

Kodeforklaring

• Denne koden viser hvordan man legger til en submit-hendelseslytter til et skjema. target refererer til skjemaelementet hvor hendelsen skjedde, og type indikerer hendelsestypen (i dette tilfellet, "submit"). Ved å kalle preventDefault-metoden kan du deaktivere standard oppførsler for skjemaer som side-navigasjon eller omlasting. I stedet blir en egendefinert prosess—logging av utskrift—utført her.

MouseEvent

MouseEvent representerer hendelser relatert til museoperasjoner. Musehendelser som click og mousemove bruker denne klassen.

Kodeeksempel

1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}

• Denne koden er et eksempel på å bruke MouseEvent for å logge musekoordinater.

Hovedegenskaper

• clientX er X-koordinatet til musepekeren på siden.
• clientY er Y-koordinatet til musepekeren på siden.
• button angir hvilken museknapp som ble trykket. 0 er venstre knapp, 1 er midtre knapp, og 2 er høyre knapp.

KeyboardEvent

KeyboardEvent representerer hendelser relatert til tastaturopasjoner. keydown- og keyup-hendelser tilhører denne kategorien.

Kodeeksempel

 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});

Hovedegenskaper

• key er navnet på den trykkede tasten, for eksempel Enter eller a.
• code er koden som tilsvarer en tast på tastaturet.
• altKey, ctrlKey og shiftKey er egenskaper som angir om Alt, Ctrl eller Shift-tasten ble trykket.

Kodeforklaring

• Denne koden bruker KeyboardEvent for å logge navnet på den trykkede tasten (key), dens tilhørende tastekode (code), samt om modifiseringstaster (altKey, ctrlKey, shiftKey) ble trykket. Den utfører også en spesiell handling når Enter-tasten trykkes.

FocusEvent

FocusEvent omhandler hendelser knyttet til tap eller oppnåelse av fokus. focus- og blur-hendelser tilhører denne kategorien.

Kodeeksempel

 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}

• Denne koden er et eksempel på å bruke FocusEvent for å oppdage og logge når et input-felt får eller mister fokus.

Bruk av typer i TypeScript

Ved bruk av TypeScript forbedres typekontroll ved DOM-manipulering og hendelseshåndtering. Nedenfor er eksempler på typesikker DOM-manipulering og hendelseshåndtering i TypeScript.

Typede hendelseslytterfunksjoner

Når man legger til hendelseslyttere, utfører angivelse av hendelsestypen typekontroll og hindrer tilgang til feil egenskaper.

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});

• Denne koden er et eksempel på å bruke en typet hendelseslytter for å håndtere input-hendelser og trygt hente og logge gjeldende verdi i et input-felt.

Generell hendelseshåndtering

Ved bruk av generics i TypeScript kan du utføre generell hendelseshåndtering som støtter ulike typer hendelser.

 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);

• Denne koden er et eksempel på en generell hendelseshåndterer med bruk av generiske typer, som logger hendelsestypen og taggnavnet til målelementet.

Sammendrag

I TypeScript brukes typer på standard DOM-API-er under DOM-manipulering og hendelseshåndtering, noe som forbedrer kodekvalitet og lesbarhet. Ved å bruke klasser som Document og Element, samt hendelsesrelaterte klasser som Event, MouseEvent og KeyboardEvent, er typesikker utvikling mulig. I tillegg gir bruk av querySelector<T>() eller HTMLCollectionOf<T> mulighet for typesikre DOM-manipuleringer.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video