diff options
Diffstat (limited to 'files/pt-br/web/api/parentnode/queryselector/index.html')
-rw-r--r-- | files/pt-br/web/api/parentnode/queryselector/index.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/files/pt-br/web/api/parentnode/queryselector/index.html b/files/pt-br/web/api/parentnode/queryselector/index.html new file mode 100644 index 0000000000..0e719e1a73 --- /dev/null +++ b/files/pt-br/web/api/parentnode/queryselector/index.html @@ -0,0 +1,101 @@ +--- +title: ParentNode.querySelector() +slug: Web/API/ParentNode/querySelector +tags: + - PrecisaDeExemplo + - Projeto + - Referencia + - Seletores + - metodo +translation_of: Web/API/ParentNode/querySelector +--- +<p>{{APIRef("DOM")}}{{Draft}}</p> + +<p>O {{DOMxRef("ParentNode")}} mixin define o <code><strong>querySelector()</strong></code> método como retornar um {{DOMxRef("Element")}} representando o primeiro elemento que corresponde ao grupo especificado de seletores que são descendentes do objeto no qual o método foi chamado.</p> + +<p>Se você precisar de todos os elementos correspondentes à lista de seletores, use{{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} instead.</p> + +<div class="blockIndicator note"> +<p>Nota: Este método é implementado como {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} e {{DOMxRef("Element.querySelector()")}}.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>); +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Um {{DOMxRef("DOMString")}} contendo um ou mais seletores para comparar. Essa sequência deve ser um válido <a href="/en-US/docs/Web/CSS/CSS_Selectors">lista de seletores compostos</a> suportado pelo navegador; se não for, um <code>SyntaxError</code> exceção é lançada. Veja <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a> para obter mais informações sobre o uso de seletores para identificar elementos. Vários seletores podem ser especificados, separando-os usando vírgulas.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Os caracteres que não fazem parte da sintaxe CSS padrão devem ser escapados usando um caractere de barra invertida. Como o JavaScript também usa escape de backspace, deve-se tomar cuidado especial ao escrever literais de string usando esses caracteres. Veja {{anch("Escaping special characters")}} Para maiores informações.</p> +</div> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>O primeiro {{DOMxRef("Element")}} que corresponda a pelo menos um dos seletores ou <code>null</code> se esse elemento não for encontrado.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Se o especificado <code>selectors</code> inclua um <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-elemento</a>, o valor retornado é sempre <code>null</code>.</p> +</div> + +<h3 id="Exceções">Exceções</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>A sintaxe do especificado <code>selectors</code> string não é válida.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Padrão de vida</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Sem alteração</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definição original</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("api.ParentNode.querySelector")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets de código para <code>querySelector()</code></a></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores de atributos</a> no guia CSS</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Seletores de atributos </a>na MDN Área de Aprendizagem</li> + <li>Seu método está disponível como {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li> +</ul> |