Element.querySelector()

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

Compatibilità con i browser

Vedi anche

• Individuazione degli elementi DOM mediante selettori
• Selettori di attributi in the CSS Guide
• Selettori di attributi in the MDN Learning Area
• Element.querySelectorAll()
• Document.querySelector() and Document.querySelectorAll()
• DocumentFragment.querySelector() and DocumentFragment.querySelectorAll()
• ParentNode.querySelector() and ParentNode.querySelectorAll()
• Frammenti di codice per querySelector
• Altri metodi che accettano i selettori: element.closest() e element.matches().