Metodo querySelector() del Documento DOM HTML

Definizione e uso

querySelector() Il metodo restituisce gli elementi che corrispondono al selettore CSSIl primoelementi.

Per ottenereTuttielementi corrispondenti (non solo il primo corrispondente), utilizzare querySelectorAll().

Se il selettore non è valido, allora querySelector() e querySelectorAll() lanciano SYNTAX_ERR Eccezione.

Esempio

Esempio 1

Ottieni il primo elemento <p>:

document.querySelector("p");

Prova tu stesso

Esempio 2

Ottieni il primo elemento con la classe="example":

document.querySelector(".example");

Prova tu stesso

Esempio 3

Ottieni il primo elemento <p> con la classe="example":

document.querySelector("p.example");

Prova tu stesso

Esempio 4

Modifica il testo dell'elemento con id="demo":

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

Prova tu stesso

Esempio 5

Seleziona il primo elemento <p> il cui elemento genitore è <div>:

document.querySelector("div > p");

Prova tu stesso

Esempio 6

Seleziona il primo elemento <a> con l'attributo "target":

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

Prova tu stesso

Esempio 7

Seleziona il primo <h3> o il primo <h4>:

<h3>Un elemento h3</h3>
<h4>Un elemento h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Prova tu stesso

Esempio 8

Seleziona il primo <h3> o il primo <h4>:

<h4>Un elemento h4</h4>
<h3>Un elemento h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Prova tu stesso

Sintassi

document.querySelector(cssSelectors)

Parametro

Parametro Descrizione
cssSelectors

Obbligatorio. Un o più selettori CSS.

I selettori CSS scelgono gli elementi HTML in base a id, classe, tipo, attributi, valori degli attributi, ecc.

Per una lista completa, visita il nostro Manuale di riferimento dei selettori CSS.

Per più selettori, separare ciascun selettore con una virgola (vedi l'esempio sopra la pagina).

Valore di ritorno

Tipo Descrizione
Oggetto

NodeList che contiene il primo elemento corrispondente al selettore CSS.

Se non vengono trovati elementi corrispondenti, viene restituito null.

La differenza tra HTMLCollection e NodeList

NodeList e HTMLcollection molto simili.

Entrambi sono insiemi di nodi (elementi) simili a array estratti dal documento. I nodi possono essere acceduti tramite l'indice (indice). L'indice parte da 0.

Entrambi length Proprietà, che restituisce il numero di elementi nella lista (insieme).

Un HTMLCollection èElemento documentoinsieme.

Un NodeList èNodo documentoinsieme di (nodi elementi, nodi attributi e nodi testo).

Gli elementi HTMLCollection possono essere acceduti tramite il loro nome, id o numero di indice.

I elementi NodeList possono essere acceduti solo tramite il loro numero di indice.

Un HTMLCollection è semprein tempo realeinsieme.

Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nell'HTMLCollection cambia anche.

Un NodeList è generalmenteStaticoinsieme.

Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nel NodeList non cambia.

getElementsByClassName() e getElementsByTagName() Tutti i metodi restituiscono un HTMLCollection in tempo reale.

querySelectorAll() Il metodo restituisce un NodeList statico.

childNodes L'attributo restituisce un NodeList in tempo reale.

Supporto del browser

document.querySelector() È una caratteristica di DOM Level 1 (1998).

Tutti i browser lo supportano:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Tutorial:

Selettori CSS

Manuale di riferimento dei selettori CSS

Manuale di riferimento NodeList DOM HTML

Metodo QuerySelector:

Metodo querySelector():

Metodo querySelectorAll():

Metodo GetElement:

Metodo getElementById()

Metodo getElementsByTagName()

Metodo getElementsByClassName()