Frontend Academy · Lezione

querySelector e querySelectorAll

Trovi uno o più elementi utilizzando stringhe di selettori CSS e comprenda la differenza tra NodeList e HTMLCollection.

querySelector e querySelectorAll è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cos'è il DOM?

Il Document Object Model è un albero di oggetti JavaScript che rappresenta la struttura HTML. JavaScript interagisce con il DOM per leggere, modificare, aggiungere e rimuovere elementi, rendendo dinamiche le pagine web.

getElementById

Il selettore classico. document.getElementById('myId') restituisce l'elemento con quell'id oppure null se non viene trovato. È veloce, ma funziona solo con gli ID.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — elemento singolo

document.querySelector(cssSelector) restituisce il primo elemento che corrisponde a un qualsiasi selettore CSS. Restituisce null se non ne trova alcuno. È più flessibile di getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — più elementi

document.querySelectorAll(cssSelector) restituisce una NodeList statica contenente tutti gli elementi corrispondenti. Non è un array aggiornato automaticamente: è necessario scorrerla. Utilizzi Array.from() o lo spread per usare i metodi degli array.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Query con ambito limitato

È possibile chiamare querySelector su qualsiasi elemento per cercare solo all'interno del relativo sottoalbero, non nell'intero documento. Questo è più efficiente e impedisce di selezionare accidentalmente elementi appartenenti ad altre parti della pagina.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList e HTMLCollection

NodeList, restituita da querySelectorAll, è statica: riflette il DOM al momento della query. HTMLCollection, restituita da getElementsByClassName e metodi simili, è dinamica: si aggiorna automaticamente quando cambia il DOM. Entrambe sono simili agli array, ma non sono array.

Navigare nel DOM

Da qualsiasi elemento è possibile navigare usando: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Verificare l'esistenza di un elemento

Verifichi sempre che querySelector non abbia restituito null prima di usare il risultato, soprattutto per gli elementi che potrebbero non essere presenti in ogni pagina.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() e closest()

element.matches(selector) restituisce true se l'elemento corrisponde al selettore. element.closest(selector) risale l'albero del DOM e restituisce il primo antenato che corrisponde al selettore, oppure null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) restituisce true se l'elemento figlio si trova all'interno dell'elemento padre o se è l'elemento padre stesso. È utile per verificare se un clic è avvenuto all'esterno di una finestra modale o di un menu a discesa.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Prestazioni: ridurre al minimo le query del DOM

Le query del DOM non sono gratuite. Salvi il risultato in una variabile invece di chiamare ripetutamente querySelector. Nei cicli, raggruppi le letture del DOM e le scritture nel DOM per evitare continui ricalcoli del layout.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Verifica rapida

Quale metodo restituisce una NodeList statica contenente tutti gli elementi corrispondenti?

Riepilogo: selezionare gli elementi del DOM

querySelector restituisce la prima corrispondenza. querySelectorAll restituisce tutte le corrispondenze come NodeList statica. Limiti l'ambito delle query a un sottoalbero per una maggiore efficienza. Memorizzi nella cache i risultati delle query. Utilizzi closest() per la delega degli eventi. Verifichi sempre che il risultato non sia null prima di usare un elemento ottenuto tramite query.

Domande Frequenti

La lezione «querySelector e querySelectorAll» è gratuita?

Sì — il testo completo di «querySelector e querySelectorAll» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «querySelector e querySelectorAll»?

Trovi uno o più elementi utilizzando stringhe di selettori CSS e comprenda la differenza tra NodeList e HTMLCollection. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «querySelector e querySelectorAll»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

querySelector e querySelectorAll
addEventListener e oggetto Event
Modifica del contenuto: textContent, innerHTML, classList
Creazione e aggiunta di elementi

← Torna a Frontend Academy