1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: ParentNode.querySelector()
slug: orphaned/Web/API/ParentNode/querySelector
tags:
- PrecisaDeExemplo
- Projeto
- Referencia
- Seletores
- metodo
translation_of: Web/API/ParentNode/querySelector
original_slug: 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>
|
