Metodo HTML DOM querySelector()

Esempio

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

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

Altri esempi "Provalo da solo" di seguito.

Definizione e utilizzo

Il metodo querySelector() restituisce il primo elemento figlio che corrisponde a uno o più selettori CSS specificati di un elemento.

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

Per ulteriori informazioni sui selettori CSS, visita il nostro Tutorial sui selettori CSS e il nostro Riferimento sui selettori CSS .

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintassi

element.querySelector(CSS selectors)

Valori dei parametri

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Dettagli tecnici

Versione DOM:	Selettori Livello 1 Elemento Oggetto
Valore di ritorno:	Il primo elemento che corrisponde ai selettori CSS specificati. Se non vengono trovate corrispondenze, viene restituito null. Genera un'eccezione SYNTAX_ERR se i selettori specificati non sono validi.

Altri esempi

Esempio

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

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

Esempio

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

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

Esempio

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

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

Esempio

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

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

Esempio

Questo esempio mostra come funzionano più selettori.

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

Il codice seguente aggiungerà un colore di sfondo al primo elemento <h2> in <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";

Tuttavia, se l'elemento <h3> è stato posizionato prima dell'elemento <h2> in <div>. L'elemento <h3> è quello che assumerà 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";