From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/element/queryselector/index.html | 187 ++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 files/es/web/api/element/queryselector/index.html (limited to 'files/es/web/api/element/queryselector') diff --git a/files/es/web/api/element/queryselector/index.html b/files/es/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..8ce9cbe15f --- /dev/null +++ b/files/es/web/api/element/queryselector/index.html @@ -0,0 +1,187 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

El método querySelector() de la intrefaz  {{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.

+ +

Sintáxis

+ +
elemento = elementoBase.querySelector(selectores);
+
+ +

Parametros

+ +
+
selectores
+
Es el grupo de selectores que servirán para filtrar los elementos descendientes del  {{domxref("Element")}} elementoBase; debe tener una sintáxis CSS válida o se producirá una excepción SyntaxError. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.
+
+ +

Valor devuelto

+ +

Devolverá el primer descendiente del elemento elementoBase que coincida con el grupo de selectores especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del elementoBase; en otras palabras, los selectores se aplican primero al documento completo, no sólo al elementoBase, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del elementoBase. El método querySelector() devolverá el primero de dichos elementos descendientes.

+ +

Si no hubiera coincidencias, devolverá el valor null.

+ +

Excepciones

+ +
+
SyntaxError
+
Los selectores especificados no son válidos.
+
+ +

Ejemplos

+ +

Vamos a ver unos cuantos ejemplos.

+ +

Encontrar un elemento a traves del valor de sus atributos

+ +

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":

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Toda la jerarquía cuenta

+ +

El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los selectores, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del elementoBase para localizar coincidencias.

+ +

HTML

+ +
<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>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

Resultado

+ +

El resultado es el siguiente:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

Podemos ver que el selector "div span" coincide con el elemento {{HTMLElement("span")}}, aunque baseElement excluye el elemento {{domxref("div")}} al no ser parte de su selector.

+ +

Más ejemplos

+ +

Puedes ver más ejemplos sobre el formato apropiado para los selectores aquí {{domxref("Document.querySelector()")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() funciona en IE8, pero solo para selectores CSS 2.1.

+ +

También puedes consultar:

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