Articles
Introduzione a TypeScript
Classi utilizzate per la manipolazione del DOM/gestione degli eventi in TypeScript

Classi utilizzate per la manipolazione del DOM/gestione degli eventi in TypeScript

In questo articolo, spiegheremo le classi utilizzate per la manipolazione del DOM/la gestione degli eventi in TypeScript.

Puoi imparare a conoscere la classe Document, le classi Element e NodeList, e diverse classi relative agli eventi attraverso esempi di codice.

YouTube Video

Classi utilizzate per la manipolazione del DOM/gestione degli eventi in TypeScript

Per la manipolazione del DOM e la gestione degli eventi in TypeScript, vengono utilizzate principalmente le interfacce del Document Object Model (DOM). Nella manipolazione del DOM e nella gestione degli eventi, vengono utilizzate classi e interfacce standard di JavaScript, ma in TypeScript vengono aggiunte informazioni di tipo per consentire un funzionamento più sicuro.

Di seguito vengono descritte le classi e le interfacce comunemente utilizzate nella manipolazione del DOM e nella gestione degli eventi.

Principali classi/interfacce utilizzate per la manipolazione del DOM

Document

Document è un oggetto che rappresenta documenti HTML o XML. Utilizzato per accedere all'albero DOM o per cercare elementi.

Esempio di codice 
 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});
Metodi principali
  • getElementById recupera un elemento con l'attributo id specificato.
  • querySelector recupera un elemento utilizzando un selettore CSS.
  • createElement crea un nuovo elemento HTML.
Spiegazione del codice
  • Questo codice recupera un elemento con un attributo id usando getElementById e ne cambia il testo. Ottiene anche un elemento bottone usando querySelector e aggiunge un gestore dell’evento click. Al clic, crea un nuovo elemento div usando createElement e lo aggiunge al contenuto principale. I generici e le asserzioni di tipo sono usati per garantire la sicurezza dei tipi durante le operazioni sul DOM.

Element

Element è un'interfaccia che rappresenta singoli elementi HTML nel DOM. È più comunemente utilizzato nella manipolazione del DOM.

Esempio di codice 
 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}
Proprietà e metodi principali
  • La proprietà innerHTML permette di impostare o ottenere il contenuto HTML di un elemento.
  • La proprietà textContent permette di impostare o ottenere il contenuto testuale di un elemento.
  • classList è una proprietà per manipolare le classi, che permette di aggiungere, rimuovere e alternare le classi.
  • Il metodo setAttribute imposta un attributo su un elemento.
Spiegazione del codice
  • Questo codice mostra un esempio di impostazione del contenuto usando innerHTML e textContent per gli elementi recuperati con querySelector, aggiunta di classi con classList e impostazione di attributi personalizzati con setAttribute. Le operazioni vengono eseguite in modo sicuro per i tipi usando i generici.

NodeList e HTMLCollection

NodeList e HTMLCollection rappresentano collezioni che contengono più elementi DOM. Ad esempio, querySelectorAll restituisce un NodeList, e getElementsByClassName restituisce un HTMLCollection.

Esempio di codice 
 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});
  • Questo codice dimostra come manipolare direttamente un NodeList con forEach e convertire un HTMLCollection in un array per l'iterazione.

Principali classi/interfacce utilizzate per la gestione degli eventi

Event

Event è la classe base per tutti gli eventi che si verificano nel DOM. Vari eventi, come click, input e caricamenti di pagina, estendono la classe Event.

Esempio di codice 
 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});
Proprietà e metodi principali
  • La proprietà target rappresenta l'elemento (EventTarget) sul quale si è verificato l'evento.
  • type rappresenta il tipo di evento accaduto, come click o input.
  • Il metodo preventDefault annulla l'azione predefinita dell'evento.
Spiegazione del codice
  • Questo codice dimostra come aggiungere un gestore dell’evento submit a un modulo. target si riferisce all’elemento modulo in cui si è verificato l’evento, e type indica il tipo di evento (in questo caso, "submit"). Chiamando il metodo preventDefault, puoi disabilitare i comportamenti predefiniti dell’invio del modulo, come la navigazione o il ricaricamento della pagina. Invece, qui viene eseguito un processo personalizzato: la registrazione dell’output.

MouseEvent

MouseEvent rappresenta eventi relativi alle operazioni del mouse. Gli eventi del mouse come click e mousemove utilizzano questa classe.

Esempio di codice 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Questo codice è un esempio di come usare MouseEvent per mostrare le coordinate del mouse.
Proprietà Principali
  • clientX è la coordinata X del puntatore del mouse all'interno della pagina.
  • clientY è la coordinata Y del puntatore del mouse all'interno della pagina.
  • button indica quale pulsante del mouse è stato premuto. 0 è il tasto sinistro, 1 è il tasto centrale e 2 è il tasto destro.

KeyboardEvent

KeyboardEvent rappresenta eventi relativi alle operazioni della tastiera. Gli eventi keydown e keyup rientrano in questa categoria.

Esempio di codice 
 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});
Proprietà Principali
  • key è il nome del tasto premuto, come Enter o a.
  • code è il codice corrispondente a un tasto della tastiera.
  • altKey, ctrlKey e shiftKey sono proprietà che indicano se il tasto Alt, Ctrl o Shift è stato premuto.
Spiegazione del codice
  • Questo codice utilizza KeyboardEvent per registrare il nome del tasto premuto (key), il relativo codice tasto (code), così come se i tasti modificatori (altKey, ctrlKey, shiftKey) sono stati premuti. Inoltre, esegue un’azione speciale quando viene premuto il tasto Enter.

FocusEvent

FocusEvent si riferisce agli eventi di acquisizione o perdita di focus. Gli eventi focus e blur rientrano in questa categoria.

Esempio di codice 
 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}
  • Questo codice è un esempio su come utilizzare FocusEvent per rilevare e mostrare quando un campo input acquisisce o perde il focus.

Typing in TypeScript

Utilizzando TypeScript, il controllo dei tipi nella manipolazione del DOM e nella gestione degli eventi è migliorato. Di seguito sono riportati esempi di manipolazione del DOM e gestione degli eventi sicure in TypeScript.

Listener di Eventi Tipizzati

Quando si aggiungono listener di eventi, specificare il tipo di evento esegue il controllo dei tipi e impedisce l'accesso a proprietà errate.

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});
  • Questo codice è un esempio di utilizzo di un event listener tipizzato per gestire eventi di input e ottenere in modo sicuro, e poi mostrare, il valore attuale di un campo input.

Gestione Generica degli Eventi

Utilizzando i generics in TypeScript, è possibile gestire eventi generici che supportano vari tipi di eventi.

 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);
  • Questo codice è un esempio di gestore di eventi generico usando i generici, che mostra il tipo di evento e il tag name dell'elemento target.

Riepilogo

In TypeScript, i tipi vengono applicati alle API standard del DOM durante la manipolazione del DOM e la gestione degli eventi, migliorando la sicurezza e la leggibilità del codice. Utilizzando classi come Document e Element, e classi correlate agli eventi come Event, MouseEvent e KeyboardEvent, è possibile uno sviluppo sicuro dei tipi. Inoltre, l'utilizzo di querySelector<T>() o HTMLCollectionOf<T> permette manipolazioni del DOM sicure per il tipo.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Manipolazione del DOM in TypeScriptShadow DOM in TypeScript