Impara Che cos'è il Document Object Model (DOM)? | Manipolazione del DOM per lo Sviluppo Web Interattivo

Ora che abbiamo trattato le classi JavaScript, concentriamoci sul Document Object Model (DOM), l'interfaccia che consente di manipolare le pagine web. La prossima sezione esplorerà come JavaScript interagisce con il DOM per creare contenuti dinamici e interattivi.

Pensa al DOM come a un albero genealogico. Ogni elemento del documento è come un membro della famiglia, collegato da relazioni: genitori, figli e fratelli.

Nel DOM, elementi, attributi e testo sono chiamati nodi, e questi nodi sono organizzati gerarchicamente, proprio come i membri di una famiglia in un albero genealogico. Alcuni nodi sono genitori con figli, mentre altri sono fratelli.

La relazione tra HTML e DOM

Quando un browser carica un documento HTML, legge il codice HTML e costruisce un corrispondente albero DOM. L'HTML fornisce la struttura statica della pagina web, mentre il DOM è la rappresentazione dinamica e attiva che JavaScript può manipolare.

L'HTML definisce la struttura iniziale dell'albero genealogico, indicando chi è collegato a chi, ma è statico e non cambia da solo;
Il DOM è l'albero genealogico in tempo reale e può essere modificato. Nuovi membri (elementi) possono essere aggiunti o rimossi, e le relazioni (genitore-figlio, fratelli) possono essere aggiornate tramite JavaScript.

Ad esempio:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Questo HTML crea una struttura ad albero di base con un nodo <html> come genitore e i nodi <head> e <body> come figli. All'interno del body, <h1> e <p> sono fratelli.

Questa struttura rappresenta la versione attiva e interattiva dell'HTML nel DOM, dove JavaScript può manipolare le relazioni tra i nodi (membri della famiglia).

Come JavaScript interagisce con il DOM

JavaScript può accedere e manipolare il DOM per apportare modifiche alla struttura ad albero in tempo reale. È possibile aggiungere nuovi membri, rimuovere quelli esistenti o modificarne le informazioni.

Accesso ai membri della famiglia: Così come è possibile trovare una persona specifica in un albero genealogico, JavaScript può accedere ai singoli nodi del DOM utilizzando metodi come document.getElementById() o document.querySelector();
Modifica delle informazioni: Una volta che un membro della famiglia è stato individuato, i suoi dettagli possono essere aggiornati. Ad esempio, JavaScript può modificare il contenuto testuale o gli attributi di un elemento utilizzando proprietà come innerHTML o textContent;
Modifica delle relazioni: JavaScript può anche aggiungere nuovi membri all'albero o rimuoverli. Questo avviene manipolando la struttura del DOM con metodi come appendChild() o removeChild().

Esempio

Considera questo HTML:

<p id="greeting">Hello, World!</p>

Utilizzando JavaScript, è possibile modificare il testo del paragrafo, proprio come aggiornare il nome di un membro della famiglia:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Dopo l'esecuzione del codice JavaScript, l'albero genealogico (DOM) viene aggiornato e il testo del paragrafo cambia da "Hello, World!" a "Hello, JavaScript!"

index.html

index.js

index.css

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 1

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.22

Scorri per mostrare il menu