Questa pagina contiene un errore di script. Nell’attesa che venga corretto dagli editori del sito, è possibile visualizzare qui di seguito una versione provvisoria dei contenuti.

{{APIRef("DOM")}}

Il metodo querySelector() dell'interfaccia {{domxref("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 {{domxref ("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 {{HTMLElement("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:

{{ EmbedLiveSample('L'intera_gerarchia_conta', 600, 160) }}

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

More examples

Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i selectors.

Specifiche

Specifica Stato Commento
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}} {{Spec2('DOM WHATWG')}}  
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}} {{Spec2('Selectors API Level 2')}}  
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}} {{Spec2('Selectors API Level 1')}}  

Compatibilità con i browser

{{Compat("api.Element.querySelector")}}

Vedi anche

Tag del documento e collaboratori

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