diff options
Diffstat (limited to 'files/it/web/api/element/queryselector/index.html')
| -rw-r--r-- | files/it/web/api/element/queryselector/index.html | 131 |
1 files changed, 0 insertions, 131 deletions
diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html deleted file mode 100644 index f6455563d9..0000000000 --- a/files/it/web/api/element/queryselector/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Element.querySelector() -slug: Web/API/Element/querySelector -translation_of: Web/API/Element/querySelector ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd> -</dl> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p> - -<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p> - -<h3 id="Eccezioni">Eccezioni</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>I <code>selectors</code> specificati non sono validi.</dd> -</dl> - -<h2 id="Esempi">Esempi</h2> - -<p>Consideriamo alcuni esempi.</p> - -<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3> - -<p>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:</p> - -<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); -</pre> - -<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3> - -<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: 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></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var baseElement = document.querySelector("p"); -document.getElementById("output").innerHTML = - (baseElement.querySelector("div span").innerHTML);</pre> - -<h4 id="Risultato">Risultato</h4> - -<p>Il risultato è simile a questo:</p> - -<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p> - -<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br> - i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p> - -<h3 id="More_examples">More examples</h3> - -<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.querySelector")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> - <li><a href="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li> - <li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> - <li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li> - <li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li> -</ul> |