DOM JavaScript — Cheat Sheet

Tag: javascript, dom, html, browser, web-api, frontend

Livello: intermedio

TL;DR: Tecniche essenziali per selezionare, manipolare e ascoltare eventi sugli elementi HTML tramite le API del browser, minimizzando impatti sulle performance.

Concetti chiave

Il DOM (Document Object Model) e' un albero di nodi che rappresenta la struttura del documento HTML in memoria.

Ogni nodo dell'albero e' un oggetto JavaScript, ma i piu' usati sono i nodi di tipo Element e Text.

La selezione degli elementi avviene quasi esclusivamente tramite querySelector (singolo elemento) o querySelectorAll (collezione di elementi).

La manipolazione altera lo stato del documento attraverso classi (classList), attributi (setAttribute) e contenuto (textContent, innerHTML).

La navigazione dell'albero permette di muoversi tra nodi relativi usando parentNode, children, nextElementSibling e previousElementSibling.

Le operazioni sul DOM sono costose: causano ricalcoli del layout (reflow) e ridisegno (repaint).

DocumentFragment permette di creare e comporre nodi offline in memoria per poi appenderli al DOM in una singola operazione, riducendo i reflow.

La propagazione degli eventi si divide in tre fasi: capturing (discesa verso il target), target, e bubbling (risalita verso la root).

Domande tipiche e risposte pronte

Q: Qual e' la differenza tra innerHTML e textContent?

R: Uso textContent per inserire o leggere testo puro, perche' e' sicuro ed evita attacchi XSS. Riservo innerHTML ai casi in cui devo fare il parsing di veri tag HTML, stando molto attento all'origine dei dati.

Q: In cosa consiste l'event delegation?

R: Invece di attaccare un event listener a decine di elementi figli, lo attacco al loro contenitore padre. Sfruttando il bubbling, ascolto l'evento sul padre e uso event.target per identificare il figlio esatto che e' stato cliccato.

Q: Qual e' la differenza tra una NodeList e un Array?

R: querySelectorAll restituisce una NodeList statica che non possiede i metodi degli array come map, filter o reduce. Per usarli, la converto prima in un array con Array.from() o lo spread operator.

Insidie e errori comuni

Usare innerHTML con input utente non sanitizzato, introducendo vulnerabilita' XSS.

Attaccare event listener all'interno di cicli o render ripetuti senza rimuoverli, causando gravi memory leak.

Causare "layout thrashing" leggendo proprieta' di layout (es. offsetHeight) subito dopo aver scritto sul DOM nel medesimo ciclo sincrono.

Dimenticare che getElementById non accetta selettori CSS (niente #), mentre querySelector li richiede.

Snippet e comandi

// Selezione e manipolazione di base
const btn = document.querySelector('#submit-action');
btn.classList.add('loading');
btn.setAttribute('aria-busy', 'true');
btn.textContent = 'Caricamento in corso...';

// Creazione ottimizzata e inserimento con DocumentFragment
const list = document.querySelector('.item-list');
const fragment = document.createDocumentFragment();

const data = ['Uno', 'Due', 'Tre'];
data.forEach(text => {
  const li = document.createElement('li');
  li.className = 'list-item';
  li.textContent = text;
  fragment.appendChild(li);
});

// Appende tutti i figli in una sola volta (un solo reflow)
list.appendChild(fragment);

// Event delegation su elementi creati dinamicamente
list.addEventListener('click', (event) => {
  if (event.target.matches('.list-item')) {
    console.log('Cliccato elemento:', event.target.textContent);
  }
});

// Conversione NodeList in Array per manipolazioni
const allItems = document.querySelectorAll('.list-item');
const itemsArray = [...allItems];
const texts = itemsArray.map(item => item.textContent);

Da ripassare

[ ] Meccanismo di stop della propagazione (stopPropagation vs stopImmediatePropagation)

[ ] Differenza tra HTMLCollection (live) e NodeList (statica)

Riferimenti

MDN Web Docs: Document Object Model

Modifica direttamente o con Gemini Fai clic in un punto qualsiasi per digitare e modificare direttamente oppure seleziona il testo per chiedere a Gemini di apportare modifiche.

I have generated the cheat sheet according to your provided guidelines and template structure. The markdown file focuses solely on technical facts, Q&A, and practical snippets as requested.

Jarvis Interviews
Jarvis