DOM moderno: manipolare interfacce senza jQuery

Perché abbandonare jQuery?

jQuery ha risolto un problema enorme: le incongruità tra i browser. Ha fornito un’API unificata e semplice per compiti complessi. Tuttavia, i browser moderni hanno standardizzato le loro implementazioni JavaScript, rendendo native molte delle funzionalità che jQuery offriva.

Rimuovere jQuery dal tuo stack significa:

• Performance migliori: Meno kilobyte da scaricare e analizzare per il browser, con un impatto diretto sui Core Web Vitals.
• Nessuna dipendenza esterna: Il tuo codice è più autonomo e manutenibile.
• Competenze più attuali: Conoscere le API native del DOM è una competenza fondamentale per ogni sviluppatore front-end moderno.

Selezionare Elementi: Da `$` a `querySelector`

Il cuore di jQuery era la sua funzione dollaro `$` per selezionare elementi. Il JavaScript moderno offre alternative altrettanto potenti e intuitive.

• document.querySelector(): Seleziona il primo elemento che corrisponde a un selettore CSS.
• document.querySelectorAll(): Seleziona tutti gli elementi che corrispondono a un selettore CSS, restituendo una NodeList.

// Vecchio approccio con jQuery
const mainTitle = $('#main-title');
const allButtons = $('.btn');

// Approccio con DOM JavaScript moderno
const mainTitleModern = document.querySelector('#main-title');
const allButtonsModern = document.querySelectorAll('.btn');

// Puoi ciclare una NodeList con forEach
allButtonsModern.forEach(button => {
  console.log(button.textContent);
});

Manipolare Classi e Stili

Aggiungere, rimuovere o verificare la presenza di classi CSS è un’operazione comune. L’API classList rende tutto incredibilmente semplice, senza bisogno di metodi custom.

const alertBox = document.querySelector('.alert');

// Aggiungere una classe
alertBox.classList.add('alert-success');

// Rimuovere una classe
alertBox.classList.remove('alert-warning');

// Aggiungere o rimuovere una classe (toggle)
alertBox.classList.toggle('is-visible');

// Verificare se una classe esiste
if (alertBox.classList.contains('is-visible')) {
  console.log('La notifica è visibile!');
}

// Manipolare stili inline
alertBox.style.backgroundColor = 'lightblue';

Gestire Eventi con il DOM JavaScript moderno

Il sistema di eventi nativo è maturo e potente. addEventListener è il metodo centrale per associare funzioni a eventi specifici (click, submit, mouseover, etc.). Questo è un pilastro del DOM JavaScript moderno.

const actionButton = document.querySelector('#action-button');

function handleButtonClick(event) {
  // event contiene informazioni sull'evento (es. event.target)
  console.log('Pulsante cliccato!');
  event.target.textContent = 'Cliccato!';
}

// Aggiungere un event listener
actionButton.addEventListener('click', handleButtonClick);

// Rimuovere un event listener (richiede la stessa funzione)
// actionButton.removeEventListener('click', handleButtonClick);

Event Delegation: Efficienza al Potere

Invece di aggiungere un listener a ogni elemento di una lista, è più efficiente aggiungerne uno solo al contenitore padre. Questo pattern, noto come Event Delegation, sfrutta il “bubbling” degli eventi.

const listContainer = document.querySelector('#item-list');

listContainer.addEventListener('click', (event) => {
  // Controlliamo se l'elemento cliccato è un LI
  if (event.target && event.target.matches('li.item')) {
    console.log('Hai cliccato l'item:', event.target.textContent);
    event.target.classList.toggle('selected');
  }
});

Conclusione: Il Futuro è Nativo

Padroneggiare la manipolazione del DOM JavaScript moderno non è più un’opzione, ma una necessità. Le API native sono veloci, supportate da tutti i browser moderni e eliminano la necessità di dipendenze pesanti, portando a siti web più performanti e codice più pulito.

Inizia oggi a convertire i tuoi vecchi script jQuery. La curva di apprendimento è dolce e i benefici in termini di performance e competenze sono enormi. Il web moderno ti ringrazierà.