JavaScript e DOM — Manipolazione Efficiente Senza jQuery per Sviluppatori che Vogliono Performance

Stai ancora scrivendo $('.elemento').hide()? Quel piccolo frammento jQuery costa una richiesta HTTP, un parsing extra e una chiamata a funzione che oggi puoi risolvere con una riga di JavaScript nativo. Noi, di Meteora Web, lo vediamo ogni giorno nei progetti che ci arrivano: codice che carica una libreria da 80KB solo per usare tre metodi. Il risultato? Pagine più lente, bundle più pesanti, e un utente che aspetta. In questa guida ti mostriamo come manipolare il DOM senza jQuery, in modo efficiente e moderno.

Perché abbandonare jQuery per la manipolazione del DOM?

jQuery è stato un punto di svolta quando Internet Explorer dominava e il DOM API era un incubo. Oggi, tutti i browser moderni supportano nativamente querySelector, classList, addEventListener e fetch. Mantenere jQuery significa:

• Payload aggiuntivo: anche minificato, jQuery sono ~30KB compressi. Per un sito che deve caricare in meno di due secondi, ogni kilobyte conta.
• Dipendenze morte: aggiornamenti di sicurezza, conflitti con altri framework, inutile complessità.
• Performance: le operazioni DOM native sono più veloci perché non passano attraverso un livello di astrazione.

Un cliente e-commerce aveva un carosello che usava jQuery per animare le slide. Sostituendo il codice con requestAnimationFrame e classList.toggle, abbiamo ridotto il tempo di interazione del 40%. Non è teoria: sono numeri.

Come selezionare elementi del DOM senza jQuery?

La prima cosa che impari con jQuery è $('.classe'). In JavaScript nativo hai due armi principali.

querySelector e querySelectorAll

Usa document.querySelector('.classe') per il primo elemento, document.querySelectorAll('.classe') per tutti. Accettano qualsiasi selettore CSS, proprio come jQuery.

// jQuery
$('.item').addClass('attivo');

// Nativo
document.querySelectorAll('.item').forEach(el => el.classList.add('attivo'));

Nota: querySelectorAll restituisce una NodeList statica, non viva. Se aggiungi o rimuovi elementi dopo la selezione, non si aggiorna automaticamente. Per liste dinamiche, usa una selezione ogni volta che serve.

getElementById e getElementsByClassName

Per performance massime, document.getElementById('id') è ancora il più veloce. getElementsByClassName restituisce una HTMLCollection viva (si aggiorna automaticamente).

// Veloce per ID
const header = document.getElementById('header');

// Vivo per classi
const slides = document.getElementsByClassName('slide');
console.log(slides.length); // si aggiorna se aggiungi una slide

Come modificare classi e stili in modo efficiente?

jQuery: $('.box').addClass('rosso'). Nativo: classList.add('rosso'). Semplice, ma ci sono dettagli che fanno la differenza.

classList: add, remove, toggle, contains

const el = document.querySelector('.box');

// Aggiungere
el.classList.add('evidenziato');

// Rimuovere
el.classList.remove('nascosto');

// Alternare
el.classList.toggle('attivo');

// Verificare
if (el.classList.contains('attivo')) {
  // fai qualcosa
}

Attenzione: classList non accetta liste separate da spazio in una stringa. Se devi aggiungere più classi, passa più argomenti: el.classList.add('a', 'b', 'c');.

Modificare stili inline

jQuery: $('.box').css('background', 'red');. Nativo:

el.style.background = 'red';
el.style.setProperty('--custom-prop', '10px');

Per performance, evita di leggere style in loop. Leggi una volta, applica fuori dal ciclo. E preferisci classi a stili inline: le classi sono più manutenibili e sfruttano la cache del browser.

Come gestire eventi senza jQuery?

jQuery: $('.btn').on('click', fn). Nativo: addEventListener. Ma c'è un trucco che molti dimenticano: delegazione eventi.

addEventListener diretto

document.querySelector('.btn').addEventListener('click', function(e) {
  console.log('Cliccato!');
});

Per rimuovere, removeEventListener richiede la stessa funzione (non anonima).

Delegazione eventi per elementi dinamici

Se hai una lista che cambia (es. commenti caricati via AJAX), non attaccare un listener a ogni nuovo elemento. Usa la delegazione:

// jQuery
$('#lista').on('click', '.item', fn);

// Nativo
document.querySelector('#lista').addEventListener('click', function(e) {
  const item = e.target.closest('.item');
  if (item) {
    // esegui azione
  }
});

Vantaggi: un solo listener, funziona anche per elementi aggiunti dopo. closest è la chiave per risalire al genitore corretto.

Come creare e inserire elementi nel DOM senza jQuery?

jQuery: $('<div>').text('Ciao').appendTo('.container');. Nativo: document.createElement e appendChild o insertAdjacentHTML.

createElement + append

const div = document.createElement('div');
div.textContent = 'Ciao';
div.classList.add('messaggio');
document.querySelector('.container').appendChild(div);

// Più moderno: append (anche più nodi)
document.querySelector('.container').append(div, altroNodo, 'testo');

insertAdjacentHTML per HTML grezzo

Se hai una stringa HTML, insertAdjacentHTML è più veloce di innerHTML perché non distrugge i listener esistenti:

document.querySelector('.container').insertAdjacentHTML('beforeend', '<div class="nuovo">Contenuto</div>');

Posizioni: beforebegin, afterbegin, beforeend, afterend.

Quali sono gli errori comuni nella manipolazione DOM nativa?

Quando lavoriamo su progetti ereditati, troviamo sempre gli stessi errori. Evitarli significa performance e manutenibilità.

• Leggere e scrivere il DOM in loop: ogni accesso al DOM è costoso. Accumula le modifiche e applica una volta sola. Usa DocumentFragment per inserimenti multipli.
• Usare innerHTML senza sanitizzare: apre a XSS. Preferisci textContent per testo, setAttribute per attributi.
• Dimenticare di rimuovere i listener: crea memory leak specialmente in SPA. Usa AbortController per rimuoverli in blocco.
• Non usare la delegazione: se hai 100 elementi dinamici, non attaccare 100 listener. Uno solo basta.

Cosa fare adesso

1. Revisiona il tuo codice: cerca $() o jQuery nel progetto. Valuta se puoi sostituire ogni occorrenza con nativo.
2. Usa una polyfill solo se necessario: per browser vecchi, classList e querySelector sono supportati da IE10+. Se devi supportare IE9, valuta un polyfill piccolo invece dell'intero jQuery.
3. Misura le performance: apri DevTools, registra le operazioni DOM e confronta prima/dopo. I numeri ti daranno ragione.
4. Impara a usare closest e matches: sono i sostituti di parents() e is() di jQuery.

Noi, di Meteora Web, abbiamo progressivamente eliminato jQuery da tutti i progetti nuovi da anni. Non per moda, ma perché il nativo è più performante, più leggero e più facile da mantenere. Se stai costruendo un sito oggi, non c'è motivo di caricare una libreria legacy. Il DOM API è maturo. Usalo.

Per approfondire il contesto moderno di JavaScript, dai un'occhiata al nostro Pillar JavaScript Moderno ES2024+.