JavaScript - Document Object Model (DOM)

Cos'è il DOM?

Il Document Object Model, comunemente noto come DOM, è un'interfaccia di programmazione per documenti HTML e XML. Rappresenta la struttura di un documento come una gerarchia ad albero di oggetti, dove ogni oggetto corrisponde a una parte del documento, come un elemento, un attributo o un nodo di testo.

JavaScript - HTML DOM

Immagina di costruire una casa con i mattoni Lego. Il DOM è come avere un progetto magico che non solo ti mostra come è costruita la casa ma ti permette anche di manipolare e riorganizzare i mattoni usando JavaScript. È uno strumento potente che crea un ponte tra le pagine web e i linguaggi di programmazione.

Concetti chiave del DOM

Nodo: Ogni parte del documento è un nodo. Elementi, attributi e testi sono tutti tipi diversi di nodi.
Struttura ad albero: Il DOM rappresenta il documento come un albero, con l'oggetto document alla radice.
Navigazione: Puoi navigare attraverso l'albero del DOM utilizzando vari metodi e proprietà.
Manipolazione: Il DOM ti permette di cambiare la struttura, lo stile e il contenuto del documento dinamicamente.

Vediamo un esempio semplice per illustrare questi concetti:

<!DOCTYPE html>
<html>
<head>
<title>Il mio primo esempio DOM</title>
</head>
<body>
<h1 id="mainHeading">Benvenuto nel DOM</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>

In questo documento HTML, l'albero del DOM apparirebbe qualcosa del genere:

document
└── html
├── head
│   └── title
│       └── "Il mio primo esempio DOM"
└── body
├── h1
│   └── "Benvenuto nel DOM"
└── p
└── "Questo è un paragrafo."

Cos'è il HTML DOM?

Il HTML DOM è un modello di oggetti standard e un'interfaccia di programmazione per HTML. Definisce:

Gli elementi HTML come oggetti
Le proprietà di tutti gli elementi HTML
I metodi per accedere a tutti gli elementi HTML
Gli eventi per tutti gli elementi HTML

In sostanza, il HTML DOM è uno standard su come ottenere, cambiare, aggiungere o eliminare elementi HTML.

Lavorare con il HTML DOM

Esploriamo alcune operazioni comuni utilizzando il HTML DOM:

Accedere agli elementi

// Ottieni un elemento pelo suo ID
const heading = document.getElementById('mainHeading');

// Ottieni elementi pelo loro nome di tag
const paragraphs = document.getElementsByTagName('p');

// Ottieni elementi pelo loro nome di classe
const highlights = document.getElementsByClassName('highlight');

// Usa querySelector per selezioni più complesse
const firstParagraph = document.querySelector('p');

In questi esempi, stiamo usando diversi metodi per selezionare elementi dal nostro documento HTML. È come usare una bacchetta magica per puntare a specifiche parti della nostra pagina web!

Cambiare il contenuto

// Cambia il contenuto testuale di un elemento
heading.textContent = 'Benvenuto nel meraviglioso mondo del DOM!';

// Cambia il contenuto HTML di un elemento
paragraphs[0].innerHTML = 'Questo paragrafo è stato <strong>modificato</strong>!';

Qui, stiamo aggiornando il contenuto dei nostri elementi. È come cancellare e riscrivere parti della nostra pagina web istantaneamente!

Modificare gli stili

// Cambia lo stile di un elemento
heading.style.color = 'blue';
heading.style.fontSize = '24px';

Con queste righe, stiamo giving il nostro titolo un restyling, cambiandone il colore e la dimensione. È come avere un fashion designer per i tuoi elementi web!

Creare e rimuovere elementi

// Crea un nuovo elemento
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Questo è un paragrafo creato di recente.';

// Aggiungi il nuovo elemento al documento
document.body.appendChild(newParagraph);

// Rimuovi un elemento
document.body.removeChild(paragraphs[0]);

In questo esempio, stiamo facendo il ruolo di un architetto della pagina web - costruire nuovi elementi e demolire vecchi con solo poche righe di codice!

Perché il DOM è necessario?

Il DOM è essenziale per diversi motivi:

Pagine web dinamiche: Senza il DOM, le pagine web sarebbero statiche. Il DOM ci permette di creare esperienze web interattive e dinamiche.
Separazione delle preoccupazioni: Il DOM offre un modo per manipolare il contenuto e la struttura di una pagina web utilizzando JavaScript, mantenendolo separato da HTML e CSS.
Compatibilità cross-browser: Il DOM fornisce un'interfaccia di programmazione standard che funziona su diversi browser, garantendo coerenza nello sviluppo web.
Gestione degli eventi: Il DOM ci permette di associare listener di eventi agli elementi, permettendoci di rispondere a interazioni utente come clic, pressioni di tasti e movimenti del mouse.
AJAX e applicazioni a pagina singola: Il DOM è fondamentale per aggiornare parti di una pagina web senza ricaricare l'intera pagina, che è la base delle moderne applicazioni web.

Vediamo un esempio che unisce molti di questi concetti:

<!DOCTYPE html>
<html>
<head>
<title>Lista della spesa</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>La mia lista della spesa</h1>
<input type="text" id="newTodo">
<button id="addTodo">Aggiungi alla lista</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

Questo esempio dimostra una semplice applicazione di lista della spesa. Mostra:

L'accesso agli elementi utilizzando il DOM
La creazione di nuovi elementi
La modifica del contenuto e degli stili degli elementi
La gestione degli eventi
L'aggiornamento dinamico della pagina senza ricaricare

Utilizzando il DOM, abbiamo creato un'applicazione interattiva che risponde all'input dell'utente e si aggiorna in tempo reale. Questa è la potenza del DOM in azione!

Metodi e proprietà DOM comuni

Ecco una tabella di alcuni metodi e proprietà DOM comunemente utilizzati:

Metodo/Proprietà	Descrizione
`getElementById()`	Restituisce l'elemento con lo specificato ID
`getElementsByClassName()`	Restituisce una collezione di elementi con il nome di classe specificato
`getElementsByTagName()`	Restituisce una collezione di elementi con il nome di tag specificato
`querySelector()`	Restituisce il primo elemento che corrisponde al selettore CSS
`querySelectorAll()`	Restituisce tutti gli elementi che corrispondono al selettore CSS
`createElement()`	Crea un nuovo elemento
`appendChild()`	Aggiunge un nuovo figlio all'elemento
`removeChild()`	Rimuove un figlio dall'elemento
`innerHTML`	Ottiene o imposta il contenuto HTML all'interno di un elemento
`textContent`	Ottiene o imposta il contenuto testuale di un elemento
`style`	Ottiene o imposta lo stile inline di un elemento
`classList`	Permette la manipolazione delle classi di un elemento
`addEventListener()`	Aggiunge un gestore di eventi all'elemento

In conclusione, il DOM è uno strumento potente che dà vita alle pagine web. Permette di creare esperienze dinamiche e interattive che rispondono alle azioni dell'utente e si aggiornano in tempo reale. Mentre continui il tuo viaggio nello sviluppo web, troverai il DOM un alleato indispensabile per creare applicazioni web engaging e reattive. Buon coding!

Credits: Image by storyset

Tutorial precedente:

JavaScript - parola chiave var

Prossimo tutorial:

JavaScript - Metodi DOM