Blog

Cos’è il DOM e come usarlo come un pro

Come nella vita di ogni aspirante sviluppatore web junior, arriverà, anche per te, un punto in cui ti imbatterai in dei termini che potranno disorientarti un po’. Alcuni di questi, tuttavia, sono fondamentali per il tuo studio. Hai mai sentito parlare del DOM?
Sarà un acronimo? Una sigla? A cosa servirà?
Niente paura! Scopriamolo insieme e vediamo come manipolarlo al meglio con l’aiuto del linguaggio JavaScript, in questo articolo!

Che cos’è il DOM

Volendo darne una definizione, potremmo dire che il DOM è la modalità in cui è strutturata ogni pagina web, definita come standard ufficiale dal World Wide Web Consortium (W3C), come suggerisce Wikipedia “in maniera tale da essere neutrali sia per la lingua che per la piattaforma” .
Il DOM determina il contenuto della pagina e il modo in cui ogni elemento del contenuto si relaziona con gli altri elementi.

La nostra prima intuizione era esatta: DOM è, infatti, un acronimo che sta per:

  • Document: la pagina web stessa;
  • Object: gli elementi nella pagina web, il suo contenuto;
  • Model: un insieme di istruzioni

Per farla breve, il DOM è un modello per raggiungere e aggiornare dinamicamente il contenuto, la struttura e lo stile di un documento.
Il DOM è spesso rappresentato come un albero. 

Ogni oggetto del DOM è gerarchicamente sotto un altro oggetto e ogni oggetto può avere più figli ma un solo genitore che, se rimosso, porterà con sé anche i suoi figli.
La struttura ad albero per rappresentarlo è proprio indicata per mostrare la relazione tra oggetti genitori e figli, come fosse un vero e proprio albero genealogico: nella metafora, in cima avremmo i nonni, più in basso genitori e fratelli, e infine, figli, loro fratelli e i cugini.
Allo stesso modo, il nodo radice – il nodo in cima all’ albero – di una pagina web sarebbe l'elemento HTML. Al di sotto, possiamo trovare gli  elementi head e body. Figli del body sarebbero gli elementi header, main e footer. Sotto l'elemento header, potremmo trovare elementi img, nav e h1, e via discorrendo.

Chiarite le definizioni, vediamo, ora, come possiamo utilizzare il DOM nel concreto. Sul nostro blog abbiamo toccato spesso come tematica quella di imparare JavaScript, consigliandolo più e più volte. Ricapitoliamo, tuttavia, con un brevissimo excursus, quali sono i vantaggi di questo fantastico linguaggio di programmazione!

Programmare in Javascript: i vantaggi  

La programmazione Javascript porta con sé numerosi vantaggi. Vediamo perché Imparare Javascript può rivelarsi una carta vincente, rispolverando alcuni dei suoi plus:

  • la sintassi estremamente semplice aiuta e incoraggia anche gli aspiranti web developer agli inizi ad addentrarsi nel mondo della programmazione informatica partendo proprio dal linguaggio Javascript;
  • è un linguaggio di programmazione “full stack”, declinabile per molteplici scopi e adatto sia a chi aspira a diventare un back end developer, che a chi preferisce approfondire il mondo dello sviluppo front end;
  • è, attualmente, tra i linguaggi di programmazione più richiesti dal mondo del lavoro
  • le prospettive salariali di uno sviluppatore full-stack che padroneggia JavaScript sono davvero notevoli: un consistente incentivo al suo apprendimento!

Non ci stupisce, dunque, che il linguaggio JavaScript risulti tra i linguaggi di programmazione più usati al giorno d’oggi.
Ma non è tutto! Il nostro amico JavaScript torna estremamente utile anche per manipolare il DOM e utilizzarlo come un pro!

Manipolare il DOM con il linguaggio Javascript

Bene! Ora che abbiamo fatto le dovute precisazioni sul linguaggio JavaScript e sul DOM, vediamo come andare a modificare quest’ultimo. In questo articolo vedremo come: 

  1. Selezionare un elemento del DOM
  2. Modificare lo “style” di un elemento
  3. Modificare le classi di un elemento
  4. Modificare il contenuto di un elemento
  5. Creare un elemento html e inserirlo nel DOM
  6. Rimuovere un elemento HTML
  7. Aggiungere un evento al DOM

Per fare tutte queste cose utilizzeremo l’oggetto “document” presente all’interno di ogni browser che ci da accesso all’albero dell’html. 

Selezionare un elemento del DOM

Per selezionare uno o più elementi troverete online molti metodi:

  1. getElementById()
  2. getElementsByClassName()
  3. getElementsByName()
  4. getElementsByTagName()
  5. getElementsByTagNameNS()

Tutti i metodi qui sopra sono, però, dei metodi vecchi, ormai in disuso nel JavaScript moderno e sono stati sostituiti dai seguenti: 

  1. querySelector()
  2. querySelectorAll()

entrambi questi metodi accettano come parametro un selettore CSS che verrà utilizzato per selezionare gli elementi all’interno dell’html. Vediamo degli esempi:

<h1 id="title">Javascript DOM manipulation</h1>
<script>
let title = document.querySelector('#title');
console.log(title); 
// <h1 id="title">Javascript DOM manipulation</h1>
</script>

In questo esempio, abbiamo selezionato il titolo (h1) attraverso il selettore per ID; facciamo attenzione al modo in cui scriviamo i selettori perché questi sono case sensitive e questo vuol dire che “title” è diverso da “Title”.

Con il metodo querySelector(), quindi, siamo riusciti a selezionare un solo elemento del DOM. Nel caso in cui ci siano più elementi con lo stesso selettore all'interno del DOM questo metodo selezionerà solo il primo che trova; per selezionarne di più dobbiamo utilizzare il metodo querySelectorAll().

<p>Javascript DOM manipulation</p>
<p>Javascript DOM manipulation</p>
<p>Javascript DOM manipulation</p>

<script>
    let paragraphs = document.querySelectorAll('p');
    console.log(paragraphs); // NodeList(3) [p, p, p]
</script>

Il metodo querySelectorAll(),  a differenza del precedente, ci restituisce una NodeList che è un oggetto del DOM simile a un array Javascript.

Modificare lo “style” di un elemento

Una volta selezionato un elemento, abbiamo la possibilità di cambiarne lo stile:

<h1 id="title">Javascript DOM manipulation</h1>
<script>
    let title = document.querySelector('#title');
    title.style.color = 'yellow';
    title.style.backgroundColor = 'black'
    console.log(title);
    // <h1 id="title" style="color: yellow; background-color: black;">Javascript DOM manipulation</h1>
</script>

Ogni oggetto catturato sul DOM avrà la proprietà “style”, che ci darà accesso a tutte le proprietà CSS che possiamo modificare. 

L’unica particolarità a cui dobbiamo fare attenzione è che nel linguaggio CSS le proprietà composte da più parole sono scritte in kebab-case (come ad esempio background-color): questo in JavaScript non è possibile perchè il simbolo “-” viene considerato come l’operatore matematico meno. Quindi dovremo scrivere le proprietà CSS in camelCase, questo vuol dire che: 

  • background-color diventerà backgroundColor
  • font-size diventerà fontSize
  • border-width diventerà borderWidth

e via discorrendo.

Per modificare lo style di vari elementi selezionati con querySelectorAll() non potremo accedere semplicemente alla proprietà style in quanto querySelectorAll non restituisce un singolo elemento ma una NodeList di elementi, dovremo quindi utilizzare un ciclo forEach.

<p>Javascript DOM manipulation</p>
<p>Javascript DOM manipulation</p>
<p>Javascript DOM manipulation</p>
<script>
    let paragraphs = document.querySelectorAll('p');
    paragraphs.forEach((paragraph) => {
        paragraph.style.color = 'yellow';
        paragraph.style.backgroundColor = 'black'
    })
    console.log(paragraphs); // [p , p, p]
</script>

Modificare le classi di un elemento

Proviamo, adesso, a modificare le classi di un elemento.
Per farlo possiamo utilizzare 4 metodi: 

  1. add()
  2. remove()
  3. toggle()
  4. replace()

Possiamo, una volta selezionato un elemento, accedere alla proprietà classList e utilizzare i sopracitati metodi.

   <style>
        .btn-aulab {
            color: #212529;
            background-color: #ffed4a;
            border-color: #ffed4a;
            border-radius: 0px;
            padding: 10px 20px;
        }
    </style>
<button id="btnTest">Cliccami</button>
<script>
    let btnTest = document.querySelector("#btnTest");
    btnTest.classList.add("btn-aulab");
    // Possiamo passare anche più parametri al metodo add()
    btnTest.classList.add("btn","btn-aulab");
</script>

Con il metodo add() possiamo aggiungere al bottone la classe “btn-aulab” che modificherà il nostro bottone con le sue proprietà.

La caratteristica di questo metodo è che se una classe è già presente non sarà aggiunta una seconda volta.

<button id="btnTest" class="btn-aulab">Cliccami</button>
<script>
    let btnTest = document.querySelector("#btnTest");
    btnTest.classList.remove("btn-aulab");
</script>

Con il metodo remove() rimuoviamo una o più classi dall’elemento.

<button id="btnTest" class="btn-aulab">Cliccami</button>   
<script>
    let btnTest = document.querySelector("#btnTest");
    btnTest.classList.toggle("btn-aulab");
</script>

Il metodo toggle() ha una doppia funzionalità: andrà, infatti, ad aggiungere una classe se questa non è presente o a toglierla se questa è presente.

<button id="btnTest" class="btn-brutto">Cliccami</button>   
<script>
    let btnTest = document.querySelector("#btnTest");
    btnTest.classList.replace("btn'brutto","btn-aulab");
</script>

Infine, il metodo replace() va a sostituire una classe con una nuova classe, se e solo se la prima è presente all’interno dell’elemento.

Modificare il contenuto di un elemento

Per modificare il contenuto di un elemento HTML dobbiamo modificare una proprietà presente all’interno di un elemento del DOM ovvero innerHTML.
Questa proprietà ci permette di inserire all’interno di un elemento del DOM non solo del semplice testo ma, addirittura, del codice html che verrà renderizzato come html nonostante stiamo ormai “parlando” alla macchina in linguaggio Javascript e non in linguaggio html.

<h1 id="title">Benvenuti in questo articolo</h1>
<script>
    let title = document.querySelector('#title');
    title.innerHTML = 'Javascript <strong>DOM</strong> manipulation';
    console.log(title);
    // <h1 id="title">Javascript <strong>DOM</strong> manipulation</h1>
</script>

Creare un elemento html e inserirlo nel DOM

Perfetto! Se sei arrivato fin qui, non ci resta che unire tutti i punti precedenti e creare un elemento dinamicamente con Javascript per aggiungerlo al DOM.

Come primo passaggio dobbiamo creare un elemento html con il linguaggio Javascript.

<script>
    let button = document.createElement('button');
    console.log(button); // <button></button>
</script>

Una volta creato un elemento, non ci resta che modificarlo con le classi che vogliamo e il contenuto:

<script>
    let button = document.createElement('button');
    button.classList.add('btn-aulab');
    button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
        </svg>
        Like
    `;
    console.log(button); // <button class="btn-aulab"></button>
</script>

Finito di stilizzare il bottone, non ci resta che aggiungerlo al DOM con il metodo appendChild(); questo, però, per funzionare ha bisogno di un elemento a cui essere “appeso”.

<div id="btnWrapper"></div>
<script>
    let button = document.createElement('button');
    button.classList.add('btn-aulab');
    button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
        </svg>
        Like
    `;
    let btnWrapper = document.querySelector('#btnWrapper');
    btnWrapper.appendChild(button);
</script>

Abbiamo, quindi, creato un <div> che conterrà il nostro bottone creato con il linguaggio JavaScript.

Rimuovere un elemento html

Vediamo, infine, il metodo per rimuovere un elemento html dal DOM.
Per farlo utilizzeremo il metodo removeChild()

<h1 id="title">Benvenuti in questo articolo</h1>
<script>
    let title = document.querySelector('#title');
    title.parentNode.removeChild(title);
</script>

Come possiamo notare, abbiamo utilizzato il metodo removeChild sulla proprietà parentNode.

Quest’ultima seleziona il padre dell’elemento in questione, perché il metodo removeChild va utilizzato, appunto, sul padre dell'elemento che vogliamo rimuovere dal DOM.

Aggiungere un evento al DOM

Cosa sono gli eventi HTML?

Gli eventi HTML sono delle "cose" che accadono agli elementi HTML, come il click di un pulsante, l'immissione di dati in un input, lo scroll del mouse o il movimento del mouse. 
Essenzialmente, ogni cosa che accade sul browser è un evento catturabile da JavaScript.
Quando si verifica un evento, come quelli sopra descritti, è possibile scrivere del codice JavaScript, chiamato “ascoltatore di eventi”, che verrà eseguito.
Questi ascoltatori di eventi sono funzioni della programmazione JavaScript. Pertanto, quando si verifica un evento su un elemento, viene eseguita la funzione dell’ascoltatore.

Per aggiungere un ascoltatore di eventi a un elemento o a un qualsiasi oggetto DOM, utilizzeremo il metodo addEventListener().

<h1 id="title">Benvenuti in questo articolo</h1>
<button id="changeColorButton">Cambia colore</button>
<script>
    let title = document.querySelector('#title');
    let changeColorButton = document.querySelector('#changeColorButton');
    changeColorButton.addEventListener('click', () => {
        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);
        title.style.color = `rgb(${r}, ${g}, ${b})`;
    })
</script>

In questo snippet di codice abbiamo aggiunto un ascoltatore di eventi al bottone con id “changeColorButton” che, al click, genererà  tre numeri casuali che utilizzeremo per creare un colore casuale.

Bene! Ora hai le basi per modificare il DOM e creare effetti incredibili; pronto a sperimentare la tua creatività?

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.