Articles
Introduzione a TypeScript
Manipolazione del DOM in TypeScript

Manipolazione del DOM in TypeScript

Questo articolo spiega la manipolazione del DOM in TypeScript.

Imparerai come manipolare gli elementi del DOM e come aggiungere o rimuovere elementi dall’albero DOM attraverso esempi di codice.

YouTube Video

Manipolazione del DOM in TypeScript

La manipolazione del DOM in TypeScript viene eseguita in modo simile a JavaScript, ma TypeScript fornisce il controllo dei tipi, rendendo le operazioni più sicure. Il DOM (Document Object Model) è un modello a oggetti utilizzato per manipolare i documenti HTML e XML tramite programmazione. Consente di accedere alle pagine visualizzate nel browser, aggiungere o rimuovere elementi o modificarne gli stili.

Presentiamo ora i metodi di base per manipolare il DOM utilizzando TypeScript.

Ottenere gli elementi del DOM

Utilizza l’oggetto document per ottenere elementi HTML. Sono comunemente usati i seguenti metodi:.

  1. document.getElementById document.getElementById ottiene l'elemento con l'attributo ID specificato.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById recupera l'elemento con l'ID specificato e ti consente di accedere al suo contenuto se esiste.`.
  1. document.querySelector document.querySelector recupera il primo elemento che corrisponde al selettore CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector recupera il primo elemento che corrisponde al selettore CSS specificato e ti consente di accedere al suo contenuto se esiste.`.
  1. document.querySelectorAll document.querySelectorAll recupera tutti gli elementi che corrispondono al selettore CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll recupera tutti gli elementi che corrispondono al selettore CSS specificato e ti consente di accedere al loro contenuto tramite iterazione.`.

Asserzione del Tipo di Elemento

In TypeScript, asserire esplicitamente il tipo di un elemento ti consente di utilizzare metodi e proprietà più specifiche.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • La parola chiave as è un operatore di asserzione di tipo in TypeScript, utilizzato per dire esplicitamente al compilatore di trattare un valore come un tipo specifico.
  • In TypeScript, puoi usare le asserzioni di tipo per trattare l'elemento recuperato come un tipo specifico e accedere a proprietà o metodi specifici di quel tipo.

Manipolazione del DOM

La manipolazione del DOM viene eseguita tramite le proprietà degli elementi. Questo permette di controllare in modo flessibile le modifiche al testo o agli attributi, applicare stili e aggiornare i contenuti visualizzati.

  1. Modifica del testo di un elemento

    Puoi modificare il testo o l’HTML di un elemento utilizzando le sue proprietà textContent o innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Puoi usare textContent o innerHTML di un elemento per modificarne il testo visualizzato o il contenuto HTML.

  1. Modifica dello stile di un elemento

    Puoi modificare gli stili in linea usando la proprietà style dell’elemento.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Questo codice recupera un elemento specifico, cambia il colore del suo testo in blu e imposta la dimensione del carattere a 20px.

  1. Modifica degli attributi di un elemento

    Se desideri modificare gli attributi di un elemento, usa setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Questo codice cambia l'attributo href del primo elemento di collegamento nella pagina in https://example.com.

  1. Gestione delle classi degli elementi

    Per aggiungere o rimuovere le classi degli elementi, usa classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Questo codice aggiunge la classe active e rimuove la classe inactive da un elemento specifico.

Aggiungere e rimuovere elementi DOM

Puoi anche aggiungere nuovi elementi o rimuovere quelli esistenti. Ciò rende possibile modificare dinamicamente la struttura della pagina in risposta alle azioni dell'utente o allo stato dell'applicazione.

  1. Creazione e aggiunta di nuovi elementi

    Usa document.createElement per creare un nuovo elemento e aggiungerlo al DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Questo codice crea un nuovo elemento <div>, ne imposta il testo e lo aggiunge al <body> della pagina.

  1. Rimozione degli elementi

    Per rimuovere un elemento, usa i metodi removeChild o remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Questo codice mostra come rimuovere un elemento figlio specifico dal suo genitore e come rimuovere direttamente l'elemento stesso.

Aggiunta di eventi

In TypeScript, puoi aggiungere event listener agli elementi per eseguire azioni in base alle interazioni dell’utente.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Questo codice aggiunge un listener di eventi che visualizza un messaggio nella console quando il pulsante viene cliccato.
  • Utilizzando addEventListener, puoi ascoltare e gestire vari eventi come clic, movimenti del mouse e input da tastiera.

Punti da considerare per la manipolazione del DOM in TypeScript

Quando manipoli il DOM con TypeScript, prestare attenzione alle definizioni dei tipi di elemento e ai controlli null può aiutare a prevenire errori e consentire di scrivere codice solido.

  1. Controllo del valore Null

    Poiché un elemento DOM potrebbe non esistere, è consigliabile effettuare un controllo sul valore null prima di manipolare gli elementi in TypeScript.

  2. Asserzione esplicita del tipo

    Quando si opera su un elemento specifico (ad esempio un HTMLInputElement), è comune usare un’asserzione (as) per specificare il tipo e utilizzare proprietà specifiche dell’elemento come value.

Tenendo a mente questi punti, la manipolazione del DOM con TypeScript ti consente di scrivere codice più sicuro e prevedibile, combinando la flessibilità di JavaScript con la sicurezza dei tipi di TypeScript.

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

YouTube Video

L'oggetto window in TypeScriptClassi utilizzate per la manipolazione del DOM/gestione degli eventi in TypeScript