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à unSyntaxError
. 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 <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
BCD tables only load in the browser
Vedi anche
- 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()
andDocument.querySelectorAll()
DocumentFragment.querySelector()
andDocumentFragment.querySelectorAll()
ParentNode.querySelector()
andParentNode.querySelectorAll()
- Snippets per querySelector
- Other methods that take selectors:
element.closest()
andelement.matches()
.