From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/api/element/queryselector/index.html | 131 ++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/it/web/api/element/queryselector/index.html (limited to 'files/it/web/api/element/queryselector') diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..f6455563d9 --- /dev/null +++ b/files/it/web/api/element/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{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
+
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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{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

+ + -- cgit v1.2.3-54-g00ecf