Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

Syntax

elemento = elementoBase.querySelector(selettori);

Parametri

selettori
Un gruppo di selettori per abbinare gli elementi discendenti di Element elementoBase contro; questa deve essere una sintassi CSS valida o si verificherà un errore SyntaxError. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.

Valore di ritorno

Il primo elemento discendente di elementoBase che corrisponde al gruppo specificato di selettori. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi incluso elementoBase e i suoi discendenti; in altre parole, selettori viene prima applicato all'intero documento, non a elementoBase, per generare un elenco iniziale di potenziali elementi. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di elementoBase. La prima corrispondenza di quegli elementi rimanenti viene restituita dal metodo querySelector().

Se non vengono trovate corrispondenze, il valore restituito è null.

Eccezioni

SyntaxError
I selettori specificati non sono validi.

Esempi

Consideriamo alcuni esempi.

Trova un elemento specifico con valori specifici di un attributo

In questo primo esempio, il primo <style> elemento che non ha alcun tipo o che ha tipo "text/css" nel corpo del documento HTML viene restituito:

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

L'intera gerarchia conta

Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i selettori, in modo che i livelli al di fuori di elementoBase siano ancora considerati quando si localizzano le corrispondenze.

HTML

<div>
  <h5>Contenuto originale</h5>
  <p>
    all'interno del paragrafo
    <span>all'interno di span</span>
    all'interno del paragrafo
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

JavaScript

var elementoBase = document.querySelector("p");
document.getElementById("output").innerHTML =
         (elementoBase.querySelector("div span").innerHTML);

Risultato

Il risultato è simile a questo:

Si noti come il selettore "div span" corrisponda ancora all'elemento <span>, anche se i nodi figlio di elementoBase non includono l'elemento div (è ancora parte del selettore specificato).

Altri esempi

Vedi Document.querySelector() per ulteriori esempi del formato corretto per i selettori.

Specifiche

Specificazione Stato Commento
DOM
The definition of 'querySelector()' in that specification.
Living Standard  
Selectors API Level 2
The definition of 'querySelectorAll()' in that specification.
Obsolete  
Selectors API Level 1
The definition of 'querySelectorAll()' in that specification.
Obsolete  

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 9
Full support 9
Partial support 8
Notes
Notes querySelector() is supported, but only for CSS 2.1 selectors.
Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev
Ultima modifica di: IsibisiDev,