HTML DOM querySelector() Method

Esempio

Prendi il primo elemento nel documento con class = "example":

document.querySelector(".example");

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

Il querySelector() metodo restituisce il primo elemento che corrisponde a un CSS specificato selector(s) nel documento.

Nota: Il querySelector() restituisce solo il primo elemento che corrisponde ai selettori specificati. Per restituire tutte le partite, utilizzare il querySelectorAll() invece il metodo.

Se il selettore corrisponde a un ID nel documento che viene utilizzato più volte (Si noti che un "id" deve essere univoco all'interno di una pagina e non deve utilizzato più di una volta), restituisce il primo elemento corrispondente.

Per ulteriori informazioni su CSS selettori, visitare il nostro CSS selettori tutorial e il nostro CSS selettori di riferimento .

Supporto browser

I numeri nella tabella specifica la prima versione del browser che supporta pienamente il metodo.

Metodo
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintassi

document.querySelector( CSS selectors )

valori dei parametri

Parametro	Tipo	Descrizione
CSS selectors	String	Necessario. Specifica uno o più selettori CSS per abbinare l'elemento. Questi sono usati per selezionare gli elementi HTML in base alle loro identità, classi, tipi, attributi, valori degli attributi, ecc Per più selettori, separare ogni selettore con una virgola. L'elemento restituito dipende da quale elemento che viene trovato per primo nel documento (See "More Examples") . Suggerimento: per un elenco di tutti i CSS selettori, guardare il nostro CSS selettori di riferimento .

Dettagli tecnici

DOM Versione:	Livello I selettori Oggetto 1 Documento
Valore di ritorno:	Un oggetto NodeList, rappresenta il primo elemento che corrisponde al CSS specificato selector(s) . Se non vengono trovate corrispondenze, viene restituito null. Getta un'eccezione SYNTAX_ERR se specificata selector(s) è valido.

Altri esempi

Esempio

Prendi la prima <p> elemento nel documento:

document.querySelector("p");

Prova tu stesso "

Esempio

Prendi la prima <p> elemento nel documento con class = "example":

document.querySelector("p.example");

Prova tu stesso "

Esempio

Modificare il testo di un elemento con id = "demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Prova tu stesso "

Esempio

Prendi la prima <p> elemento nel documento in cui il genitore è un <div> elemento.

document.querySelector("div > p");

Prova tu stesso "

Esempio

Prendi il primo <a> elemento nel documento che ha un "target" attributo:

document.querySelector("a[target]");

Prova tu stesso "

Esempio

Questo esempio dimostra come multipla funzionano selettori.

Supponiamo di avere due elementi: a <h2> e <h3> elemento.

Il seguente codice aggiungerà un colore di sfondo al primo <h2> elemento nel documento:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

Prova tu stesso "

Tuttavia, se la <h3> elemento è stato collocato prima della <h2> elemento nel documento. Il <h3> elemento è quello che otterrà il colore di sfondo rosso.

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

Prova tu stesso "