Il metodo dell’oggetto document chiamato querySelector è molto utile nella programmazione in JavaScript.
Grazie a questo metodo potrai utilizzare del selettori CSS per ottenere il primo elemento del documento che corrisponde al selettore.
Indice
document querySelector: definizione
Il metodo querySelector() è disponibile per l’oggetto document.
Per questo motivo, la funzione è utilizzabile in qualunque contesto, a prescindere dal framework JavaScript utilizzato.
document querySelector: esempi
Qui sotto puoi trovare un esempio di utilizzo del metodo document.querySelector().
In questo estratto di codice ottengo il primo elemento di tipo h2 della pagina.
Se nessun elemento h2 è presente all’interno della pagina, la costante elemento conterrà il valore null.
const elemento = document.querySelector("h2");
Spesso conviene chiamare questo metodo quando la pagina è stata caricata completamente.
In questo caso, è sufficiente chiamare il metodo nel modo seguente:
window.addEventListener("load", () => {
const elemento = document.querySelector("h2");
});
Se vuoi, puoi provare gli esempi proposti in questa pagina facendo riferimento all’articolo Eseguire codice JavaScript su qualunque pagina web.
document querySelectorAll
Se hai bisogno di ottenere tutti gli elementi della pagina che corrispondono ad un certo selettore CSS, puoi utilizzare il metodo querySelectorAll().
Anche questo metodo accetta come parametro una stringa, ovvero il selettore CSS per ottenere gli elementi.
Il metodo ritorna una lista “non-live” degli elementi.
Questo significa che tale lista rappresenta gli elementi presenti nella pagina al momento dell’esecuzione della funzione.
E’ quindi possibile che successivamente alcuni elementi non siano più presenti nella pagina.
Approfondimenti
In questo sito puoi trovare numerosi articoli correlati all’argomento document queryselector JavaScript.
Eccone alcuni:
- Come fare una chiamata AJAX ( GET / POST )
- Variabili CSS: cosa sono e come utilizzarle
- Cosa è Angular? Caratteristiche e vantaggi
- RxJS cosa è e dove viene utilizzata
- Position Sticky CSS: guida ed esempi pratici
Inoltre, puoi trovare altro materiale nelle categorie JavaScript, Web Development e CSS.
Conclusioni
In questo articolo hai scoperto le funzioni querySelector() e querySelectorAll() di JavaScript.
Se volessi altre informazioni su questi metodi, puoi consultare la documentazione presente su MDN.
