Element.querySelector()

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

var element = baseElement.querySelector(selectors);

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.

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.

SyntaxError

I selectors specificati non sono validi.

Consideriamo alcuni esempi.

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])");

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).

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

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