Cos'è il DOM e come usarlo come un pro
javascript programmazione js DOM
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:
- Selezionare un elemento del DOM
- Modificare lo “style” di un elemento
- Modificare le classi di un elemento
- Modificare il contenuto di un elemento
- Creare un elemento html e inserirlo nel DOM
- Rimuovere un elemento HTML
- 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:
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- getElementsByTagNameNS()
Tutti i metodi qui sopra sono, però, dei metodi vecchi, ormai in disuso nel JavaScript moderno e sono stati sostituiti dai seguenti:
- querySelector()
- 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:
- add()
- remove()
- toggle()
- 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à?
