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/document/queryselector/index.html | 121 +++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 files/it/web/api/document/queryselector/index.html (limited to 'files/it/web/api/document/queryselector/index.html') diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..6d8000818d --- /dev/null +++ b/files/it/web/api/document/queryselector/index.html @@ -0,0 +1,121 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelector() ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito null.

+ +
+

Note: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.

+
+ +

Sintassi

+ +
element = document.querySelector(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione SYNTAX_ERR. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sui selettori e su come gestirli.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di CSS selectors, o null viene restituito se non ci sono corrispondenze.

+ +

Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Eccezioni

+ +
+
SYNTAX_ERR
+
La sintassi dei selettori specificati non è valida.
+
+ +

Note di utilizzo

+ +

Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.

+ +

Gli pseudo-elementi CSS non restituiranno mai alcun elemento, come specificato nelle API dei selettori.

+ +

Escaping caratteri speciali

+ + + +

Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
+  document.querySelector('#foo\bar');    // Non corrisponde a nulla
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Seleziona il primo div
+
+  document.querySelector('#foo:bar');    // Non corrisponde a nulla
+  document.querySelector('#foo\\:bar');  // Seleziona il secondo div
+ +

Esempi

+ +

Trovare il primo elemento che corrisponde a una classe

+ +

In questo esempio, viene restituito il primo elemento del documento con la classe "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Un selettore più complesso

+ +

I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<input name="login"/>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<div class="user-panel main">) nel documento viene restituito:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Vedi anche

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