HTML DOM querySelector() Method

Esempio

Modificare il testo del primo elemento figlio con class = "example" in un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

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

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

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

element .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 1 elemento OBJECT
Valore di ritorno:	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

Modificare il testo del primo <p> elemento in un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Prova tu stesso "

Esempio

Modificare il testo del primo <p> elemento con class = "example" in un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Prova tu stesso "

Esempio

Modificare il testo di un elemento con id = "demo" in un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Prova tu stesso "

Esempio

Aggiungere un bordo rosso al primo <a> elemento che ha un attributo target all'interno di un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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 <div> :

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Prova tu stesso "

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

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Prova tu stesso "