Manipolare il DOM con JavaScript: selezionare e modificare

Il DOM (Document Object Model) è il sistema che rappresenta gli elementi di un documento HTML come oggetti manipolabili dal linguaggio JavaScript. Significa che, quando usi JavaScript per lavorare con il DOM, puoi aggiungere, eliminare, modificare o leggere gli elementi HTML della tua pagina web.

In questo esempio useremo il codice HTML qui sotto per illustrare le varie tecniche di manipolazione del DOM:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Selezionare i nodi del DOM

Per manipolare il DOM devi prima selezionare i nodi che vuoi modificare. In JavaScript esistono diversi metodi per farlo:

• Il metodo document.getElementById seleziona un nodo in base al suo ID. Per esempio, per selezionare la div con l’ID «container» scrivi:

const container = document.getElementById('container');

• Il metodo document.getElementsByClassName seleziona un elenco di nodi in base alla loro classe. Per esempio, per selezionare tutti gli elementi li con la classe «item» scrivi:

const items = document.getElementsByClassName('item');

• Il metodo document.querySelector seleziona il primo nodo che corrisponde a un selettore CSS. Per esempio, per selezionare il primo elemento li della lista scrivi:

const firstItem = document.querySelector('li');

Questo metodo restituisce il primo elemento che corrisponde al selettore indicato. Se non ne trova nessuno, restituisce null.

• Il metodo document.querySelectorAll funziona allo stesso modo, ma restituisce un array con tutti i nodi che corrispondono al selettore. Per esempio:

const items = document.querySelectorAll('li');

Questo metodo seleziona più elementi in una volta sola. Puoi poi scorrerli con un ciclo, come abbiamo visto nel capitolo sui cicli.

Se hai seguito il capitolo sui cicli, sappi che il metodo forEach dell’oggetto Array si può usare direttamente con document.querySelectorAll('li'). Ecco come:

document.querySelectorAll('li').forEach(function(li) {
  // Codice da eseguire per ogni elemento li
});

Questo codice seleziona tutti gli elementi li della pagina ed esegue del codice per ciascuno di essi. Per esempio, per associare un evento «click» a ogni elemento li:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

Al posto della funzione anonima puoi usare una arrow function:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Puoi anche selezionare gli elementi usando il loro identificatore o la loro classe, esattamente come in CSS. Per esempio:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Con questa sintassi selezioni gli elementi in base al loro identificatore o alla loro classe. È comodo quando vuoi manipolare proprio quegli elementi in JavaScript.

Esistono molti altri modi di selezionare elementi nel DOM in JavaScript, ma questi metodi sono i più usati e sono un’ottima base di partenza.

Modificare il DOM in JavaScript

Ora che abbiamo visto i vari metodi per recuperare un elemento preciso del nostro codice HTML, vediamo come modificare il DOM: aggiungere contenuto, cambiare il testo o il CSS.

Aggiungere HTML in JavaScript

Puoi aggiungere HTML a un elemento del DOM con la proprietà innerHTML. Per esempio, per aggiungere una voce in fondo alla lista:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Aggiungere un nuovo elemento in JavaScript

Puoi anche creare un nuovo elemento e agganciarlo a un elemento del DOM con il metodo appendChild. Per esempio, per aggiungere una voce in fondo alla lista:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Cambiare il testo di un elemento in JavaScript

Puoi cambiare il testo di un elemento con la proprietà textContent. Per esempio, per cambiare il testo del titolo:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

Aggiungere CSS a un elemento in JavaScript

Puoi aggiungere CSS a un elemento del DOM con la proprietà style. Per esempio, per mettere il paragrafo in rosso e in grassetto:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

Puoi anche usare il metodo setAttribute per aggiungere del CSS a un elemento. Per esempio:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Conclusione

Esistono molti altri modi di manipolare il CSS di un elemento del DOM in JavaScript, ma questi metodi sono i più usati e sono un’ottima base di partenza.

Oltre al CSS puoi manipolare anche altri aspetti di un elemento del DOM, come il suo contenuto HTML o testuale, o agganciarci degli eventi: il clic, il passaggio del mouse sul testo e così via.

Nel prossimo capitolo vedremo gli eventi in JavaScript e come lavorarci.