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
|
---
title: Element.querySelector()
slug: Web/API/Element/querySelector
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>
<p>El método <code><strong>querySelector() </strong></code>de la intrefaz <strong> </strong>{{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.</p>
<h2 id="Syntax" name="Syntax">Sintáxis</h2>
<pre class="syntaxbox notranslate"><var>elemento</var> = elementoBase.querySelector(<em>selectore</em>s);
</pre>
<h3 id="Parametros">Parametros</h3>
<dl>
<dt><code>selectores</code></dt>
<dd>Es el grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores</a> que servirán para filtrar los elementos descendientes del {{domxref("Element")}} <code>elementoBase</code>; debe tener una sintáxis CSS válida o se producirá una excepción <code>SyntaxError</code>. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.</dd>
</dl>
<h3 id="Valor_devuelto">Valor devuelto</h3>
<p>Devolverá el primer descendiente del elemento <code>elementoBase</code> que coincida con el grupo de <code>selectores</code> especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del <code>elementoBase</code>; en otras palabras, los <code>selectores</code> se aplican primero al documento completo, no sólo al <code>elementoBase</code>, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del <code>elementoBase</code>. El método <code>querySelector()</code> devolverá el primero de dichos elementos descendientes.</p>
<p>Si no hubiera coincidencias, devolverá el valor <code>null</code>.</p>
<h3 id="Excepciones">Excepciones</h3>
<dl>
<dt><code>SyntaxError</code></dt>
<dd>Los <code>selectores</code> especificados no son válidos.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Vamos a ver unos cuantos ejemplos.</p>
<h3 id="Encontrar_un_elemento_a_traves_del_valor_de_sus_atributos">Encontrar un elemento a traves del valor de sus atributos</h3>
<p>En este primer ejemplo, obtendremos el primer elemento {{HTMLElement("style")}} del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":</p>
<pre class="brush:js notranslate">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h3 id="Toda_la_jerarquía_cuenta">Toda la jerarquía cuenta</h3>
<p>El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los <code>selectores</code>, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del <code>elementoBase</code> para localizar coincidencias.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);</pre>
<h4 id="Resultado">Resultado</h4>
<p>El resultado es el siguiente:</p>
<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p>
<p>Podemos ver que el selector <code>"div span"</code> coincide con el elemento {{HTMLElement("span")}}, aunque <code>baseElement</code> excluye el elemento {{domxref("div")}} al no ser parte de su selector.</p>
<h3 id="Más_ejemplos">Más ejemplos</h3>
<p>Puedes ver más ejemplos sobre el formato apropiado para los <code>selectores</code> aquí {{domxref("Document.querySelector()")}}.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
{{Compat("api.Element.querySelector")}}
<h2 id="También_puedes_consultar">También puedes consultar:</h2>
<ul>
<li><a href="/es/docs/Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores">Localizando elementos DOM usando selectores</a></li>
<li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> en la guia de CSS</li>
<li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Selectores de atributo</a> en MDN Learning</li>
<li>{{domxref("Element.querySelectorAll()")}}</li>
<li>{{domxref("Document.querySelector()")}} y {{domxref("Document.querySelectorAll()")}}</li>
<li>{{domxref("DocumentFragment.querySelector()")}} y {{domxref("DocumentFragment.querySelectorAll()")}}</li>
<li>{{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
<li>Otros métodos que toman selectores: {{domxref("element.closest()")}} y {{domxref("element.matches()")}}.</li>
</ul>
|
