MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.querySelector()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Devuelve el primer descendiente del elemento indicado que coincida con el o los selectores indicados.

Sintáxis

elemento = elementoBase.querySelector(selectores);

Parametros

selectores
Es el grupo de selectores que servirán para filtrar los elementos descendientes del  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 <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:

Podemos ver que el selector "div span" coincide con el elemento <span>, aunque baseElement excluye el elemento div al no ser parte de su selector.

Más ejemplos

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

Especificaciones

Especificación Estado Comentarios
DOM4
The definition of 'querySelectorAll()' in that specification.
Recommendation  
Selectors API Level 2
The definition of 'querySelectorAll()' in that specification.
Working Draft  
Selectors API Level 1
The definition of 'querySelectorAll()' in that specification.
Recommendation  

Compatibilidad en los Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1
 

3.5 (1.9.1)

9 [1]

(Yes)

(Yes)
Feature Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

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

También puedes consultar:

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Luis_Calvo, Fx-Enlcxx
 Última actualización por: Luis_Calvo,