Metodo querySelector() dell'Elemento DOM HTML

Definizione e uso

querySelector() Il metodo restituisce il primo figlio dell'elemento che corrisponde al selettore CSS specificato.

Attenzione:

querySelector() Il metodo restituisce solo il primo elemento che corrisponde al selettore specificato. Per ottenere tutti gli elementi corrispondenti, utilizzare Metodo querySelectorAll().

Vedi anche:

Manuale di riferimento:

Proprietà classList

Proprietà className

Metodo querySelectorAll()

Metodo getElementsByTagName()

Metodo getElementsByClassName()

Oggetto Style HTML DOM

Tutorial:

Sintassi CSS

Selettore CSS

Manuale di riferimento dei selettori CSS

Esempio

Esempio 1

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

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

Prova da solo

Più esempi sono forniti nella pagina sottostante.

Sintassi

element.querySelector(CSSselectors)

Parametri

Parametri Descrizione
CSSselectors

Obbligatorio. Stringa. Specifica uno o più selettori CSS per abbinare gli elementi.

I selettori CSS vengono utilizzati per selezionare elementi HTML in base a id, classi, tipi, attributi, valori degli attributi, ecc.

Per più selettori, separa ogni selettore con una virgola.

L'elemento restituito dipende dal primo elemento trovato nel documento (vedi i "Più esempi" sottostanti).

Suggerimento:Per una lista completa di selettori CSS, consulta la nostra Manuale di riferimento dei selettori CSS.

Dettagli tecnici

Valore di ritorno:

Corrisponde all'elemento primo che matcha il selettore CSS specificato.

Se non viene trovato alcun elemento corrispondente, viene restituito null.

Se il selettore specificato non è valido, viene lanciata l'eccezione SYNTAX_ERR.
Versione DOM: Selectori Livello 1 Oggetto Elemento

Più esempi

Esempio 2

Modifica il testo del primo <p> elemento all'interno dell'elemento <div>:

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

Prova da solo

Esempio 3

Modifica il testo del primo <p> elemento con class="example" all'interno dell'elemento <div>:

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

Prova da solo

Esempio 4

Modifica il testo dell'elemento con id="demo" all'interno dell'elemento <div>:

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

Prova da solo

Esempio 5

Aggiungi un bordo rosso all'elemento <a> che ha l'attributo target all'interno del <div>.

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

Prova da solo

Esempio 6

Questo esempio dimostra come funzionano i selettori multipli.

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

Il seguente codice aggiungerà un colore di sfondo all'elemento <h2> primo all'interno di <div>:

<div id="myDIV">
  <h2>Un elemento h2</h2>
  <h3>Un elemento h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Prova da solo

Esempio 7

Ma, se l'elemento <h3> all'interno di <div> viene posizionato prima dell'elemento <h2>.

<div id="myDIV">
  <h3>Un elemento h3</h3>
  <h2>Un elemento h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Prova da solo

Supporto del browser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Pagine correlate

Tutorial CSS:Selettore CSS

Manuale di riferimento CSS:Manuale di riferimento dei selettori CSS

Tutorial JavaScript:JavaScript HTML DOM Node List

Manuale di riferimento JavaScript:document.querySelector()

Manuale di riferimento JavaScript:element.querySelectorAll()

Manuale di riferimento HTML DOM:document.querySelectorAll()