From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/api/document/queryselector/index.html | 134 +++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/pt-pt/web/api/document/queryselector/index.html (limited to 'files/pt-pt/web/api/document/queryselector/index.html') diff --git a/files/pt-pt/web/api/document/queryselector/index.html b/files/pt-pt/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..e979e285d3 --- /dev/null +++ b/files/pt-pt/web/api/document/queryselector/index.html @@ -0,0 +1,134 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Document + - Elementos DOM + - Referencia + - Selector API + - Seletores CSS + - Seletors + - metodo + - querySelector +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

O método querySelector() de {{domxref("Document")}} retorna o primeiro {{domxref("Element")}} dentro do documento que corresponde ao seletor, ou grupo de seleteores especificados. Se não há elementos que correspondem, null é devolvido como resultado.

+ +
+

Nota: A correspondência é feita através de uma travessia pre-order em profundidade dos nódulos do documento, a começar com o primeiro elemento da marcação do documento e iterando através de nódulos sequenciais por ordem do número de nódulos filhos.

+
+ +

Syntaxe

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

Parameteros

+ +
+
selectors
+
Um {{domxref("DOMString")}} a conter um ou mais seletores para com que corresponder. Esta string tem de ser um seletor de CSS valido; se não é, uma exception SYNTAX_ERR é lançada. Veja Localizar elementos do DOM a usar seletores para saber mais sobre seletor e como os gerir.
+
+ +
+

Nota: Os carateres que não fazem parte da sintaxe padrão do CSS devem ser evitados ao usar um caráter de barra invertida. Uma vez que o JavaScript também usa barra invertida para escapar, deve ter especial cuidado ao escrever string literals usando estes carateres. Veja {{anch("Escapar carateres especiais")}} para obter mais informação.

+
+ +

Resultado

+ +

Um objeto {{domxref("HTMLElement")}} a representar o primeiro elemento no documento que corresponde aos seletores de CSS, ou null se não há elementos correspondentes.

+ +

Se precisar de uma lista de todos os elementos que correspondem ao seletores especificados, deve usar {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Exeções

+ +
+
SYNTAX_ERR
+
O syntaxe dos selectors especificados está incorrecto.
+
+ +

Notas de uso

+ +

Se o seletor especificado corresponde a um ID que é incorretamente utilizado mais que uma vez num documento, o primeiro elemento com esse ID será devolvido.

+ +

Pseudoelementos de CSS não devolvem elementos, como é especificado na API de seletores.

+ +

Escapar carateres especiais

+ +

Para corresponder a um ID ou seletor que não segue a sintaxe de CSS padrão (ao usar o caráter de dois pontos ou espaço incorretamente), deve escapar o caráter com uma barra invertida ("\"). Como a barra invertida também é um caráter de escapar no JavaScript, se a escrever numa string literal, tem de a escapar duas vezes (primeiro para a string do JavaScript, e depois para o querySelector()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b é o caráter de controlo para a barra invertida)
+  document.querySelector('#foo\bar');    // Corresponde a nada
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Corresponde ao primeiro div
+
+  document.querySelector('#foo:bar');    // Corresponde a nada
+  document.querySelector('#foo\\:bar');  // Corresponde ao segundo div
+</script>
+ +

Exemplos

+ +

Encontrar o primeiro elemento que corresponde a uma classe

+ +

Neste exemplo, o primeiro elemento no documento com a classe myclass é devolvida:

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

Um seletor mais complexo

+ +

Seletores são muito poderosos, como demonstrado no seguinte exemplo. O primeiro elemento {{HTMLElement("input")}} com o nome "login" (<input name="login"/>) encontrado dentro dum {{HTMLElement("div")}} cuja classe é "user-panel main" (<div class="user-panel main">) no documento é devolvido:

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

Negação

+ +

Todos os strings de seletores de CSS são válidos, assim também é possivel ter seletores de negação:

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

Isto seléciona um input que tem um div com classe user-panel como parente, mas sem a classe main.

+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstado
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}{{Spec2("DOM WHATWG")}}
+ +

Compatibilidade

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

Veja também

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