Klasser som används för DOM-manipulation/händelsehantering i TypeScript

I den här artikeln kommer vi att förklara de klasser som används för DOM-manipulation/händelsehantering i TypeScript.

Du kan lära dig om Document-klassen, Element- och NodeList-klasserna samt olika händelserelaterade klasser genom kodexempel.

YouTube Video

Klasser som används för DOM-manipulation/händelsehantering i TypeScript

För DOM-manipulation och händelsehantering i TypeScript används huvudsakligen Document Object Model (DOM)-gränssnitt. Vid DOM-manipulation och händelsehantering används standardklasser och gränssnitt från JavaScript, men i TypeScript läggs typinformation till för att möjliggöra säkrare hantering.

Följande beskriver de klasser och gränssnitt som ofta används vid DOM-manipulation och händelsehantering.

Huvudklasser/gränssnitt som används för DOM-manipulation

Document

Document är ett objekt som representerar HTML- eller XML-dokument. Används för att komma åt DOM-trädet eller söka efter element.

Kodexempel

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

Huvudmetoder

• getElementById hämtar ett element med det angivna id-attributet.
• querySelector hämtar ett element med hjälp av en CSS-selektor.
• createElement skapar ett nytt HTML-element.

Kodförklaring

• Den här koden hämtar ett element med ett id-attribut med hjälp av getElementById och ändrar dess text. Den hämtar också ett knapp-element med querySelector och lägger till en klickhändelse-lyssnare. Vid klick skapas ett nytt div-element med createElement och läggs till i huvudinnehållet. Generics och typkontroller används för att säkerställa typsäkerhet vid DOM-operationer.

Element

Element är ett gränssnitt som representerar enskilda HTML-element i DOM. Det används oftast vid manipulation av DOM.

Kodexempel

 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}

Huvudegenskaper och metoder

• Egenskapen innerHTML låter dig ange eller hämta HTML-innehållet i ett element.
• Egenskapen textContent låter dig ange eller hämta textinnehållet i ett element.
• classList är en egenskap för att hantera klasser, vilket gör att du kan lägga till, ta bort och växla klasser.
• Metoden setAttribute anger ett attribut på ett element.

Kodförklaring

• Den här koden visar ett exempel på att sätta innehåll med innerHTML och textContent för element hämtade med querySelector, lägga till klasser med classList samt sätta egna attribut med setAttribute. Operationer utförs på ett typsäkert sätt med hjälp av generics.

NodeList och HTMLCollection

NodeList och HTMLCollection representerar samlingar som innehåller flera DOM-element. Till exempel returnerar querySelectorAll en NodeList, och getElementsByClassName returnerar en HTMLCollection.

Kodexempel

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

• Denna kod visar hur du direkt hanterar en NodeList med forEach och konverterar en HTMLCollection till en array för iteration.

Huvudklasser/gränssnitt som används för händelsehantering

Event

Event är basklassen för alla händelser som inträffar i DOM. Olika händelser som klick, inmatningar och sidladdningar utökar Event-klassen.

Kodexempel

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

Huvudegenskaper och metoder

• Egenskapen target representerar elementet (EventTarget) som händelsen inträffade på.
• type representerar typen av händelse som inträffat, som till exempel click eller input.
• Metoden preventDefault avbryter händelsens standardåtgärd.

Kodförklaring

• Den här koden visar hur man lägger till en submit-händelselyssnare på ett formulär. target syftar på det formulärelement där händelsen inträffade, och type anger händelsetypen (i detta fall "submit"). Genom att anropa preventDefault kan man inaktivera standardbeteenden vid formulärinlämning, såsom sidnavigering eller omladdning. Istället utförs en egen process—loggning av utdata—här.

MouseEvent

MouseEvent representerar händelser relaterade till musoperationer. Musrelaterade händelser som click och mousemove använder denna klass.

Kodexempel

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

• Denna kod är ett exempel på att använda MouseEvent för att logga muskoordinaterna.

Huvudegenskaper

• clientX är X-koordinaten för muspekaren på sidan.
• clientY är Y-koordinaten för muspekaren på sidan.
• button anger vilken musknapp som trycktes in. 0 är vänster knapp, 1 är mittenknappen och 2 är höger knapp.

KeyboardEvent

KeyboardEvent representerar händelser relaterade till tangentbordsoperationer. keydown och keyup-händelser hör till denna kategori.

Kodexempel

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

Huvudegenskaper

• key är namnet på den intryckta tangenten, till exempel Enter eller a.
• code är koden som motsvarar en tangent på tangentbordet.
• altKey, ctrlKey och shiftKey är egenskaper som indikerar om Alt-, Ctrl- eller Shift-tangenten trycktes ned.

Kodförklaring

• Den här koden använder KeyboardEvent för att logga namnet på den nedtryckta tangenten (key), motsvarande tangentkod (code) samt om modifiertangenter (altKey, ctrlKey, shiftKey) trycktes ned. Den utför även en särskild åtgärd när Enter-tangenten trycks ned.

FocusEvent

FocusEvent relaterar till händelser av att få eller förlora fokus. focus och blur-händelser hör till denna kategori.

Kodexempel

 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}

• Denna kod är ett exempel på att använda FocusEvent för att upptäcka och logga när ett inmatningsfält får eller tappar fokus.

Typning i TypeScript

När TypeScript används förbättras typkontroll för DOM-manipulation och händelsehantering. Nedan följer exempel på typesäker DOM-manipulation och händelsehantering i TypeScript.

Typade händelselyssnare

När händelselyssnare läggs till gör angivandet av händelsetypen det möjligt att utföra typkontroll och förhindra åtkomst till felaktiga 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});

• Denna kod är ett exempel på att använda en typad händelselyssnare för att hantera input-händelser och säkert hämta samt logga det aktuella värdet i ett inmatningsfält.

Generisk händelsehantering

Med hjälp av generics i TypeScript kan du utföra generisk händelsehantering som stöder olika typer av 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);

• Denna kod är ett exempel på en generisk händelsehanterare med generiska typer, som loggar händelsetypen och taggnamnet för målelementet.

Sammanfattning

I TypeScript tillämpas typer på standard-DOM-API:er under DOM-manipulation och händelsehantering, vilket förbättrar kodsäkerhet och läsbarhet. Genom att använda klasser som Document och Element samt händelserelaterade klasser som Event, MouseEvent och KeyboardEvent är typesäker utveckling möjlig. Dessutom möjliggör användning av querySelector<T>() eller HTMLCollectionOf<T> typtrygg hantering av DOM-element.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video