JavaScript Academy · Lezione

Selezionare elementi con querySelector

Trovi gli elementi usando selettori CSS.

Selezionare elementi con querySelector è una lezione JavaScript 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Scoprire querySelector

querySelector restituisce il primo elemento che corrisponde a un selettore CSS oppure null se non trova corrispondenze. È disponibile su document e su ogni elemento.

const title = document.querySelector("h1");
console.log(title.textContent);

Funziona qualsiasi selettore CSS

La potenza di querySelector sta nel fatto che accetta gli stessi selettori usati in CSS: tag, classi, id, attributi e combinazioni.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll restituisce tutti gli elementi corrispondenti sotto forma di NodeList statica. Anche quando non trova corrispondenze restituisce un elenco vuoto, mai null.

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Iterare sui risultati

Una NodeList restituita da querySelectorAll supporta direttamente forEach, rendendo l'iterazione semplice e ordinata.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Selettori dei discendenti

È possibile selezionare elementi annidati usando uno spazio, proprio come in CSS. In questo modo si trovano tutti gli elementi .price all'interno di un elemento .product.

const prices = document.querySelectorAll(".product .price");

Combinare le classi

Collegare le classi senza spazi significa che un elemento deve averle tutte. In questo caso vengono selezionati i pulsanti che sono sia primary sia large.

const btn = document.querySelector("button.primary.large");

Query con ambito limitato

Chiamare querySelector su un elemento, anziché su document, cerca solo all'interno di quell'elemento. In questo modo le ricerche restano locali e veloci.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Pseudo-classi

Funzionano anche le pseudo-classi strutturali come :first-child e :nth-of-type.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Gestire l'assenza di corrispondenze

Poiché querySelector può restituire null, verifichi il risultato prima di usarlo per evitare un TypeError.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Selettori di attributo

I selettori di attributo consentono di selezionare gli elementi in base agli attributi data, un'ottima soluzione per collegarsi agli elementi senza dipendere dalle classi.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector e API precedenti

querySelector è più flessibile di getElementById perché accetta qualsiasi selettore, ma le ricerche tramite id sono ancora leggermente più veloci. Usi lo strumento più adatto al compito.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Verifica rapida

Verifichi la sua comprensione dei selettori.

Riepilogo

Ha imparato che querySelector restituisce la prima corrispondenza o null, mentre querySelectorAll restituisce una NodeList statica di tutte le corrispondenze. Entrambi accettano selettori CSS completi e possono limitare la ricerca a un elemento genitore. Quando usa querySelector, verifichi sempre che il risultato non sia null.

Domande Frequenti

La lezione «Selezionare elementi con querySelector» è gratuita?

Sì — il testo completo di «Selezionare elementi con querySelector» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Selezionare elementi con querySelector»?

Trovi gli elementi usando selettori CSS. Eserciti JavaScript 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 JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript 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 «Selezionare elementi con querySelector»?

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 JavaScript Academy?

Sì. Ogni lezione JavaScript 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

← Torna a JavaScript Academy