Element.querySelector()

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

I 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

Compatibilità con i browser

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

Vedi anche

• Individuazione degli elementi DOM mediante selettori
• Selettori di attributi nella guida sul CSS
• Selettori di attributi nell'Area di apprendimento MDN
• {{domxref("Element.querySelectorAll()")}}
• {{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}
• {{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}
• {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}
• Snippets per querySelector
• Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.