Tutorial Javascript

DOM (Document Object Model)

Documento 1: DOM (Document Object Model)

Benvenuto nel primo documento del capitolo sulla manipolazione del documento HTML nel nostro tutorial su JavaScript. In questo documento, esploreremo il Document Object Model (DOM), che rappresenta la struttura del documento HTML come un albero di oggetti.

Cos'è il DOM?

Il Document Object Model (DOM) è una rappresentazione gerarchica e strutturata di un documento HTML che consente agli script JavaScript di accedere, manipolare e modificare il contenuto e la struttura della pagina web.

Struttura ad Albero del DOM

Il DOM organizza il documento HTML in un albero gerarchico di nodi, dove ogni elemento, attributo e testo sono rappresentati come nodi.

Esempio di struttura ad albero del DOM:

<!DOCTYPE html> <html> <head> <title>Titolo della Pagina</title> </head> <body> <h1>Intestazione</h1> <p>Questo è un paragrafo.</p> </body> </html>

Nell'esempio sopra, `<html>`, `<head>`, `<body>`, `<h1>`, `<p>`, e `TextNode` sono esempi di nodi nel DOM.

Accesso agli Elementi del DOM

JavaScript consente di accedere agli elementi del DOM utilizzando metodi come `getElementById`, `getElementsByClassName`, `getElementsByTagName`, `querySelector`, e `querySelectorAll`.

Esempio di accesso agli elementi del DOM:

// Ottieni un elemento per ID let mioElemento = document.getElementById('mioID'); // Ottieni tutti gli elementi con una determinata classe let elementiClasse = document.getElementsByClassName('miaClasse'); // Ottieni un elemento per il selettore CSS let primoParagrafo = document.querySelector('p');

Manipolazione del DOM

Una volta ottenuto un riferimento agli elementi del DOM, è possibile manipolarli modificando attributi, aggiungendo o rimuovendo elementi, modificando stili e contenuti.

// Modifica il testo di un elemento mioElemento.textContent = 'Nuovo testo'; // Aggiungi una classe a un elemento mioElemento.classList.add('nuovaClasse'); // Crea un nuovo elemento let nuovoElemento = document.createElement('div'); nuovoElemento.textContent = 'Nuovo elemento'; document.body.appendChild(nuovoElemento); // Aggiungi il nuovo elemento al documento

Conclusioni

Il Document Object Model (DOM) è un'interfaccia di programmazione che consente agli sviluppatori di manipolare la struttura, il contenuto e lo stile delle pagine web tramite JavaScript. Comprendere il DOM è fondamentale per la manipolazione dinamica e interattiva delle pagine web. Continua a esplorare il tutorial per approfondire ulteriormente le tue conoscenze sulla manipolazione del documento HTML tramite il DOM in JavaScript.