Individuazione degli elementi DOM mediante selettori

L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi Element dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.

L'interfaccia NodeSelector

Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce Document, DocumentFragment, o Element:

querySelector
Restituisce il primo nodo Element corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito null.
querySelectorAll
Restituisce una NodeList contenente tutti i nodi Element corrispondenti all'interno della sottostruttura del nodo o una NodeList vuota se non vengono trovate corrispondenze.
Note: La NodeList restituita da querySelectorAll() non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.

È possibile trovare esempi e dettagli leggendo la documentazione per i metodi Element.querySelector() e Element.querySelectorAll(), nonché nell'articolo Code snippets for querySelector.

Selettori

I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (p)  in un documento la cui classe CSS è warningnote, è possibile effettuare le seguenti operazioni:

var special = document.querySelectorAll("p.warning, p.note");

Puoi anche effettuare una query per ID. Per esempio:

var el = document.querySelector("#main, #basic, #exclamation");

Dopo aver eseguito il codice sopra, el contiene il primo elemento nel documento il cui ID è uno di main, basic, o exclamation.

Puoi usare qualsiasi selettore CSS con i metodi querySelector()querySelectorAll().

Vedi anche