Selezionare e aggiornare elementi del DOM in base allo stato dell’app

Introduzione

Quando si lavora con il DOM in JavaScript, non basta trovare un elemento: spesso bisogna anche capire se si trova in uno stato specifico e aggiornare il contenuto solo in quel caso. Questo è molto utile in interfacce reali, come dashboard, form, notifiche, card prodotto o liste di attività.

Un sotto-argomento pratico e spesso sottovalutato è la manipolazione condizionale del DOM: selezionare elementi in base al loro stato attuale e modificare testo, attributi o contenuto solo quando serve. Questo approccio aiuta a evitare aggiornamenti inutili, rende il codice più leggibile e riduce gli errori nelle interazioni dinamiche.

In questo tutorial vedremo come gestire una piccola lista di ordini in cui ogni elemento può trovarsi in uno stato diverso. In base allo stato, aggiorneremo etichette, testo e attributi accessibili. L’obiettivo è imparare un metodo pratico che puoi riutilizzare in qualsiasi progetto frontend.

Codice completo

// Selettori principali
const ordersList = document.querySelector(´#orders´);
const refreshButton = document.querySelector(´#refresh-orders´);

// Dati di esempio: in un´app reale arriverebbero da API
const orders = [
  { id: 101, customer: ´Luca´, status: ´pending´ },
  { id: 102, customer: ´Marta´, status: ´shipped´ },
  { id: 103, customer: ´Giulia´, status: ´delayed´ }
];

// Render iniziale della lista
function renderOrders(items) {
  ordersList.innerHTML = ´´;

  items.forEach(order => {
    const li = document.createElement(´li´);
    li.className = ´order´;
    li.dataset.orderId = order.id;
    li.dataset.status = order.status;

    li.innerHTML = `
      Ordine #${order.id} - ${order.customer}
      ${getStatusLabel(order.status)}
    `;

    ordersList.appendChild(li);
  });
}

// Converte lo stato tecnico in etichetta leggibile
function getStatusLabel(status) {
  switch (status) {
    case ´pending´:
      return ´In attesa´;
    case ´shipped´:
      return ´Spedito´;
    case ´delayed´:
      return ´In ritardo´;
    default:
      return ´Sconosciuto´;
  }
}

// Aggiorna il DOM solo per gli elementi che hanno uno stato specifico
function updateOrdersByStatus(statusToFind, newLabel) {
  const orderItems = ordersList.querySelectorAll(´[data-status]´);

  orderItems.forEach(item => {
    if (item.dataset.status === statusToFind) {
      const label = item.querySelector(´.status-label´);

      if (label) {
        label.textContent = newLabel;
      }

      // Aggiorna anche l´attributo per mantenere coerenza tra DOM e stato
      item.dataset.status = ´updated´;
      item.setAttribute(´aria-label´, `Ordine aggiornato: ${newLabel}`);
    }
  });
}

// Simula un refresh dei dati
function refreshOrders() {
  const updatedOrders = orders.map(order => {
    if (order.status === ´pending´) {
      return { ...order, status: ´shipped´ };
    }

    if (order.status === ´delayed´) {
      return { ...order, status: ´pending´ };
    }

    return order;
  });

  renderOrders(updatedOrders);
}

// Eventi
refreshButton.addEventListener(´click´, () => {
  refreshOrders();
  updateOrdersByStatus(´shipped´, ´Spedito di recente´);
});

// Avvio
renderOrders(orders);

Spiegazione

Il codice mostra un pattern molto comune: renderizzare una lista e poi aggiornare solo alcuni elementi in base al loro stato. Analizziamo i passaggi principali.

1. Selezione dei contenitori

Con document.querySelector selezioniamo la lista degli ordini e il pulsante di refresh. Questa è la base: prima individuiamo i nodi principali, poi lavoriamo sui loro figli.

2. Rendering della lista

La funzione renderOrders svuota il contenitore con innerHTML = ´´ e ricrea gli elementi uno per uno. Ogni elemento riceve:

• una classe CSS base: order;
• due data-attributes: data-order-id e data-status;
• un contenuto HTML con titolo ed etichetta di stato.

Usare dataset è molto utile perché permette di memorizzare informazioni direttamente nel DOM, senza dover mantenere strutture parallele complicate.

3. Selezione condizionale

La funzione updateOrdersByStatus cerca tutti gli elementi che hanno un attributo data-status. Poi verifica se il valore corrisponde a quello richiesto:

if (item.dataset.status === statusToFind)

Solo in quel caso aggiorna il testo interno dello span con classe status-label. Questo è il cuore della manipolazione condizionale: non tocchiamo tutto il DOM, ma solo ciò che serve.

4. Aggiornamento del contenuto e degli attributi

Quando troviamo l’elemento giusto, usiamo textContent per modificare il testo in modo sicuro. Poi aggiorniamo anche dataset.status e aria-label.

• textContent è preferibile quando vuoi inserire testo semplice.
• dataset.status mantiene il DOM coerente con lo stato logico.
• aria-label migliora l’accessibilità per lettori di schermo.

5. Refresh dei dati

La funzione refreshOrders simula un aggiornamento esterno, come una nuova risposta API. Invece di modificare il DOM manualmente elemento per elemento, rigenera la lista. Questo approccio è semplice e chiaro per dataset piccoli o medi.

6. Reazione all’interazione

Con addEventListener colleghiamo il pulsante alla logica di aggiornamento. Al click, la lista viene aggiornata e poi si applica una modifica mirata agli ordini appena spediti.

Best practice

La manipolazione condizionale del DOM è potente, ma conviene seguire alcune regole per scrivere codice robusto e mantenibile.

• Usa attributi dati per lo stato: se un elemento ha un significato applicativo, memorizzalo in data-* invece di affidarti solo al testo visibile.
• Preferisci textContent a innerHTML quando devi inserire testo semplice. È più sicuro e riduce il rischio di introdurre HTML indesiderato.
• Seleziona il minimo necessario: evita query troppo generiche su tutto il documento se puoi limitarle a un contenitore specifico.
• Mantieni coerenti stato e interfaccia: se cambi il testo, aggiorna anche l’attributo che rappresenta lo stato logico.
• Usa nomi di stato chiari: valori come pending, shipped, delayed sono più leggibili di codici ambigui come s1 o x2.
• Gestisci i casi mancanti: controlla sempre che il nodo esista prima di modificarlo, soprattutto se il DOM può cambiare dinamicamente.
• Non duplicare la fonte di verità: se lo stato vive nei dati JavaScript, il DOM deve rifletterlo, non contraddirlo.

Riepilogo

In questo tutorial abbiamo visto come selezionare e aggiornare elementi del DOM in base al loro stato. Questa tecnica è molto utile quando l’interfaccia cambia spesso e vuoi intervenire solo sugli elementi interessati.

I punti chiave da ricordare sono:

• selezionare i contenitori principali con querySelector;
• salvare informazioni utili negli attributi data-*;
• aggiornare solo i nodi che rispettano una certa condizione;
• usare textContent e attributi accessibili per modifiche pulite;
• mantenere sempre coerenti dati e DOM.

Questo approccio è semplice ma molto efficace: ti aiuta a costruire interfacce più affidabili, leggibili e facili da mantenere.

Approfondisci con risorse ufficiali

• MDN - Document.querySelector(): guida completa alla selezione degli elementi DOM.
• MDN - Element.dataset: documentazione ufficiale sull’uso dei data attributes in JavaScript.
• MDN - Node.textContent: differenze tra textContent, innerHTML e innerText.
• MDN - Element.setAttribute(): riferimento per impostare attributi HTML dinamicamente.
• MDN - EventTarget.addEventListener(): per collegare interazioni utente e aggiornamenti del DOM.