From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:45 -0500
Subject: initial commit

---
 files/es/web/api/document/queryselector/index.html | 136 +++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 files/es/web/api/document/queryselector/index.html

(limited to 'files/es/web/api/document/queryselector/index.html')

diff --git a/files/es/web/api/document/queryselector/index.html b/files/es/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..b442ba5bbb
--- /dev/null
+++ b/files/es/web/api/document/queryselector/index.html
@@ -0,0 +1,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 es 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">AP​I 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/" title="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>
-- 
cgit v1.2.3-54-g00ecf