Element.querySelector()

Il metodo querySelector() dell'interfaccia Element restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

Sintassi

var element = baseElement.querySelector(selectors);

Parameters

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

Valore di ritorno

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

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

Eccezioni

SyntaxError
selectors specificati non sono validi.

Esempi

Consideriamo alcuni esempi.

Trova un elemento specifico con valori specifici di un attributo

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

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 selectors, in modo che i livelli al di fuori di baseElement specificato siano ancora considerati quando si localizzano le corrispondenze.

HTML

<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

JavaScript

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

Risultato

Il risultato è simile a questo:

Nota come il selettore "div span" corrisponda ancora correttamente all'elemento <span> anche se il
i nodi figli di baseElement non includono l'elemento div (fa ancora parte del selettore specificato).

More examples

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

Specifiche

Specifica 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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
querySelectorChrome 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 6WebView Android Full support YesChrome Android 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