files/es/web/api/document/queryselector/index.html


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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
  - API
  - Consulta
  - DOM
  - Referencias(2)
  - Referências
  - Selectores
  - metodo
translation_of: Web/API/Document/querySelector
---
<div>{{ ApiRef("DOM") }}</div>

<div>Devuelve el primer elemento del documento (utilizando un <a href="http://en.wikipedia.org/wiki/Tree_traversal#Pre-order_2">recorrido primero en profundidad pre ordenado</a> de los nodos del documento) que coincida con el grupo especificado de selectores.</div>

<div> </div>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="brush: js">element = document.querySelector(selectores);
</pre>

<p>Donde:</p>

<ul>
 <li><code>element</code> es un objeto de tipo <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li>
 <li><code>selectores</code> es una cadena de caracteres que contiene uno o más <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores CSS</a> separados por coma.</li>
</ul>

<h2 id="Example" name="Example">Ejemplo</h2>

<p>En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":</p>

<pre class="brush: js">var el = document.querySelector(".miClase");
</pre>

<h2 id="Notes" name="Notes">Ejemplo más útil</h2>

<p>Los <em>Selectores</em> pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <code>&lt;input name="login" /&gt;</code> dentro de <code>&lt;div class="user-panel main"&gt;</code>.</p>

<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");</pre>

<h2 id="Notes" name="Notes">Notas</h2>

<ul>
 <li>Devuelve <code>null</code> si no se encuentran coincidencias, de lo contrario, retorna el primer elemento  encontrado.</li>
 <li>Si el selector coincide con un ID y este ID es usado erróneamente varias veces en el documento, devuelve el primer elemento encontrado.</li>
 <li>Lanza una excepción de tipo SYNTAX_ERR si el grupo de selectores especificado no es válido.</li>
 <li><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector() se introdujo en la <a href="http://www.w3.org/TR/selectors-api/">API Selectors</a>.</span></li>
 <li>La cadena de caracteres que se pasa como argumento a <code><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector debe seguir la sintaxis CSS.</span></code></li>
 <li>Las Pseudo-clases CSS nunca devolverán elementos, tal y como está especificado en la <code><a href="http://www.w3.org/TR/selectors-api/#grammar">API Selectors</a></code>.</li>
 <li>Para que coincidan ID's o selectores que no siguen la sintáxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con una barra invertida (\). Como la barra invertida es un carácter de 'escape' en JavaScript, si estás indicando una cadena de caracteres literal, debes 'escaparla' dos veces (una para la cadena de caracteres JavaScript y otra para el querySelector): </li>
</ul>

<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
&lt;div id="foo:bar"&gt;&lt;/div&gt;

&lt;script&gt;
  console.log('#foo\bar');               // "#fooar"
  document.querySelector('#foo\bar');    // No coincide con nada

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\\\bar'); // Coincide con el primer div

  document.querySelector('#foo:bar');    // No coincide con nada
  document.querySelector('#foo\\:bar');  // Coincide con el segundo div
&lt;/script&gt;
</pre>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los navegadores</h2>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Plataforma</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte Basico</td>
   <td>1</td>
   <td>3.5 (1.9.1)<br>
    {{bug(416317)}}</td>
   <td>8</td>
   <td>10</td>
   <td>3.2 (525.3)<br>
    {{Webkitbug("16587")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Plataforma</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte Basico</td>
   <td>2.1</td>
   <td>Si</td>
   <td>9</td>
   <td>10.0</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Specification" name="Specification">Especificaciones</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
</ul>

<h2 id="See_also" name="See_also">Vea también</h2>

<ul>
 <li>{{domxref("document.querySelectorAll()")}}</li>
 <li>{{domxref("element.querySelector()")}}</li>
 <li>{{domxref("element.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Snippets para querySelector</a></li>
</ul>