Klasser brugt til DOM-manipulation/hændelseshåndtering i TypeScript

I denne artikel forklarer vi de klasser, der bruges til DOM-manipulation og hændelseshåndtering i TypeScript.

Du kan lære om Document-klassen, Element- og NodeList-klasserne samt forskellige begivenhedsrelaterede klasser gennem kodeeksempler.

YouTube Video

Klasser brugt til DOM-manipulation/hændelseshåndtering i TypeScript

Til DOM-manipulation og hændelseshåndtering i TypeScript bruges primært Document Object Model (DOM)-grænseflader. Ved DOM-manipulation og hændelseshåndtering bruges standard JavaScript-klasser og -grænseflader, men i TypeScript tilføjes typeinformation, hvilket muliggør mere sikker funktionalitet.

Følgende beskriver de klasser og grænseflader, der ofte bruges til DOM-manipulation og hændelseshåndtering.

Primære klasser/grænseflader anvendt til DOM-manipulation

Document

Document er et objekt, der repræsenterer HTML- eller XML-dokumenter. Bruges til at få adgang til DOM-træet eller til at søge efter 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 det angivne id-attribut.
• querySelector henter et element ved hjælp af en CSS-selektor.
• createElement opretter et nyt HTML-element.

Kodeforklaring

• Denne kode henter et element med et id-attribut ved hjælp af getElementById og ændrer dets tekst. Den henter også et knap-element ved hjælp af querySelector og tilføjer en klik-begivenhedslytter. Ved klik opretter den et nyt div-element med createElement og tilføjer det til hovedindholdet. Generiske typer og type-erklæringer bruges for at sikre typesikkerhed under DOM-operationer.

Element

Element er en grænseflade, der repræsenterer individuelle HTML-elementer i DOM'en. Det er mest almindeligt brugt, når man manipulerer 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}

Vigtige egenskaber og metoder

• innerHTML-egenskaben tillader dig at sætte eller hente HTML-indholdet af et element.
• textContent-egenskaben giver dig mulighed for at sætte eller hente tekstindholdet af et element.
• classList er en egenskab til håndtering af klasser, som gør det muligt at tilføje, fjerne og skifte klasser.
• setAttribute-metoden sætter et attribut på et element.

Kodeforklaring

• Denne kode viser et eksempel på at sætte indhold ved hjælp af innerHTML og textContent for elementer hentet med querySelector, tilføje klasser med classList, og sætte brugerdefinerede attributter med setAttribute. Operationerne udføres på en typesikker måde med brug af generiske typer.

NodeList og HTMLCollection

NodeList og HTMLCollection repræsenterer samlinger, der indeholder 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 kode demonstrerer direkte manipulering af en NodeList med forEach og konvertering af en HTMLCollection til et array for iteration.

Primære klasser/grænseflader anvendt til hændelseshåndtering

Event

Event er basis-klassen for alle hændelser, der forekommer i DOM'en. Forskellige hændelser som klik, input og sidelæsning udvider 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});

Vigtige egenskaber og metoder

• target-egenskaben repræsenterer det element (EventTarget), hvor begivenheden fandt sted.
• type repræsenterer typen af begivenhed, der fandt sted, såsom click eller input.
• preventDefault-metoden annullerer den standardhandling, der ellers ville ske ved begivenheden.

Kodeforklaring

• Denne kode demonstrerer, hvordan man tilføjer en submit-begivenhedslytter til en formular. target henviser til formular-elementet, hvor begivenheden fandt sted, og type angiver begivenhedstypen (i dette tilfælde "submit"). Ved at kalde preventDefault-metoden kan du deaktivere standardadfærden for formularafsendelse, såsom sidenavigation eller genindlæsning. I stedet udføres en brugerdefineret handling – logning af output – her.

MouseEvent

MouseEvent repræsenterer hændelser relateret til museoperationer. Musehændelser som click og mousemove bruger denne klasse.

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 kode er et eksempel på at bruge MouseEvent til at logge musekoordinaterne.

Vigtigste egenskaber

• clientX er X-koordinatet for musemarkøren inden for siden.
• clientY er Y-koordinatet for musemarkøren inden for siden.
• button angiver hvilken museknap, der blev trykket på. 0 er venstre knap, 1 er midterste knap, og 2 er højre knap.

KeyboardEvent

KeyboardEvent repræsenterer hændelser relateret til tastaturoperationer. keydown- og keyup-hændelser hører til denne kategori.

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

Vigtigste egenskaber

• key er navnet på den trykkede tast, såsom Enter eller a.
• code er koden, der svarer til en tast på tastaturet.
• altKey, ctrlKey og shiftKey er egenskaber, der angiver, om Alt, Ctrl eller Shift-tasten blev trykket.

Kodeforklaring

• Denne kode bruger KeyboardEvent til at logge navnet på den trykkede tast (key), dens tilsvarende tastkode (code) samt om modifikationstasterne (altKey, ctrlKey, shiftKey) blev trykket. Den udfører også en særlig handling, når Enter-tasten trykkes.

FocusEvent

FocusEvent relaterer til hændelser om at få eller miste fokus. focus- og blur-hændelser hører til denne kategori.

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 kode er et eksempel på at bruge FocusEvent til at registrere og logge, når et inputfelt får eller mister fokus.

Typning i TypeScript

Ved brug af TypeScript forbedres typekontrol ved DOM-manipulation og hændelseshåndtering. Nedenfor er eksempler på typesikker DOM-manipulation og hændelseshåndtering i TypeScript.

Typesikrede hændelseslyttere

Når du tilføjer hændelseslyttere, sikrer angivelse af hændelsestypen typekontrol og forhindrer adgang til forkerte egenskaber.

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 kode er et eksempel på at bruge en typebestemt event-lytter til at håndtere inputbegivenheder og sikkert hente og logge den aktuelle værdi i et inputfelt.

Generisk hændelseshåndtering

Ved at bruge generics i TypeScript kan du udføre generisk hændelseshåndtering, der understøtter forskellige typer hændelser.

 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 kode er et eksempel på en generisk event handler, der bruger generiske typer og logger begivenhedstypen og tag-navnet på det målte element.

Sammendrag

I TypeScript anvendes typer på standard DOM-API'er under DOM-manipulation og hændelseshåndtering, hvilket øger kodens sikkerhed og læsbarhed. Ved at bruge klasser som Document og Element, samt hændelsesrelaterede klasser som Event, MouseEvent og KeyboardEvent, er typesikker udvikling mulig. Derudover gør brugen af querySelector<T>() eller HTMLCollectionOf<T> det muligt at lave typesikre DOM-manipulationer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video